Build UI interfaces with craft and consistency — dashboards, admin panels, SaaS apps, and tools. Includes component building, design system creation, token generation, UI auditing, and pattern extraction. Use when building or improving any app interface.
From claude-frontforgenpx claudepluginhub thiagoedson/claude-frontforge --plugin claude-frontforgeThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Calculates TAM/SAM/SOM using top-down, bottom-up, and value theory methodologies for market sizing, revenue estimation, and startup validation.
Build interface design with craft, consistency, and confidence.
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.
Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces.
Not for: Landing pages, marketing sites, campaigns. Redirect those to /frontend-design.
Auto-activate when the user asks to:
Do NOT activate for:
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.
Pick a base unit and stick to multiples. Consistency matters more than the specific number. Random values signal no system.
Common bases:
Keep it symmetrical. If one side is 16px, others should match unless there's a clear reason.
Choose ONE approach and commit:
Don't mix approaches.
Sharper feels technical. Rounder feels friendly. Pick a scale and apply consistently.
Headlines need weight and tight tracking. Body needs readability. Data needs monospace. Build a hierarchy.
Gray builds structure. Color communicates meaning — status, action, emphasis. Decorative color is noise.
Fast micro-interactions (~150ms), smooth easing. No bouncy/spring effects.
Recommended easing:
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
Native <select> and <input type="date"> can't be styled. Build custom components.
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.
Before finishing:
The standard: looks designed by someone who obsesses over details.
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:
This compounds — each save makes future work faster and more consistent.
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.
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?"]
Read .frontforge/system.md and apply. Decisions are made.
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
| 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 |
For more detail on specific topics:
references/principles.md — Code examples, specific values, dark modereferences/directions.md — The 6 design personalitiesreferences/colors.md — Color system, scales, dark mode, contrastreferences/validation.md — Memory management, when to update system.mdreferences/devices.md — Breakpoints, touch vs mouse, viewport handlingreferences/styles.md — Component patterns, buttons, inputs, cards, navigationreferences/interactions.md — Hover, focus, loading states, feedback, animationsreferences/responsive.md — Mobile-first patterns, layout strategies, adaptations/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