claude-frontforge

Claude Frontforge

Craft · Memory · Enforcement

Build interfaces with intention. Remember decisions across sessions. Enforce consistency.

Construa interfaces com intencao. Lembre decisoes entre sessoes. Garanta consistencia.

---

Overview / Visao geral

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 e um plugin de UX para o Claude Code. Ele guia o design de interface, salva suas decisoes e valida o resultado para manter consistencia entre sessoes.

---

What It Does / O que faz

• Craft: infer direction from context (dashboard, settings, tools)

• Memory: store design decisions in .frontforge/system.md

• Enforcement: validate spacing, depth, and motion before finishing

• Craft: infere direcao a partir do contexto (dashboard, settings, tools)

• Memory: salva decisoes em .frontforge/system.md

• Enforcement: valida espacamento, profundidade e animacao antes de concluir

---

Quickstart / Inicio rapido

1. Install the plugin

2. Run /claude-frontforge:init

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

4. Instale o plugin

5. Rode /claude-frontforge:init

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

---

🌍 Use with Other LLMs / Use com Outros LLMs

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

Beyond Claude Code, you can use Frontforge with:

• 🟦 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

This will:

1. ✅ Download all validation scripts to ./frontforge
2. ✅ Configure your LLM with design system rules
3. ✅ Set up automatic validation

📖 Full guide: USE_WITH_OTHER_LLMS.md

---

Installation / Instalacao

Plugin (Recommended) / Plugin (Recomendado)

# Add the marketplace
/plugin marketplace add thiagoedson/claude-frontforge

# Install the plugin
/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 (Avancado)

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.

---

Commands / Comandos

/claude-frontforge:init              # Smart dispatcher / Despacho inteligente
/claude-frontforge:status            # Show current system / Ver sistema atual
/claude-frontforge:audit <path>      # Check code / Verificar codigo
/claude-frontforge:extract           # Extract patterns / Extrair padroes
/claude-frontforge:generate-tokens   # Generate design tokens / Gerar tokens de design
/claude-frontforge:analyze-website   # Extract tokens from live websites / Extrair tokens de sites
/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 🚀

0. Specialized Agents / Agentes Especializados 🤖 NEW!

Agentes especializados para tarefas focadas de UX:

Agent	Purpose / Propósito
UX Interpreter	Extract design systems from live websites / Extrair design systems de sites
Component Architect	Design scalable, accessible components / Projetar componentes escaláveis
Animation Specialist	Create purposeful micro-interactions / Criar micro-interações
Responsive Expert	Mobile-first responsive layouts / Layouts responsivos mobile-first
UX Researcher	Create personas, analyze flows / Criar personas, analisar fluxos