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

Coexistence With Other Design/UX Skills

Some projects have more than one design/UX skill installed (a marketing-focused one, a different team's internal skill, etc.). If another such skill's instructions are already loaded or clearly more specific to the current request (e.g. a landing page, which is explicitly out of scope here), defer to it instead of both skills producing overlapping or contradictory guidance in the same turn. Don't print this skill's activation banner or re-run its setup flow on top of another skill that already has.

If the project's post-write validation hook (hooks/validate-frontforge.js) appears to be duplicating or conflicting with another tool's own hook/lint output on the same files, don't try to out-shout it — point the user at /claude-frontforge:hooks off or the narrower ignore-rule/ignore-file options (see docs/COEXISTENCE.md) so they can choose which tool owns that feedback, rather than leaving both firing on every write.

---

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

Full catalog of AI-tell patterns (absolute bans + product-specific tells): references/anti-patterns.md — read it before shipping any dashboard, settings page, or data surface. It's the negative space of the principles above: specific, named patterns to match-and-refuse (side-stripe borders, gradient text, hero-metric stat cards, identical card grids, spinner-in-content, modal-as-first-idea) plus a two-tier "would a Linear/Notion/Raycast user trust this" self-check.

---

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

No Clear Command Match

When the user's request doesn't map to a specific slash command (they just describe what they want, or ask "what should I do here?"), run node ${CLAUDE_PLUGIN_ROOT}/hooks/recommend-next.js once and lead with its top 1-2 recommendations plus a one-line reason each, before falling back to the full command list in the Commands section below. Never auto-run the recommended command — it's a suggestion the user confirms.

---

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/anti-patterns.md — AI-tell catalog: absolute bans and product-specific tells
• references/critique.md — Full UX heuristic rubric behind /critique
• references/live.md — Scope/rationale behind /live's browser-iteration loop
• 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

Build

• /claude-frontforge:init — Initialize design system
• /claude-frontforge:component <name> — Build a UI component with variants, states, and tokens
• /claude-frontforge:extract — Extract patterns from code
• /claude-frontforge:generate-tokens — Generate token files
• /claude-frontforge:analyze-website — Extract tokens from live websites

Evaluate

• /claude-frontforge:critique <path> — UX heuristic score + prioritized punch list (absolute quality, not just consistency)
• /claude-frontforge:audit [--fix] — Check code against your own system.md (consistency, optionally auto-fix safe violations)

Refine

• /claude-frontforge:polish <path> — Ship-readiness pass: works through a critique's P0/P1 backlog
• /claude-frontforge:colorize <path> — Add strategic, semantic color to a monochrome/flat UI
• /claude-frontforge:layout <path> — Fix spacing rhythm and visual hierarchy

Iterate

• /claude-frontforge:live — Visual iteration in a running browser via claude-in-chrome

System

• /claude-frontforge:status — Current system state + recommended next command
• /claude-frontforge:metrics — Health dashboard
• /claude-frontforge:setup-statusline — Configure status display
• /claude-frontforge:hooks <on|off|status|quiet|ignore-rule|ignore-file|reset> — Manage the post-write validation hook