Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Frontend Design Router

A router skill that dispatches any frontend UI/UX task across four rulesets — design taste, Lighthouse perfection, a UI/UX database, and design ops — to prevent generic AI-looking interfaces.

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

What it does

This skill is a router, not a rulebook. On any frontend request it loads the smallest set of reference files that covers the job, states what it loaded, and then executes under that guidance.

  • design ruleset — enforces a Design System Gate (DESIGN.md must exist before any component) plus React dev tooling; 12 taste skills (minimal, brutalist, premium/soft, Awwwards-tier, redesign, image-to-code, interaction) and 70 brand systems (Stripe, Linear, Notion, Vercel, Apple, Figma…).
  • perfection ruleset — Lighthouse 100 in every category, measured on real Playwright Chromium, fixed at the architecture level; never by dropping animation or hiding content.
  • ui-ux-db ruleset — searchable CSV + CLI for palettes, font pairings, chart types, landing structures, per-stack best practices.
  • designpowers ruleset — personas, accessibility constraints, critique review, accepted design debt, handoff.

Shared axioms: no emojis as icons, GPU-composited animation only, no meaningless "slop" motion, and nothing is done until /visual-qa passes at 375/768/1280px.

Who it's for

  • Developers tired of flat, interchangeable AI-generated UI
  • Anyone building landing pages or dashboards in a specific brand voice
  • Frontend engineers who must hit Core Web Vitals and WCAG at the same time
  • Leads standardizing a DESIGN.md contract across a codebase

Examples

  1. "Premium SaaS hero like Stripe" → loads stripe.md + soft-skill.md + perfection/README.md, extracts tokens into DESIGN.md, then builds reusable primitives.
  2. "Build this screenshot exactly" → image-to-code-skill.md treats the image as a contract (tokens, spacing, states, responsive intent) and verifies with /visual-qa reference-fidelity mode.
  3. "Audit my site's performance" → production build, Playwright Lighthouse across mobile and desktop presets, 3–5 runs, median, root-cause diagnosis from the JSON report.

· · · Install guide · · ·

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/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 /tmp/oh-my-openagent && mkdir -p ~/.claude/skills && cp -r /tmp/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.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git /tmp/oh-my-openagent
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy the whole skill folder, references included: cp -r /tmp/oh-my-openagent/packages/skills-loader-core/src/features/builtin-skills/frontend ~/.claude/skills/frontend
  5. Confirm references/ and scripts/ came along — without them the router has nothing to route to.
  6. For performance audits, install uv (or Python 3), Playwright, and playwright-lighthouse.
  7. Restart Claude Code and try prompts like "build a landing page" or "audit this page's Lighthouse score".
View source on GitHub ↗License: NOASSERTION