thiagoedson/claude-frontforge

Claude Frontforge

Build interface design with craft, consistency, and confidence.

---

Visual Activation Banner

IMPORTANT: When this skill is activated (via /init or any frontforge command), ALWAYS display the visual banner first to indicate the skill is running:

╭──────────────────────────────────────────────────────────────╮
│  █▀▀█▀█ █▀██▄░█▀█▀█▀▀█▀█ █▀██▀▀█▀▀  UX Engineering          │
│  █▀░█▀▄ █▄██░▀█░█░█▀░█▄█ █▀▄█▄███▄  for Claude Code         │
├──────────────────────────────────────────────────────────────┤
│  ✨ Craft · 💾 Memory · 🛡️  Enforcement      ◆ ACTIVE ◆      │
╰──────────────────────────────────────────────────────────────╯

This helps users clearly identify that the Frontforge skill is engaged and ready.

Scope

Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces.

Not for: Landing pages, marketing sites, campaigns. Redirect those to /frontend-design.

When This Skill Activates

Auto-activate when the user asks to:

• Build a UI component, screen, or layout for an app
• Design a dashboard, admin panel, settings page, or data table
• Create a design system, token file, or theme
• Audit or fix UI inconsistencies
• Build anything described as a "tool", "app", "platform", or "product"

Do NOT activate for:

• Landing pages, hero sections, marketing copy
• Purely backend or API work
• Data science, notebooks, or ML tasks

---

Before Writing Code

State your design choices first. This keeps thinking deliberate.

Direction: [what this should feel like]
Depth: [borders / subtle shadows / layered]
Spacing: [base unit]
Confidence: [high / medium / low]

Then write the code.

---

Design Principles

Spacing

Pick a base unit and stick to multiples. Consistency matters more than the specific number. Random values signal no system.

Common bases:

• 4px — Dense, technical (Linear, Raycast)
• 8px — Balanced (most SaaS)
• 10px — Roomy (consumer apps)

Padding

Keep it symmetrical. If one side is 16px, others should match unless there's a clear reason.

Depth

Choose ONE approach and commit:

• Borders-only — Clean, technical. For dense tools.
• Subtle shadows — Soft lift. For approachable products.
• Layered shadows — Premium, dimensional. For cards that need presence.

Don't mix approaches.

Border Radius

Sharper feels technical. Rounder feels friendly. Pick a scale and apply consistently.

Typography

Headlines need weight and tight tracking. Body needs readability. Data needs monospace. Build a hierarchy.

Color

Gray builds structure. Color communicates meaning — status, action, emphasis. Decorative color is noise.

Animation

Fast micro-interactions (~150ms), smooth easing. No bouncy/spring effects.

Recommended easing:

--ease-out: cubic-bezier(0.25, 1, 0.5, 1);

Controls

Native <select> and <input type="date"> can't be styled. Build custom components.

---

Confidence Scores

When extracting or suggesting design tokens, include confidence scores:

| Category | Typical Accuracy | |----------|-----------------| | Spacing patterns | 75-80% | | Typography scale | 80-85% | | Color structure | 85-90% | | Content strategy | 90-95% | | Font family ID | ~60% |

Be transparent about uncertainty. Report ranges over false precision.

---

Avoid

• Dramatic drop shadows
• Large radius on small elements
• Pure white cards on colored backgrounds
• Thick decorative borders
• Excessive spacing (>48px margins)
• Gradients for decoration
• Multiple accent colors
• Bounce/spring/elastic animations

---

Self-Check

Before finishing:

• Did I think about what this product needs, or default?
• Is my depth strategy consistent throughout?
• Does every element feel intentional?
• Did I include confidence scores where appropriate?

The standard: looks designed by someone who obsesses over details.

---

After Completing a Task

When you finish building something, always offer to save:

"Want me to save these patterns for future sessions?"

If yes, write to .frontforge/system.md:

• Direction and feel
• Depth strategy (borders/shadows/layered)
• Spacing base unit
• Key component patterns with specific values
• Confidence scores for extracted patterns

This compounds — each save makes future work faster and more consistent.

---

Workflow

Communication

Be invisible. Don't announce modes or narrate process.

Never say: "I'm in ESTABLISH MODE", "Let me check system.md..."

Instead: Jump into work. State suggestions with reasoning.

Suggest + Ask

Lead with your recommendation, then confirm:

"This feels like a data-heavy admin tool — I'd go minimal.
Tight spacing, monochrome, borders for depth.
Confidence: high (based on project context)"

[AskUserQuestion: "Does that direction feel right?"]

If Project Has system.md

Read .frontforge/system.md and apply. Decisions are made.

If No system.md

1. Assess context — What's the product? Who uses it?
2. Run context detection if available
3. Suggest direction with confidence level and reasoning
4. Get confirmation, then build
5. Offer to save

---

Export Formats

Generate design tokens in multiple formats:

# CSS Custom Properties
node hooks/generate-tokens.js . css

# JavaScript/TypeScript
node hooks/generate-tokens.js . js

# Tailwind Config
node hooks/generate-tokens.js . tailwind

# Figma Tokens (tokens.studio compatible)
node hooks/generate-tokens.js . figma

# JSON (raw data)
node hooks/generate-tokens.js . json

---

Specialized Agents

| Agent | Use for | |-------|---------| | agents/ux-interpreter.md | Extract design system from live websites | | agents/component-architect.md | Design scalable, accessible components | | agents/animation-specialist.md | Purposeful micro-interactions | | agents/responsive-expert.md | Mobile-first layouts across all viewports | | agents/ux-researcher.md | Personas, flows, evidence-based UX | | agents/token-architect.md | Token naming, color scales, semantic aliases |

Deep Dives

For more detail on specific topics:

• references/principles.md — Code examples, specific values, dark mode
• references/directions.md — The 6 design personalities
• references/colors.md — Color system, scales, dark mode, contrast
• references/validation.md — Memory management, when to update system.md
• references/devices.md — Breakpoints, touch vs mouse, viewport handling
• references/styles.md — Component patterns, buttons, inputs, cards, navigation
• references/interactions.md — Hover, focus, loading states, feedback, animations
• references/responsive.md — Mobile-first patterns, layout strategies, adaptations

Commands

• /claude-frontforge:init — Initialize design system
• /claude-frontforge:component <name> — Build a UI component with variants, states, and tokens
• /claude-frontforge:status — Current system state
• /claude-frontforge:audit [--fix] — Check code against system (optionally auto-fix safe violations)
• /claude-frontforge:extract — Extract patterns from code
• /claude-frontforge:generate-tokens — Generate token files
• /claude-frontforge:analyze-website — Extract tokens from live websites
• /claude-frontforge:metrics — Health dashboard
• /claude-frontforge:setup-statusline — Configure status display