Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Frontend Design Router (frontend)

A router skill that dispatches any UI/UX request to four rulesets — taste, brand design systems, performance, and design ops — so output looks like something a senior Linear/Stripe designer would ship.

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

What it does

  • Acts as a router, loading only the smallest set of reference files needed: 12 taste skills (minimal, brutalist, premium/soft, redesign, image-to-code…) and 70 brand design systems (Linear, Stripe, Vercel, Notion, Apple and more).
  • DESIGN.md gate: no component code until a DESIGN.md exists with tokens, typography, spacing, primitives, motion, accessibility constraints, and accepted debt.
  • Performance gate: Lighthouse audits run on real Playwright Chromium (never the CLI), targeting 100 in every category, with explicit bans on "cheating" by removing animations or hiding content.
  • Reference fidelity: for screenshots, mockups, or live URLs it extracts runtime truth via getComputedStyle, then verifies via /visual-qa at 375/768/1280px with interaction states driven.
  • Includes a searchable ui-ux-db CLI for palettes, font pairings, chart types, and landing structures per stack.

Who it's for

  • Developers who keep hearing "this looks generic / AI-made".
  • Solo builders and startup teams shipping landing pages and dashboards without a designer.
  • Frontend engineers who want visual craft, Core Web Vitals, and accessibility handled in one pass.

Examples

  1. "Build a Linear-style landing page" → loads design/README.md + linear.app.md + taste-skill.md + perfection/README.md, writes DESIGN.md, ships a primitive showcase, then the page.
  2. "This dashboard looks bad, fix it" → redesign-skill.md's audit-first workflow extracts existing tokens and upgrades the surface incrementally.
  3. "Audit my site and make it faster" → production build, then lighthouse-audit.py across mobile and desktop presets, 3–5 runs, median, architecture-level fixes.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/HEAD/packages/omo-opencode/src/features/builtin-skills/frontend/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. 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/frontend && 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.

  1. Open a terminal and cd into a working directory.
  2. Clone the repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  3. Create the skill folder: mkdir -p ~/.claude/skills/frontend
  4. Copy the whole skill, including references/ and scripts/: cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/frontend/* ~/.claude/skills/frontend/
  5. Install the supporting tools: Node.js with Playwright (Chromium), Python 3, and uv for the performance audit script.
  6. Restart Claude Code and try a request like "redesign my landing page" to confirm the skill activates.
  7. Verify the reference tree copied over with ls ~/.claude/skills/frontend/references — without those files the router cannot function.
View source on GitHub ↗License: NOASSERTION