A Claude Code skill is a folder with a SKILL.md file of instructions that Claude loads when a task matches its description, or when you call it with /skill-name. For frontend work, skills package design guidance (how to choose type, colour and layout deliberately) and workflows (how to test or review a page) so you don’t retype them in every prompt. The most widely used is Anthropic’s frontend-design, which installs from the official plugin marketplace.
How skills work, briefly
Per the Claude Code skills documentation, a skill’s description is always visible to Claude, but its body loads only when it’s used, so long guidance costs very little until it’s needed. Skills can live in three places:
- Personal:
~/.claude/skills/<name>/SKILL.md, available in all your projects. - Project:
.claude/skills/<name>/SKILL.md, committed and shared with the team. - Plugin: bundled in a plugin and invoked as
/plugin-name:skill-name.
Claude Code skills follow the open Agent Skills specification, so a well-written skill isn’t tied to one tool.
Frontend skills you can install today
These are real, published skills. We haven’t ranked them, because a ranking would need controlled testing we haven’t done. Read each one before installing: a skill is a set of instructions your agent will follow.
frontend-design (Anthropic)
Guidance for distinctive, intentional visual design. Its description says it helps with “aesthetic direction, typography, and making choices that don’t read as templated defaults.” Anthropic explains the thinking behind it in Improving frontend design through Skills. It’s available as a plugin in Anthropic’s official marketplace:
claude plugin install frontend-design@claude-plugins-officialInside a session, /plugin install frontend-design@claude-plugins-official opens the plugin’s details so you can review it and choose a scope first.
Anthropic’s example skills
The anthropics/skills repository includes several skills relevant to interface work, grouped in an example-skills plugin:
webapp-testing: testing local web apps with Playwright, including screenshots and browser logs.theme-factory: styling pages and documents with one of ten preset themes, or a new one.brand-guidelines: applies Anthropic’s own colours and typography. Useful as a pattern for encoding your brand in a skill.web-artifacts-builder: building multi-component HTML artifacts for claude.ai with React, Tailwind and shadcn/ui.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsAnthropic labels these “for demonstration and educational purposes only”. Treat them as patterns to learn from and adapt, not finished tools.
Figma’s skills
Figma’s Claude Code plugin bundles its MCP server with skills for design-to-code work. We cover setup in how to use Figma MCP with Claude Code.
Community skills
Skill directories list many community design skills. Some are thoughtful; others are long prompt collections with strong opinions. Check who maintains a skill, read its SKILL.md, and see whether its rules conflict with your product before you install it. Plugins can also run hooks and MCP servers, so the plugin docs advise reading what a plugin adds before installing.
Invoking a skill
Claude loads a skill automatically when your task matches its description. To be sure, call it by name. Plugin skills are namespaced, so after installing the plugin above you’d type /frontend-design:frontend-design, or type / and pick it from the list. You can also ask in plain language: “use the frontend design skill for this page.”
When skills improve results
- New surfaces with no existing style. A prototype, a landing page or a side project benefits from a skill that pushes for a clear aesthetic decision.
- Repeated workflows. If you run the same review or test pass on every page, a skill makes it consistent.
- Knowledge that’s needed sometimes. A long design guide is better in a skill than in
CLAUDE.md, which loads in every session.
When they don’t
- They conflict with your product. A skill that encourages bold, unusual typography can fight an established design system. Your system should win; say so in your CLAUDE.md.
- Too many overlapping skills. The docs note that vague or overlapping descriptions can make Claude load the wrong skill or miss the right one.
- They can’t see your work. A skill is instructions. It doesn’t know what your product looks like or what you like unless that information reaches the agent from somewhere else.
- They aren’t enforcement. Like
CLAUDE.md, a skill is followed with judgement. Rules that must always hold belong in lint checks or hooks.
Write a design skill of your own
The most useful design skill is often a small one written for your product. This one runs a consistent UI review when you call it:
---
name: ui-review
description: Reviews a page or component against our UI standards. Use when asked to review, polish or QA an interface.
disable-model-invocation: true
---
Review the UI at $ARGUMENTS.
1. Run the dev server if it isn't running and open the page.
2. Screenshot it at 1440px and 390px wide.
3. Check, in this order:
- Hierarchy: is the primary action or content the first thing seen?
- Spacing: only values from our scale (4, 8, 12, 16, 24, 32, 48).
- Type: only the styles defined in app/globals.css.
- Components: nothing that duplicates components/ui.
- States: empty, loading and error exist.
- Accessibility: visible focus, labels on inputs, contrast.
4. Report findings by severity with file and line. Fix nothing yet.disable-model-invocation: true means it runs only when you type /ui-review app/settings, which suits a workflow you want to trigger deliberately. Keep SKILL.md short; the docs recommend under 500 lines, with longer reference material in separate files the skill points to.
Skills and MCP together
Skills teach Claude how to do something. MCP connects it to things outside the project, such as a Figma file, a browser or a reference library. They’re complementary, and the distinction trips up a lot of people. We explain it with examples in MCP vs Agent Skills.
A practical pairing for design work: a design skill for method, Figma or a reference source over MCP for context, and a browser for verification. Skills alone still leave the hard question open: what should this product look and feel like? That’s the gap described in why AI-generated interfaces look generic.