frontend
MUST USE for frontend/web UI/UX/visual work: building, styling, redesigning pages/components, React setup, performance audits, visual QA, taste, and polish. Routes four rulesets: design taste router and brand references; perfection for Playwright/Chromium Lighthouse/Core Web Vitals; ui-ux-db palettes/fonts/guidelines; designpowers personas/accessibility/critique/handoff; plus curl-only lazyweb real-app-screen research and the beui.dev interaction catalog. Triggers: frontend, UI, UX, design, redesign, styling, layout, animation, motion, interaction, micro-interaction, make it feel alive, premiu
Profile →npx skills add code-yeongyu/oh-my-openagent --skill frontend --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Frontend This file is a router, not a rulebook. The rules live in four rulesets under `references/`; your first job is to load the smallest set of files that covers the request, state which you loaded in one sentence, then execute under their guidance. Loading nothing and freestyling produces the generic AI-slop output this skill exists to prevent; loading everything wastes context and creates contradictory instructions. **The bar is not clean-and-correct — it is work a senior designer at Linear, Stripe, or Supabase would ship.** Correct-but-flat is a failure, not a finish. Protect the surface as hard as you protect the build: design is a first-class deliverable, not a one-shot decision you lock and walk away from. ## Phase 0 — Route (before any UI work) | Request involves… | Read | |---|---| | ANY UI implementation, styling, redesign, mockup, or visual decision | `references/design/README.md` FIRST. It enforces two mandatory gates — the Design System Gate (a `DESIGN.md` must exist before any component is written) and the React Dev Tooling Gate (react-grab / react-scan / react-doctor installed by default) — then routes to the taste and brand references below. | | Interaction or m
- Phase 0 — Route (before any UI work)
- Design System and Component Workflow
- Ruleset 1 — design (references/design/)
- Layer 0 — architecture
- Layer B — brand design systems (orthogonal to Layer A; stack freely)
- React dev tooling
- Ruleset 2 — perfection (references/perfection/)
- Ruleset 3 — ui-ux-db (references/ui-ux-db/)
- Ruleset 4 — designpowers (references/designpowers/)
- Quick routes — most common requests
- Shared axioms (all four rulesets agree — apply always)
- When to load something else instead
- Activation
uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000 python3 $SKILL_DIR/references/ui-ux-db/scripts/search.py "<query>" --design-system -p "Project" # full design-system generation python3 $SKILL_DIR/references/ui-ux-db/scripts/search.py "<query>" --domain <domain> # targeted lookup python3 $SKILL_DIR/references/ui-ux-db/scripts/search.py "<query>" --stack <stack> # stack best practices
What does the frontend skill do?
MUST USE for frontend/web UI/UX/visual work: building, styling, redesigning pages/components, React setup, performance audits, visual QA, taste, and polish. Routes four rulesets: design taste router and brand references; perfection for Playwright/Chromium Lighthouse/Core Web Vitals; ui-ux-db palettes/fonts/guidelines; designpowers personas/accessibility/critique/handoff; plus curl-only lazyweb real-app-screen research and the beui.dev interaction catalog. Triggers: frontend, UI, UX, design, redesign, styling, layout, animation, motion, interaction, micro-interaction, make it feel alive, premiu
How do I install it?
Run `npx skills add code-yeongyu/oh-my-openagent --skill frontend --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From code-yeongyu/oh-my-openagent, a repository with 67,209 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.