claude-frontforge

Copy any website's design system — give a URL and get back its colors, typography scale, spacing grid, shadows, and layout patterns with confidence scores. Outputs CSS variables, Tailwind config, or Figma tokens ready to use.

Find UI inconsistencies in your code — off-grid spacing, wrong depth strategy, out-of-palette colors, and component drift from established patterns. Reports violations with file and line numbers. Add --fix to auto-correct safe issues.

Show the Frontforge activation banner (full, compact, or status indicator). Displayed automatically by other commands — use directly to verify the skill is installed and active, or to show available commands and agents.

Build a UI component (Button, Card, Modal, Input, Table, Dropdown, etc.) with all variants, interactive states (hover, focus, disabled, loading), accessibility attributes, and design token references — consistent with the project's established design system.

Scan existing UI files to detect the spacing grid, radius scale, button and card patterns, and depth strategy already in use — then save everything to .frontforge/system.md. Ideal when inheriting or taking over an existing codebase.

Generate a design token file by scanning your codebase for spacing, color, shadow, and radius patterns. Outputs CSS custom properties, Tailwind config, JS/TS object, or Figma tokens (tokens.studio format).

Start building a UI or initialize the design system. Detects project context, suggests a design direction (Precision, Warmth, Boldness, Data, etc.), and establishes tokens and patterns for consistent development.

Show design system health metrics: spacing grid conformance %, color palette usage %, depth strategy consistency, and animation quality. Generates a 0-100 score with specific improvement suggestions.

Configure persistent status line showing real-time session metrics (model, cost, context, time, git branch, design system).

Display the active design system for this project: design direction, spacing base, depth strategy, color tokens, and saved component patterns. Use to check what's been established before building.

**Purpose**: Create purposeful micro-interactions that enhance UX without distraction or accessibility issues.

**Purpose**: Design and implement scalable, accessible UI components following established design system principles.

**Purpose**: Design mobile-first responsive layouts that work across all devices.

Design comprehensive, scalable token systems for UI products.

**Purpose**: Extract design systems from live websites through vision-based analysis, translating visual language into quantitative, build-ready design blueprints.

**Purpose**: Analyze user needs, create personas, and provide evidence-based UX recommendations to inform design decisions.

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.

1 hook across 1 event