The Claude skills worth installing for design and front-end work

A skill is a folder of instructions with a SKILL.md file at the top: a name, a description of when to use it, then the rules and any reference files or scripts. Claude Code's documentation says the description is what helps Claude decide when to load a skill, and that a skill's body loads only when it's used, so a long reference costs little until it's needed (Claude Code docs, skills). Skills work in Claude Code, in the Claude app and on Claude.ai, and Anthropic's help centre lists them on the Free, Pro, Max, Ultra, Team and Enterprise plans, with code execution switched on (Claude Help Centre, using skills).

So a skill is text that changes how Claude approaches a task. The best ones are specific, opinionated and short enough to read in ten minutes.

Most roundups rank by stars or installs. I check six things, in this order:

1. Who wrote it, and is it their field? A typography skill from someone who writes about typography beats a "100 design rules" pack from an unknown account.
2. The licence. It decides whether you can edit the skill, put it in a company repo or share a changed copy. MIT and Apache 2.0 both allow that, with credit.
3. What it runs. Plain Markdown can only steer Claude. Scripts, hooks, binaries and network fetches can do more, so read them. Claude Code's docs warn that shell commands written into a skill run before Claude even sees it (Claude Code docs, skills).
4. The description. Claude Code truncates the description shown in the skill listing at 1,536 characters, and recommends keeping SKILL.md under 500 lines with detail moved into reference files (Claude Code docs, skills). A vague description loads at the wrong time; a giant SKILL.md eats context.
5. Rules with values. "Use good spacing" teaches nothing. "Outer radius equals inner radius plus padding" does. I look for rules Claude can apply and I can check.
6. One job. Two skills that both claim focus rings or easing curves will argue. Overlap is the most common reason a stack of skills gives worse output than one.

Anthropic's own help centre puts the safety rule plainly: install skills only from trusted sources, and review a skill's files, especially scripts and anything that connects to external networks, before you enable it (Claude Help Centre).

I checked every repository and licence below on 1 November 2026. Skills change often, so read the current README before you install.

Anthropic's frontend-design skill

Anthropic's public skills repository holds the skills it publishes, from document skills to creative and technical ones. Its frontend-design skill describes itself as guidance for distinctive, intentional visual design when building new UI or reshaping an existing one: aesthetic direction, typography and choices that don't read as templated defaults. Its folder carries an Apache 2.0 licence file.

Use it when you're starting a page and want a point of view rather than the default look. It sets direction; it won't audit your focus states. The repository README also says its skills are provided for demonstration and educational purposes, so test them in your own setup. The same repo has webapp-testing (Playwright tests for local web apps) and skill-creator, for writing your own skills.

Jakub Krehel's better-* skills

Jakub Krehel's skills repository is MIT-licensed and covers the topics he writes about on his site and in his magazine, Interfaces. The core set is better-interface (one ranked review across accessibility, layout, writing, typography, colour and UI polish), better-ui, better-typography, better-colors, better-accessibility (checked against WCAG 2.2), better-layout and better-writing. The README also lists user-invoked skills such as interface-review for a branch or pull request, build-design for building from a Figma file or image, and state-machine and variant for working through a component's states and versions.

It's the set I'd start with for product interfaces, and the one I built mine on. Each skill owns one domain, so they don't contradict each other.

Emil Kowalski's skills

Emil Kowalski's skills repository is MIT-licensed and, in his words, for designers and engineers who want to build better interfaces. His README says they're based on his years at Vercel and Linear, and that the main skill, emil-design-eng, is mostly about animation with some design advice. Around it sit animate, review-animations, improve-animations, find-animation-opportunities, remove-animations, animation-performance and animation-vocabulary, plus animate-expo for React Native, apple-design and mobile-native.

If motion is where your interface feels off, this is the most focused set I know, and the split between build, review, find and remove lets you ask for an audit without a rewrite.

Impeccable

Impeccable, by Paul Bakaus, is Apache 2.0 and calls itself a design vocabulary for coding agents. It gives Claude commands such as critique, audit, polish, bolder, quieter and harden, writes PRODUCT.md and DESIGN.md context files for your project, and includes a detector with 62 deterministic rules for common AI design tells. Its README says it works with Claude Code and many other agents, and that it is strongest on interfaces that already exist.

It is more than Markdown: the installer can add a design hook that scans files your agent edits, and the skill runs an engine binary. That's not a reason to avoid it, but it is a reason to read the installation notes first, as its own README asks you to do before live mode in an unfamiliar repo.

Vercel's agent skills

Vercel's agent-skills repository is MIT-licensed. For front-end work the relevant ones are web-design-guidelines, which reviews UI code against more than 100 rules on accessibility, performance and UX; react-best-practices, with performance rules for React and Next.js ranked by impact; and react-native-guidelines. One thing to know: the web-design-guidelines SKILL.md fetches its rules from a URL before each review, so its output can change when that file changes.

My jubayer-* skills

