Frontend Design Router

A router skill that loads the right design, performance, and design-system rulesets so UI work ships at senior-designer quality instead of AI slop.

Design & UIAdvanced★ 67,531⑂ 5,507AI score 8/10Last updated: Aug 9, 2026

What it does

This SKILL.md is deliberately a router, not a rulebook. For any frontend/UI/UX request it loads the smallest useful set of files from references/ and works under their guidance:

design — 12 taste skills (minimalist, brutalist, soft/premium, redesign, image-to-code, interaction, imagegen) plus 70 brand design systems (Stripe, Linear, Notion, Vercel, Apple, Raycast…). 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 + CLI for palettes, font pairings, chart types, landing structures, and stack best practices.
designpowers — personas, accessibility/cognitive constraints, flatness critique, design debt, handoff, synthetic user testing.

Screenshots and URLs are treated as binding contracts: runtime styles are extracted via getComputedStyle, rebuilt as reusable primitives, then verified through /visual-qa at 375/768/1280px.

Who it's for

Anyone tired of correct-but-flat AI-generated interfaces
Solo devs and startups needing on-brand landing pages or dashboards fast
Frontend engineers held to both visual craft and Core Web Vitals
Teams that want a real DESIGN.md contract and handoff discipline

Example uses

"Premium SaaS hero like Stripe" → loads stripe.md + soft-skill.md + perfection/README.md, distills tokens into DESIGN.md, ships a primitive showcase before product screens.
"This dashboard looks bad — fix it" → redesign-skill.md audit-first pass, retokenize, add motion only where it maps to a real state change, then dual-oracle visual QA.
"Build this screenshot exactly" → image-to-code-skill.md extracts geometry, copy, states and responsive intent, implements extensible primitives, and QAs in reference-fidelity mode.
"What palette and fonts suit a wellness brand?" → one-line lookup through the ui-ux-db search CLI.

· · · Install guide · · ·

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

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

Install with a command instead

git clone https://github.com/code-yeongyu/oh-my-openagent.git && mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/frontend ~/.claude/skills/frontend

⚠ This is a third-party skill. Check the source repository before installing.

Open a terminal and move to a working directory.
Clone the repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
Create the skills folder: mkdir -p ~/.claude/skills
Copy the whole skill directory (the reference library and scripts are required): cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/frontend ~/.claude/skills/frontend
Verify with ls ~/.claude/skills/frontend that SKILL.md and references/ came along.
For the audit workflow, install Node/npm with Playwright and uv (Python runner) beforehand.
Restart Claude Code and try a prompt like "design a landing page" or "audit this page's Lighthouse scores" to confirm the skill triggers.

View source on GitHub ↗License: NOASSERTION