Frontend Design Router

A master frontend skill that routes UI, redesign, motion, and performance-audit requests into four specialized rulesets so the output ships at senior-designer quality.

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

What it does

Acts as a router: it reads your request (new build, redesign, add motion, audit perf/a11y) and loads only the smallest set of reference files that covers it.
Wires up four rulesets: design (12 taste skills + 70 brand design systems), perfection (Lighthouse 100 in every category, measured on real Playwright Chromium), ui-ux-db (searchable CLI for palettes, font pairings, chart types, landing structures), and designpowers (personas, accessibility, critique, design debt, handoff).
Enforces a DESIGN.md contract — tokens, typography, spacing, primitives, motion, responsive behavior, accessibility constraints, accepted debt — before any UI code is written, and closes with a /visual-qa gate at 375/768/1280px in a real browser.
Applies shared axioms: no emoji icons, GPU-composited animation only, no decorative "slop" motion, and correct-but-flat counts as a failure.

Who it's for

React/Next.js developers who want to escape generic "AI-looking" interfaces.
Teams that must reproduce a screenshot, Figma export, or a named brand style pixel-for-pixel.
Anyone held to Lighthouse 100, Core Web Vitals, and WCAG with real measured evidence.

Examples

"Build a Linear-style landing page" → loads design/linear.app.md + a taste skill + perfection rules, writes DESIGN.md, then implements reusable primitives.
"Make this dashboard feel alive" → stacks interaction-skill.md (beui.dev catalog) on the current style skill and builds motion from DESIGN.md tokens.
"My site is slow and fails accessibility" → runs the perfection ruleset plus the React perf tooling recipe: production build, mobile + desktop presets, 3–5 runs, median, root-cause 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/shared-skills/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/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.

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/shared-skills/skills/frontend ~/.claude/skills/frontend

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

Open a terminal and cd into 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 skill: cp -r oh-my-openagent/packages/shared-skills/skills/frontend ~/.claude/skills/frontend
Verify the references/ subfolders (design, perfection, ui-ux-db, designpowers) and scripts/ came along — without them the router has nothing to load.
For the audit features, install Python 3, uv, and Playwright with Chromium beforehand.
Restart Claude Code and try a frontend prompt like "design a landing page" to confirm the skill activates.

View source on GitHub ↗License: NOASSERTION