Frontend Design Router

What it does

This skill is a router, not a rulebook. It classifies the request, loads the smallest useful set of files under references/, states what it loaded, then executes under that guidance.

• design — 12 taste skills (Layer A: minimal, brutalist, soft/premium, Awwwards-tier, redesign, image-to-code…) combined with 70 brand design systems (Layer B: Linear, Stripe, Vercel, Notion, Apple, Raycast…). Enforces two hard gates: a DESIGN.md must exist before any component is written, and React projects get react-grab / react-scan / react-doctor.
• perfection — Lighthouse 100 in every category, measured on real Playwright Chromium (never the CLI), fixed at the architecture level; dropping animations or hiding content to buy points is forbidden.
• ui-ux-db — a searchable CSV database plus CLI for palettes, font pairings, chart types, landing-page structures, and keyword-driven design-system generation.
• designpowers — the operating layer: personas, accessibility and cognitive constraints, flatness critique, design debt, handoff, synthetic user testing.

It also defines clone-from-screenshot and clone-from-URL workflows, the beui.dev interaction catalog for motion work, and a curl-only lazyweb lane for researching how real shipped products look.

Who it's for

• Developers whose AI-generated UI always looks generic
• Solo builders and startup teams targeting Linear/Stripe/Supabase-grade surfaces
• Frontend engineers held to both visual polish and Core Web Vitals
• Teams that want a DESIGN.md contract locked in before code

Examples

1. "Build a Linear-style landing page" → loads design/README.md + linear.app.md + taste-skill.md + perfection/README.md, writes tokens/typography/motion into DESIGN.md, then builds reusable primitives before product screens.
2. "Audit my site / make this page faster" → builds for production, runs lighthouse-audit.py on mobile and desktop presets 3–5 times, takes the median, and for React also hunts unnecessary renders.
3. "Make it feel alive" → stacks interaction-skill.md on the current style skill, finds the nearest beui.dev pattern, reads its real source, and maps the mechanism onto DESIGN.md motion tokens with reduced-motion support.
4. "Implement this screenshot exactly" → image-to-code-skill.md extracts tokens, geometry, copy, and states into DESIGN.md, then /visual-qa runs reference-fidelity pixel comparison at 375/768/1280px.

Install the skill I found on Claude Skill Mart.
Copy the packages/shared-skills/skills/frontend folder from the GitHub repo code-yeongyu/oh-my-openagent into my ~/.claude/skills/code-yeongyu-frontend/.
When it's done, tell me in one line what this skill can do.