If you want the best Claude Code skills for frontend, start with this shortlist, chosen on install count, maintainer, license, audit status and fit: Anthropic's frontend-design, Vercel's React best practices and composition patterns, the official shadcn skill, Addy Osmani's frontend-ui-engineering, accessibility and Core Web Vitals skills, and the Next.js team's next-dev-loop. Pick by the job: visual direction, React code, component libraries, or checking that the page works for every user.
How were these skills chosen?
This is a shortlist, not a ranking. Every skill below has its own page on Kipt, where we read its SKILL.md, file list and license. If skills are new to you, start with what Agent Skills are. We then checked each one against five criteria on 24 October 2026:
- Install count. The number on the skill's skills.sh page. skills.sh says its leaderboard "ranks skills based on anonymous telemetry data collected from the skills CLI," so the count is a popularity signal. It does not include plugin installs or folders copied by hand.
- Maintainer. Official skills from the framework's own team (Vercel, Next.js, shadcn/ui, Anthropic) or a named, well-known individual.
- License. An open license that lets you use, copy and change the skill. Where a repo states its license only in the README, we say so.
- Audit status. skills.sh shows results from three scanners: Gen Agent Trust Hub, Socket and Snyk. We report any Warn with the scanner's own reason. skills.sh notes that it "cannot guarantee the quality or security of every skill listed," so read a skill before you install it.
- Fit. Each pick covers a different frontend job. We left out near-duplicates.
Install counts are labeled "(snapshot, 24 October 2026)" because they change daily. Design-first skills such as UI UX Pro Max and Impeccable are in the companion list of best UI design skills.
How do the top frontend skills compare?
| Skill | Good for | Maintainer | Installs (snapshot, 24 October 2026) | License | Audits |
|---|---|---|---|---|---|
| frontend-design | Visual direction for new UI | Anthropic | 1.0M | Apache 2.0 | 3 Pass |
| vercel-react-best-practices | React and Next.js performance | Vercel | 834.7K | MIT (per README) | 3 Pass |
| vercel-composition-patterns | Component architecture | Vercel | 415.4K | MIT (per README) | 3 Pass |
| shadcn | shadcn/ui projects | shadcn/ui | 121.4K | MIT | 2 Pass, Socket Warn |
| frontend-ui-engineering | Production UI habits | Addy Osmani | 66.2K | MIT | 3 Pass |
| accessibility | WCAG 2.2 audits and fixes | Addy Osmani | 63.7K | MIT | 3 Pass |
| core-web-vitals | LCP, INP and CLS fixes | Addy Osmani | 31.8K | MIT | 3 Pass |
| next-dev-loop | Checking Next.js changes in the running app | Vercel (Next.js team) | 21.9K | MIT | 3 Pass |
What does each frontend skill do, and who is it for?
frontend-design
Pushes Claude to choose a visual direction that fits your product and plan palette and type before it writes code, instead of producing the same generic interface every time.
- Suits: anyone asking Claude to build a landing page, dashboard or new screen from scratch.
- Installs: 1.0M (snapshot, 24 October 2026). License: Apache 2.0. Audits: Pass from all three.
- Note: Anthropic's skills repo calls its examples "provided for demonstration and educational purposes only," so test it on your own work.
- Kipt page: frontend-design skill
vercel-react-best-practices
Gives the agent Vercel Engineering's 70 performance rules for React and Next.js in 8 categories, each with a wrong and a right example, so it catches waterfalls, heavy bundles and wasted re-renders.
- Suits: teams that write or review React code with an agent.
- Installs: 834.7K (snapshot, 24 October 2026). License: MIT, stated in the README and SKILL.md (the repo has no LICENSE file). Audits: Pass from all three.
- Kipt page: React best practices skill
vercel-composition-patterns
Teaches the agent to build components from small composable parts (compound components, providers, explicit variants) instead of one component with a growing list of boolean props. It includes React 19 API changes.
- Suits: developers building a component library or shared UI.
- Installs: 415.4K (snapshot, 24 October 2026). License: MIT, per the README and SKILL.md. Audits: Pass from all three.
- Kipt page: composition patterns skill
shadcn
The official shadcn/ui skill gives the agent your project's real shadcn/ui setup and rules for adding, composing and styling components the intended way.
- Suits: React apps that already use shadcn/ui, or a
components.jsonfile. - Installs: 121.4K (snapshot, 24 October 2026). License: MIT. Audits: Pass from Gen Agent Trust Hub and Snyk, Warn from Socket. Socket's 15 October 2026 audit flags one low-severity anomaly: the skill runs
shadcn@latestwhen it loads and can install third-party registry code, which Socket says raises medium supply-chain risk. Its summary also says "it is not malware." - Kipt page: shadcn skill
frontend-ui-engineering
Tells the agent to follow your design system, make components keyboard and screen reader accessible, cover loading, empty and error states, and check fixed screen widths.
- Suits: developers who want agent-built UI to fit an existing product.
- Installs: 66.2K (snapshot, 24 October 2026). License: MIT. Audits: Pass from all three.
- Note: a single-skill install skips the repo-level
references/folder, so the shared accessibility checklist is missing unless you add it. - Kipt page: frontend-ui-engineering skill
accessibility
Audits a page against WCAG 2.2 and fixes what it finds: missing labels, low contrast, keyboard traps, invisible focus, small tap targets and misused ARIA.
- Suits: front-end developers who want accessibility checked during normal work.
- Installs: 63.7K (snapshot, 24 October 2026). License: MIT. Audits: Pass from all three.
- Kipt page: accessibility skill
core-web-vitals
Fixes LCP, INP and CLS the measured way: field data first, then a browser trace, then a change aimed only at the failing metric, then a re-measure.
- Suits: sites with real traffic and a Core Web Vitals problem to solve.
- Installs: 31.8K (snapshot, 24 October 2026). License: MIT. Audits: Pass from all three.
- Kipt page: Core Web Vitals skill
next-dev-loop
Makes the agent prove a Next.js change works in the running app after each edit, using the dev server's own view and a real browser through the agent-browser CLI.
- Suits: Next.js developers tired of "it compiles" being reported as "it works."
- Installs: 21.9K (snapshot, 24 October 2026). License: MIT. Audits: Pass from all three. It lives in the vercel/next.js repo, so it stays matched to the framework.
- Kipt page: next-dev-loop skill
How do you install a frontend skill in Claude Code?
Each skill's skills.sh page lists an install command for the open source skills CLI. For example:
npx skills add https://github.com/anthropics/skills --skill frontend-design
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
The CLI docs list -a to target specific agents, such as -a claude-code, and -g to install to your user directory instead of the current project. Claude Code reads personal skills from ~/.claude/skills/ and project skills from .claude/skills/, as the Claude Code skills docs explain. Claude loads a skill on its own when your request matches its description, or you can call it by name.
The same folders work in other agents. See Codex skills and Cursor skills for their paths.
Which frontend skills work well together?
Several of these skills cover different stages of the same task, so they pair well:
- Build, then check. Use frontend-design or frontend-ui-engineering to build, then accessibility and core-web-vitals to audit the result.
- React stack. vercel-react-best-practices handles performance; vercel-composition-patterns handles structure. They come from the same repo and don't overlap much.
- shadcn/ui apps. Add the shadcn skill so the agent uses your registry and tokens instead of hand-written markup.
- Next.js apps. next-dev-loop verifies each edit in the browser. For broader browser testing, see the best testing skills.
Keep the set small. The Claude Code docs say that "skill descriptions are loaded into context so Claude knows what's available," so every extra skill costs some context, and overlapping skills can pull in different directions. Install for the work in front of you and remove what you stop using.
Where should you keep the frontend skills you choose?
Once you settle on a set, it helps to keep it in one place. Kipt stores your prompts and Agent Skills as Markdown in a private GitHub repo you own. You can import a skill from a GitHub link, a folder or a .zip, then install your whole library into Claude Code or Codex with one command: npx skills add https://github.com/<you>/<repo>.git --all -g. Check each skill's license before you copy it; every skill on this list uses MIT or Apache 2.0.
For more options beyond frontend, see the best Claude Code skills overview and the Claude Code for frontend guide.