frontend
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)
| Request involves… | Read |
|---|---|
| ANY UI implementation, styling, redesign, mockup, or visual decision | references/design/README.md FIRST. It enforces two mandatory gates — the Design System Gate (a DESIGN.md must exist before any component is written) and the React Dev Tooling Gate (react-grab / react-scan / react-doctor installed by default) — then routes to the taste and brand references below. |
| Writing or modifying frontend code, OR auditing performance / SEO / accessibility / quality | ALSO references/perfection/README.md. Lighthouse 100 in every category, measured on real Playwright Chromium (never the lighthouse CLI), achieved through architecture — never by dropping animations or hiding content. |
| Looking up a concrete style, color palette, font pairing, chart type, landing-page structure, or UX guideline — or generating a project design system from keywords | references/ui-ux-db/README.md. A searchable CSV database with a CLI; a lookup tool, not a posture. Load on demand; design stays the source of truth for taste and the DESIGN.md contract. |
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.