Frontend Design Router

A master frontend skill that routes UI/UX requests to taste rulesets, 70 brand design systems and real-browser performance audits so output doesn't look like generic AI slop.

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

What it does

Analyzes any frontend request and loads the smallest useful set of files from four rulesets: design, perfection, ui-ux-db and designpowers.
Enforces a Design System Gate: a DESIGN.md (tokens, typography, spacing, motion, accessibility constraints, accepted debt) must exist before components are written.
Combines 12 taste skills (minimal, brutalist, premium/soft, redesign, image-to-code…) with 70 brand design systems (Linear, Stripe, Notion, Vercel, Apple, Figma…).
Runs Lighthouse audits through real Playwright Chromium (never the CLI), targeting 100 in every category plus React render-budget checks.
Ships a CSV-backed search CLI for palettes, font pairings, chart types, landing-page structures and UX guidelines.

Who it's for

Anyone frustrated that AI-generated UI always looks flat and interchangeable.
Frontend engineers and indie builders shipping landing pages, dashboards and marketing sites.
Teams that need visual craft and Core Web Vitals handled together.

Examples

"Build a Linear-style landing page" → loads design/linear.app.md + a taste skill + perfection rules, writes DESIGN.md, then implements primitives.
"Implement this screenshot exactly" → image-to-code path extracts tokens, geometry, copy and states into DESIGN.md, then pixel-fidelity visual QA.
"Make this page faster" → production build, Playwright Lighthouse on mobile and desktop, 3–5 runs, median, root-cause fixes without flattening the UI.
"Add micro-interactions" → reads the nearest beui.dev pattern source and adapts it to the project's motion tokens.

· · · 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/skills-loader-core/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)

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/skills-loader-core/src/features/builtin-skills/frontend folder from the GitHub repo code-yeongyu/oh-my-openagent into my ~/.claude/skills/code-yeongyu-frontend-2/.
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/skills-loader-core/src/features/builtin-skills/frontend/* ~/.claude/skills/frontend/

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

Open a terminal.
Clone the repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
Create the skill folder: mkdir -p ~/.claude/skills/frontend
Copy the skill and its references: cp -r oh-my-openagent/packages/skills-loader-core/src/features/builtin-skills/frontend/* ~/.claude/skills/frontend/
Confirm both SKILL.md and the references/ directory are present — routing fails without the reference files.
For audits, install Node.js with Playwright (Chromium) and Python via uv beforehand.
Restart Claude Code, then ask for "UI design", "landing page", "Lighthouse audit" and the skill activates automatically.

View source on GitHub ↗License: NOASSERTION