Claude Code frontend design skill
Short answer: the frontend design skill most people mean is frontend-design in Anthropic's anthropics/skills repo. Install it with npx skills add anthropics/skills --skill frontend-design --agent claude-code. It pushes Claude Code toward a clear visual direction in place of a default template look. Our database tags 5,380 open-license skills for frontend design, and the 4 below pair well with it.
Want picks for your own repo? Scan your project free. You see the match count and 2 picks. The full list is $9 once, up to 30 ranked picks for that scan.
5 frontend design skills
| Skill | Repo | License | What it covers | Install |
|---|---|---|---|---|
| frontend-design | anthropics/skills | Apache-2.0 | Distinct visual design for new or existing UI | npx skills add anthropics/skills --skill frontend-design --agent claude-code |
| anti-ui-slop | github/awesome-copilot | Apache-2.0 | Stops agents from shipping generic UI | npx skills add github/awesome-copilot --skill anti-ui-slop --agent claude-code |
| shadcn-ui | google-labs-code/stitch-skills | Apache-2.0 | Builds with shadcn/ui components | npx skills add google-labs-code/stitch-skills --skill shadcn-ui --agent claude-code |
| frontend-design-review | microsoft/skills | MIT | Reviews UI for design quality and design system fit | npx skills add microsoft/skills --skill frontend-design-review --agent claude-code |
| design-critique | anthropics/knowledge-work-plugins | Apache-2.0 | Feedback on usability, hierarchy and consistency | npx skills add anthropics/knowledge-work-plugins --skill design-critique --agent claude-code |
The npx skills command comes from the open skills CLI. The --agent claude-code flag puts the skill in .claude/skills/, where Claude Code looks for it. Swap the flag for cursor or codex to install the same SKILL.md for those agents.
How to use it
Ask Claude Code to build or restyle a page. When the task is UI work, Claude Code loads the skill on its own. Give it a direction in your prompt: the audience, the tone, a reference site. Then run a review skill such as frontend-design-review or design-critique on the result.
Match it to your stack
A design skill does not know your component library. Add a skill for it: shadcn-ui is in the table, and our Tailwind skills page lists more. For React and Next.js picks, see the React guide and the Next.js guide.
FAQ
Where does the frontend-design skill install?
With --agent claude-code it lands in .claude/skills/frontend-design/ in your repo. Add -g to install it for every project in your home folder.
Is the frontend design skill free? Yes. It is Apache-2.0 in the anthropics/skills repo. All 5 picks above are open license.
Does it work as a plugin? Claude Code plugins can bundle skills. You can install the skill alone with the command above.
Does it work in Cursor or Codex?
Yes. SKILL.md is a shared format. Change the --agent flag to cursor or codex.
Checked 2026-10-24. Prices and policies change. Confirm on the source before you buy.
Sources
- https://skillspicker.com/pricing/
- https://code.claude.com/docs/en/skills
- https://github.com/vercel-labs/skills
- https://skillspicker.com/skills/tailwind/
More guides
- Best Claude Code skills for Next.js: 3 free picks and how to install them (2026)
- Best Claude Code skills for Python: 6 free picks and how to install them (2026)
- Claude Code Playwright skill: 5 picks and how to install them (2026)
- Claude Code security skills: 5 free picks for security review and scans (2026)
- Claude Code skills for code review: 5 free picks with install commands (2026)
- Claude Code skills for React and React Native: 6 free picks (2026)