Frontend

This file is a router, not a rulebook. The rules live in three rulesets under references/; your first job is to load the smallest set of files that covers the request, state which you loaded in one sentence, then execute under their guidance. Loading nothing and freestyling produces the generic AI-slop output this skill exists to prevent; loading everything wastes context and creates contradictory instructions.

Phase 0 — Route (before any UI work)

For implementation work, design + perfection load together. A page that hits Lighthouse 100 but looks like AI slop has failed; a page that looks beautiful but ships a 2 MB bundle has failed. Both win or neither does.

Ruleset 1 — design (references/design/)

The reference library has one architecture file, 12 taste skills (Layer A — how to execute), and 69 brand design systems (Layer B — what it should look like). Most non-trivial tasks load one Layer A + one Layer B. README.md carries the full routing flow, stacking rules, anti-patterns, and the mandatory browser-based Design QA phase; _INDEX.md catalogs all 81 files with mood-to-brand mappings — read it whenever routing is not obvious from the tables below.

Layer 0 — architecture

Layer A — taste skills (pick AT MOST ONE style skill; they encode opposing philosophies)

Layer B — brand design systems (orthogonal to Layer A; stack freely)

When the user names a brand or site — "Linear-style", "like Stripe's landing" — load references/design/<brand>.md as the token source of truth (palette, type scale, components, do/don'ts). Coverage includes apple stripe linear.app notion vercel claude figma airbnb nike tesla spotify raycast revolut and ~56 more; the full list with mood shortcuts is in _INDEX.md. Extract the tokens and apply them to the project's own content — never copy logos or trademarked imagery. If the named brand is missing, fall back to a Layer A mood match or the open-design skill.

React dev tooling

Ruleset 2 — perfection (references/perfection/)

Audit CLI (build for production first; never measure a dev server):

uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000

Run mobile AND desktop presets, 3–5 runs, take the median, diagnose from the JSON report.

Ruleset 3 — ui-ux-db (references/ui-ux-db/)

README.md documents the search CLI and the master-plus-overrides persistence pattern. The CLI (run from the ruleset directory so it finds data/):

python3 $SKILL_DIR/references/ui-ux-db/scripts/search.py "<query>" --design-system -p "Project"   # full design-system generation
python3 $SKILL_DIR/references/ui-ux-db/scripts/search.py "<query>" --domain <domain>             # targeted lookup
python3 $SKILL_DIR/references/ui-ux-db/scripts/search.py "<query>" --stack <stack>               # stack best practices

Domains: product style typography color landing chart ux react web prompt. Stacks: html-tailwind (default) react nextjs vue svelte astro swiftui react-native flutter shadcn jetpack-compose.

Quick routes — most common requests

Shared axioms (all three rulesets agree — apply always)

• No design system = no UI work. DESIGN.md exists before components do; every color, font size, and spacing value traces back to a token in it.
• Never weaken UX to buy points. No dropping animations, hiding content, or simplifying interactions for a score or a deadline.
• No emojis as icons. SVG icon sets only (Lucide, Heroicons, Radix, Phosphor).
• GPU-composited animation only — transform, opacity, filter; never animate layout properties.
• Verify in a real browser before declaring done. Screenshots at 375 / 768 / 1280px; hover, focus, loading, empty, and error states all exercised.

When to load something else instead

Activation

Use for any frontend, web UI, UX, visual, design, styling, layout, animation, performance, accessibility, or SEO work — building, redesigning, auditing, or generating mockups. Not for backend, CLI, or pure-logic tasks with no visual surface.