Top Claude Skills for UI/UX Engineers (2026 Guide)

What Claude skills are (and what they are not)

A skill is a folder with a SKILL.mdfile inside it. That file teaches Claude how to do one job well: design a layout, audit accessibility, or write performant React. The clever part is progressive disclosure. Claude only loads the skill's name and one-line description until your task actually matches it. So you can install thirty skills and pay almost no context cost until the moment one is needed.

People confuse skills with two neighbouring things, so it is worth being exact. Skills teach. MCP servers connect. Slash commands trigger. A skill is knowledge and procedure. An MCP server is a live connection to an external system: GitHub, a database, a browser, Figma. It gives Claude real data and actions. A slash command is a prompt template you fire manually. The only meaningful difference between a skill and a command is that a skill can switch itself on when its description matches your task; a command waits for you to type it. For UI work you will mostly want skills, sometimes backed by an MCP server (a Figma connection, say) when live data is involved.

How to install any of these (one pattern, not ten)

Every skill below installs the same way, so here is the pattern once. The modern route is plugin marketplaces. Inside Claude Code:

# Add the marketplace, then install the skill
/plugin marketplace add <github-owner/repo>
/plugin install <skill-name>

You can also install by hand. Clone or copy the skill folder into .claude/skills/ in your project for one repo, or ~/.claude/skills/ to make it available everywhere, then reload Claude Code. That is the whole mechanism. For the rest of this guide we focus on what each skill is good for, not on repeating install steps.

The 10 best Claude skills for UI/UX engineers

Ranked by a blend of trust (first-party beats anonymous), usefulness for real UI work, and how actively maintained the skill is in mid-2026. Star counts on monorepos are repo-wide, not per-skill, and we have flagged licensing honestly. "No SPDX license declared" means it is not formally open source, so treat it accordingly.

1. Anthropic frontend-design: the anti-"AI slop" skill

This is Anthropic's own skill, and it reads like a creative-director brief rather than a style guide. It pushes Claude to make deliberate, project-specific choices: a real palette, intentional typography, a considered layout, and one justified aesthetic risk, instead of the templated grey-card UI that AI tends to default to. Output targets React and Tailwind. If your complaint about AI-generated interfaces is that they all look the same, start here.

2. Vercel Web Design Guidelines: your automated UI reviewer

Where the Anthropic skill helps Claude create, this one helps it review. It audits UI code against 100+ web interface rules spanning accessibility, performance and UX, and triggers naturally on prompts like "review my UI" or "check this for accessibility". Think of it as a senior frontend reviewer that never gets tired. It pairs perfectly with skill #1: one for taste, one for correctness.

3. Vercel React Best Practices: performance, prioritised

Seventy React and Next.js performance rules across eight categories, ordered by impact, so Claude fixes the things that matter before the things that do not. It covers component structure, data fetching, re-render avoidance and bundle size. This is the skill that stops your AI-assisted app shipping with a 2 MB client bundle and a waterfall of unnecessary fetches.

4. shadcn/ui official skill: stop the hallucinated APIs

If you build on shadcn/ui, this one earns its place immediately. It gives Claude project-aware context about how to find, install, compose and customise shadcn components with the correct APIs, instead of inventing props that do not exist. It ships SKILL.md plus companion docs for the CLI, registry and customisation. MIT-licensed and maintained inside the main shadcn/ui repo, so trust is high.

5. Addy Osmani web-quality-skills: the Lighthouse bundle

From a well-known author on Google's Chrome team, this is a set of skills for web quality based on Lighthouse and Core Web Vitals, with dedicated skills for accessibility, performance, SEO, best practices, and an overall audit. If you care about measurable quality scores rather than vibes, this is the most credible community pick on the list. MIT-licensed and freshly maintained.

6. AccessLint Skills: accessibility you can actually defend

Most "accessibility" tooling is static linting. AccessLint goes further: it runs a live WCAG 2.2 audit against the rendered DOM by launching headless Chrome via the DevTools Protocol. It has two modes: Report (a prioritised audit, no edits) and Fix (audit, edit, then verify). If accessibility compliance is a contractual or legal requirement rather than a nice-to-have, this is the skill that produces evidence.

7. UI/UX Pro Max: broad design intelligence

One of the most-starred design skills in the ecosystem, this is a bundle of opinionated guidance across design systems, UI styling, brand, typography and even slides and banners. One honest caveat: its repository is structured around CLAUDE.md and skill.json with sub-skills, rather than the single canonical SKILL.md pattern, so confirm the exact structure suits your setup before you rely on it. Popularity is real; just go in with eyes open.

8. Bencium UX Designer: process, not just output

Two paired design personas, Innovative (bold, experimental) and Controlled (consistent, standards-led), enforce a design-thinking protocol. Instead of jumping straight to a screen, the skill makes Claude ask about purpose, users, tone and constraints first, then commits to a direction. Good for engineers who want a structured conversation rather than an instant, unexplained mock-up. Note the current home is the bencium-marketplace repo, which supersedes older single-skill repos you may find linked elsewhere.

9. secondsky claude-skills: current Tailwind v4 and motion

A production-ready collection covering React, Tailwind v4 and a dedicated motion/animation skill. The reason it matters: framework knowledge drifts. A skill built around Tailwind v4 keeps Claude from writing v3-era class patterns that no longer apply. If your stack is on the current Tailwind line, this keeps the generated code idiomatic.

10. freshtechbro claudedesignskills: animation and 3D

Twenty-plus skills aimed at motion-heavy and interactive interfaces: Three.js, GSAP, React Three Fiber and Framer Motion. It gives Claude real library knowledge such as timelines, variants and scroll-triggered effects rather than guesswork. It is slightly less recently updated than others here, so check the library versions against yours, but for animation work there is little else this comprehensive.

Worth watching (and what we left off)

A few skills nearly made the cut. Community-Access/accessibility-agents (MIT, ~300 stars) enforces WCAG 2.2 AA across Claude Code, Copilot and Claude Desktop, and is a strong option if you want cross-tool a11y enforcement. Figma-to-codeskills exist but are early. Most public ones have very few stars, and the most polished Figma to shadcn/ui workflow is a commercial product rather than an open SKILL.md, so verify the terms before you depend on it. We left these in the "watch" column rather than the top ten on grounds of maturity, not promise.

A word on security before you install anything

Skills are code. A SKILL.mdcan contain prompt-injection instructions, and any script a skill bundles runs with your agent's permissions. This is not hypothetical: Snyk's 2026 ToxicSkills research catalogued thousands of skills and found 36.8% had at least one security flaw and 13.4% had a critical-level issue. That means prompt injection, malware, or exposed secrets. Roughly one in six fetched untrusted external content, which is the classic injection vector.

How to actually use these together

You do not need all ten. The strongest, lowest-risk stack for most UI/UX engineers is four first-party skills working as a pipeline:

1. Anthropic frontend-design to generate something with taste.
2. shadcn/ui skill (if you use shadcn) so the components are real, not hallucinated.
3. Vercel Web Design Guidelines to review the result for accessibility and UX.
4. Vercel React Best Practices to harden it for performance before it ships.

Add AccessLint when compliance has to be evidenced, and the design-process skills (Bencium, UI/UX Pro Max) when you want Claude to think before it draws. That is the whole playbook: create, ground, review, harden.

The short version

Skills are the difference between an AI that produces plausible UI and one that produces UI you can ship. If you install nothing else today, install the three Anthropic and Vercel first-party skills for design quality, a review pass and performance. Read their SKILL.md files first, and build from there. The ecosystem moves fast; the principle does not. Constrain the model with good skills and you get fewer surprises and better interfaces.