Overview
frontend is an open-source frontend skill for Claude Code and compatible agents, published by code-yeongyu. Its author describes it as: “Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.”. The project has 69k 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/`, and reading them is the work, not the preamble to it. Before touching any file, name the references the request routes to and the one reason each is needed, then read exactly those. Declaring the set first is what makes the choice reviewable: a reference you never named is one you decided to skip, and a reference you named but never opened is a gap you still owe. Freestyling past the routed set produces the generic AI-slop output this skill exists to prevent.
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
Installation
Add frontend to your agent with:
git clone https://github.com/code-yeongyu/oh-my-openagent ~/.claude/skills/frontendReview a skill’s source before installing it — skills can instruct your agent to run commands. This command comes from the skill’s public repository, which is the source of truth for setup steps. New to skills? Read how to install Claude Code skills.
Supported agents
- Codex — declared in the repository topics
- Cursor — declared in the repository topics
- OpenCode — declared in the repository topics
License
code-yeongyu has not declared a standard open-source license for this repository (Other). Confirm the terms with the author before reusing it.
Strengths
- Ships in code-yeongyu/oh-my-openagent, an established project with 69,248 GitHub stars
- Works with Codex, Cursor, OpenCode
- Actively maintained — repository updated in the last 30 days
- Its repository gained 2,357 GitHub stars over the last 52 days
Things to check
- No license declared — confirm terms with the author before reuse
Author
Topics
Alternatives to frontend
Similar skills from other repositories:
Frequently asked questions
- What does frontend do?
- Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.
- 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.
- Which agents does frontend work with?
- frontend lists Codex, Cursor, and OpenCode — named in its SKILL.md, its plugin marketplace or its repository topics. Skills use the portable SKILL.md format, so other agents that read that format may load it too.
- Where does frontend come from?
- frontend ships inside code-yeongyu/oh-my-openagent, a repository that contains 49 catalogued skills in total. The repository's 69,248 GitHub stars apply to that whole collection, not to this skill on its own.