frontend-craftlisted

# Frontend Craft — distinctive UI by default The default output of an AI frontend is generic: Inter font, a default-blue palette, no motion, flat white background, predictable layout. **That is the failure mode this skill exists to prevent.** Build UIs that look intentional, committed, and made by someone with taste — while staying accessible. Match the product's character; don't apply one house style to everything. ## Fits in the pipeline - **Stage 6** (`/build`), frontend track. Runs with `frontend-engineer`. - Accessibility is part of "done" — pair with `accessibility-wcag` (checked at Stage 7/8). - Any visual change re-enters the pipeline at Stage 9 like everything else. ## Aesthetic doctrine (apply this verbatim as guidance) > **Typography:** Choose distinctive, characterful typefaces. Do NOT default to Inter, Roboto, > Arial, or the system font stack. Do NOT reflexively converge on Space Grotesk either — that > has become its own cliché. Pick a typeface (or a deliberate display/body pairing) that fits > the product's voice, and commit to it. > > **Color:** Build a cohesive, committed color theme via CSS variables — a real palette with a > point of view, not a default and a gray. Define semantic tokens (surface, accent, muted, etc.) > and use them consistently. Vary light vs dark per context — don't ship the same theme everywhere. > > **Motion:** Use purposeful motion. Staggered page-load reveals so content arrives with rhythm > instead of popping in flat. In React,