frontend

frontend is an open-source frontend skill for Claude Code and compatible agents, published by code-yeongyu. Its author describes it as: “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 referenc…”. The project has 68k stars on GitHub and ships custom license terms, so review them before reuse. Add it to your setup with `git clone https://github.com/code-yeongyu/oh-my-openagent ~/.claude/skills/frontend`.

What frontend does

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.

Installation

Add frontend to your agent with:

git clone https://github.com/code-yeongyu/oh-my-openagent ~/.claude/skills/frontend

Always review a skill's source before installing it. This command comes from the skill's public repository; the linked repo is the source of truth for exact setup steps.

What's inside

The SKILL.md for frontend is organised into these sections:

• 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

When to use it

Reach for frontend when you want frontend help from your agent without writing the same instructions every session. Load the skill and the agent picks it up automatically for relevant tasks.

Strengths

• Ships in code-yeongyu/oh-my-openagent, an established project with 67,982 GitHub stars
• Actively maintained (recent commits)

Things to check

• No license declared — confirm terms with the author before reuse

Topics

Frequently asked questions

What does frontend 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, premium, luxury, minimal, brutalist, Awwwards, DESIGN.md, mockup, React, Lighthouse, accessibility, WCAG, Core Web Vitals, looks generic, make it pretty, like X brand, lazyweb, design research.

How do I install frontend?

Run git clone https://github.com/code-yeongyu/oh-my-openagent ~/.claude/skills/frontend in your agent, then reload your skills. Review the source at https://github.com/code-yeongyu/oh-my-openagent before installing.

Is frontend free to use?

frontend is publicly available on GitHub, but code-yeongyu has not declared a standard open-source license (Other). Confirm the terms with the author before reusing it.

Where does frontend come from?

frontend ships inside code-yeongyu/oh-my-openagent, a repository that contains 46 catalogued skills in total. The repository's 67,982 GitHub stars apply to that whole collection, not to this skill on its own.