frontend-designlisted

# Design One skill, two routes: 1. **Design route** — manages project design specification (pages, user flows, design principles, components) in `.project/project.json → design`. Builds code from spec or generates a Claude Design brief. Modes: Capture, Brief, Build. 2. **Convert route** — converts visual input (sketch, wireframe, Figma/Canva, screenshot, URL, pasted image) into working code using project tokens. Modes: Sketch → high-fi, 1:1 copy, Inspiration. The router below classifies the argument and dispatches to the appropriate route reference file. Each route file is only loaded in sessions where it is needed. **Related skills:** `/frontend-tokens` · `/frontend-check` · `/core-setup` ## References - `../shared/DASHBOARD.md` — project.json schema and merge strategies - `../shared/DESIGN.md` — Anti-patterns, color, typography, motion, UX writing - `../shared/DEVINFO.md` — Session tracking, cross-skill handoff - `../shared/BACKLOG.md` — Backlog HTML+JSON format, read/write protocol - `../shared/CODEGEN.md` — Code-gen patterns (Build and Convert routes) - `../shared/FRONTEND-RULES.md` — React/TypeScript coding rules (Convert route) - `../shared/PATTERNS.md` — Component patterns (Convert route) - `../shared/PLAYWRIGHT.md` — Playwright CLI, screenshot capture (Convert route) - `./examples/` — Conversion examples (1:1, inspiration, Apple-style) - External: `vercel-labs/web-interface-guidelines` — setup-context for Convert route (see `references/route-convert.md § Step 0`