llms: Skill for Claude Code

Frontend — Design, Build & Verify

Unified frontend skill for visual design, component creation, E2E testing, accessibility audits, and visual review. Composes five design dimensions with tech-specific implementations.

Usage

/frontend                        # Show dimensions, suggest next action
/frontend design                 # 6 design dimensions + 9-phase workflow
/frontend component <name>       # Create UI component with variants, tests, preview
/frontend e2e                    # Write Playwright E2E tests (page object model)
/frontend a11y                   # WCAG 2.1 AA accessibility audit
/frontend review                 # Gemini visual review (screenshot + code)
/frontend verify                 # Quick verification decision tree

Workflow

Step 1: Determine Mode

Parse $ARGUMENTS for explicit subcommand. If no arguments:

1. Check for recent frontend file changes (*.html, *.css, *.ts, *.tsx, *.jinja2, *.scss)
2. If changes found → suggest /frontend verify
3. If new project → suggest /frontend design
4. Otherwise → show all modes

Step 1.5: Load Design System

Before routing to any subcommand, check for a persistent design system file:

1. Look for .design/system.md in the project root (search from CWD upward, stop at git root)
2. If found: read it and announce → Design system loaded: [list the Mode + Typography + Color + Depth values]
3. Treat the loaded values as hard constraints throughout the session — do not contradict them without explicitly noting you're changing a decision and logging it

On /frontend design Phase 1 completion:

• Create .design/system.md if it does not exist (use the Design Brief output as seed)
• If it exists: update only the fields changed in this session; preserve existing Decisions Log entries
• Note: .design/system.md should be committed to version control (it is a project artifact)

After each design phase (typography, color, spatial, etc.):

• Update the corresponding section in .design/system.md with the decisions made