Open Source Plugin

Claude Frontforge

Craft · Memory · Enforcement
Build interfaces with intention. Remember decisions across sessions. Enforce consistency.
Construa interfaces com intenção. Lembre decisões entre sessões. Garanta consistência.

GitHubMIT License
Scroll ↓
Overview / Visão geral

Build coherent UI across sessions

Claude Frontforge is a UX plugin for Claude Code. It guides interface design, saves your choices, and validates output so your UI stays coherent across sessions.
Claude Frontforge é um plugin de UX para o Claude Code. Ele guia o design de interface, salva suas decisões e valida o resultado para manter consistência entre sessões.

What It Does / O que faz

Craft, Memory, Enforcement

Craft

Infer direction from context (dashboard, settings, tools)

Infere direção a partir do contexto (dashboard, settings, tools)

Memory

Store design decisions in .frontforge/system.md

Salva decisões em .frontforge/system.md

Enforcement

Validate spacing, depth, and motion before finishing

Valida espaçamento, profundidade e animação antes de concluir

Quickstart / Início rápido

Get started in minutes

Install the plugin

Instale o plugin

Run /claude-frontforge:init

Rode /claude-frontforge:init

Save the generated system to .frontforge/system.md when prompted

Salve o sistema gerado em .frontforge/system.md quando solicitado

🌍 Use with Other LLMs / Use com Outros LLMs

Works with ANY LLM!

Claude Frontforge works with ANY LLM! / Funciona com QUALQUER LLM!

GitHub Copilot / Codex
Cursor AI
Gemini CLI
Ollama (local LLMs)
Aider
Continue (VS Code)
And more! / E mais!

Quick Install for Other LLMs

# Interactive installer (detects your environment)
npx degit thiagoedson/claude-frontforge/install.js
node install.js

# Or install directly for specific LLM:
node install.js --llm copilot   # GitHub Copilot
node install.js --llm cursor    # Cursor AI
node install.js --llm aider     # Aider
node install.js --llm gemini    # Gemini CLI
Download all validation scripts to ./frontforge
Configure your LLM with design system rules
Set up automatic validation

📖 Full guide: USE_WITH_OTHER_LLMS.md

System File / Arquivo de sistema

.frontforge/system.md

After establishing direction, your decisions live in .frontforge/system.md.
Depois de estabelecer a direção, suas decisões ficam em .frontforge/system.md.

Example / Exemplo

# Design System

## Direction
Personality: Precision & Density
Foundation: Cool (slate)
Depth: Borders-only

## Tokens
### Spacing
Base: 4px
Scale: 4, 8, 12, 16, 24, 32

## Patterns
### Button Primary
- Height: 36px
- Padding: 12px 16px
- Radius: 6px
Quality Gates / Qualidade

Post-write validation hook

Frontforge enforces consistency with a post-write validation hook.
Frontforge aplica consistência com um hook de validação pós-escrita.

Spacing grid adherence

Grade de espaçamento (sem px fora da grade)

Depth strategy consistency

Estratégia de profundidade (bordas vs sombras)

Animation sanity

Animação controlada (sem bounce/spring)

If violations are found, the hook blocks completion and prints the exact rule that failed.
Se houver violação, o hook bloqueia a conclusão e mostra a regra exata.

Commands / Comandos

Claude Frontforge CLI

/claude-frontforge:init

Smart dispatcher / Despacho inteligente

/claude-frontforge:status

Show current system / Ver sistema atual

/claude-frontforge:audit <path>

Check code / Verificar código

/claude-frontforge:extract

Extract patterns / Extrair padrões

/claude-frontforge:generate-tokens

Generate design tokens / Gerar tokens de design

/claude-frontforge:metrics

Health dashboard / Dashboard de saúde

/claude-frontforge:setup-statusline

Configure persistent status line / Configurar barra de status

New Features / Novos Recursos

Built for long-running UI work

Persistent Status Line / Barra de Status Persistente

Real-time model, context %, cost, session time, git branch, and design system direction (customizable).

Intelligent Context Detection / Detecção Inteligente de Contexto

Detects framework via package.json, domain hints via README, and folder patterns to suggest the best design direction.

Automatic Token Generation / Geração Automática de Tokens

Extracts spacing, colors, shadows, radius, and type scale from existing code and generates CSS/JS/JSON outputs.

Component Pattern Learning / Aprendizado de Padrões

Learns Button/Card/Input patterns (sizes, states, variants) and stores them in .frontforge/system.md for reuse.

Accessibility Validation / Validação de Acessibilidade

WCAG checks: contrast, 44x44px touch targets, heading hierarchy, alt text, labels/aria, keyboard support.

Metrics Dashboard / Dashboard de Métricas

Project-wide health score (0-100) with actionable consistency suggestions (spacing grid, palette usage, depth strategy, motion).

Installation / Instalação

Plugin (Recommended) / Plugin (Recomendado)

terminal
$ /plugin marketplace add thiagoedson/claude-frontforge
$ /plugin menu
Select claude-frontforge from the menu. Restart Claude Code after.
Selecione claude-frontforge no menu. Reinicie o Claude Code depois.

Manual (Advanced) / Manual (Avançado)

git clone https://github.com/thiagoedson/claude-frontforge.git
cd claude-frontforge
cp -r .claude/* ~/.claude/
cp -r .claude-plugin/* ~/.claude-plugin/

Restart Claude Code. / Reinicie o Claude Code.

Examples / Exemplos

Reference files

See reference/examples/:
Veja reference/examples/:

Example systems

reference/examples/system-precision.md
reference/examples/system-warmth.md

License / Licença

MIT — See LICENSE.

MIT — Veja LICENSE.

Website: https://cassonestudio.com.br/
Plugin Page / Página do Plugin: https://cassonestudio.com.br/app/claude-frontforge/
GitHub: https://github.com/thiagoedson/claude-frontforge