These are mine, so read this section with that in mind. The seven jubayer-* skills are built on Jakub Krehel's MIT-licensed better-* skills, renamed, edited and extended. They're free, MIT, and each LICENSE keeps his copyright beside mine. What I added: a reference file in each skill for right-to-left and bilingual interfaces (Arabic and English, Bangla and English), with logical properties and mirroring, Arabic and Bangla type, RTL icons and motion, lang and dir for screen readers and copy that translates.

• jubayer-interface runs the other six in a fixed order and returns one ranked list of fixes.
• jubayer-accessibility covers focus, keyboard, ARIA, forms and zoom, plus lang and dir for RTL.
• jubayer-layout, jubayer-typography, jubayer-colors, jubayer-writing and jubayer-ui each own one domain.

If your product is English only, the originals are the source and include extra skills mine don't. If you ship Arabic, Bangla or both directions, the added references are why mine exist.

• Starting a new page or landing page: frontend-design for direction, then a rules skill to check it.
• Reviewing a screen before launch: better-interface or jubayer-interface for one ranked list, or Impeccable's audit and critique.
• Accessibility only: better-accessibility or jubayer-accessibility, then test with a keyboard and a screen reader yourself. No skill replaces that.
• Motion that feels wrong: Emil Kowalski's review-animations, then animate for the fix.
• React performance: Vercel's react-best-practices.
• Arabic or bilingual interfaces: the jubayer-* skills, starting with jubayer-layout.

Don't install all of them at once: overlapping rules pull Claude in different directions, and you won't know which skill caused which change.

My step-by-step guide is how to install Claude skills. The short version, as on /claude-skills:

In the Claude app or on Claude.ai:

1. In Settings > Capabilities, under Code execution and file creation, switch on Run code in the cloud.
2. Open Settings > Customize > Skills, choose + Add, then Upload skill.
3. Drop the skill's zip on Upload a skill and choose Upload. After a security scan, the skill appears under Skills in Customize, where you can turn it on or off.

In Claude Code: unzip the skill into ~/.claude/skills/ for every project, or .claude/skills/ for one project. Then ask for the job in plain words, or type the skill's name as a command, such as /jubayer-ui.

Other repositories above offer their own installers, such as npx skills add or a plugin marketplace; read what each one changes.

• Trusting the output without looking. A skill makes Claude more consistent, not always right. Check the result in a browser, at 200% zoom and with a keyboard.
• Skills that disagree. Two motion skills with different easing rules give you whichever one loaded last.
• Editing nothing. The best skill is the one tuned to your design system. Change the token names and values to yours.
• Dropping the licence when you share. Keep the original LICENSE in any changed copy you pass on.

A project CLAUDE.md file is better for facts every task needs, such as your stack and folder layout. A design system with named tokens does more than any skill, because Claude reads the real values. For one-off work, a clear prompt with a screenshot is often enough. I use skills for rules that hold across projects. My notes on reviewing AI-generated UI code cover the checks I run after any of these.

What are the best Claude skills for UI design?

For most product work: Anthropic's frontend-design for visual direction, Jakub Krehel's better-* skills for interface rules, Emil Kowalski's skills for motion and Impeccable for critique. Pick one per job rather than all of them.

Are Claude skills free?

The ones on this list are free to download. Anthropic's frontend-design and Impeccable are Apache 2.0; the better-, Emil Kowalski's, Vercel's and my jubayer- skills are MIT. Using them still needs a Claude plan with skills and code execution.

Are Claude skills safe to install?

Markdown-only skills just steer Claude. Ones with scripts, hooks or network calls can do more, so read every file first, and install only from trusted sources.

Do Claude skills work in both Claude Code and Claude.ai?

Yes. The same folder works in both: Claude Code reads it from a skills folder, and the Claude app and Claude.ai take it as an uploaded zip in Settings > Customize > Skills.

Can I make my own Claude skill for design?

Yes. A skill is a folder with a SKILL.md: a name, a clear description of when to use it, then your rules. Anthropic's skill-creator skill helps you write and test one. Start by editing an existing MIT skill to match your design system.

I opened every repository, README and licence on 1 November 2026, and describe each skill only from its own page. Install counts and star rankings change daily, so I don't rank by them.

• Claude Code docs, skills, date read 1 November 2026: code.claude.com
• Claude Help Centre, using skills in Claude, date read 1 November 2026: support.claude.com
• Anthropic, skills repository and frontend-design licence, date read 1 November 2026: github.com/anthropics/skills
• Jakub Krehel, skills repository, MIT, date read 1 November 2026: github.com/jakubkrehel/skills
• Emil Kowalski, skills repository, MIT, date read 1 November 2026: github.com/emilkowalski/skills
• Paul Bakaus, Impeccable repository, Apache 2.0, date read 1 November 2026: github.com/pbakaus/impeccable
• Vercel, agent-skills repository, MIT, date read 1 November 2026: github.com/vercel-labs/agent-skills

If you want an interface designed and built to this standard, in English, Arabic or both, book a free 30 minute intro call. After it, you get a written scope and one fixed quote.