Use This SkillThere is no single best frontend design skill; it depends on what you build. Of the 295 skills in the Use This Skill directory's Design category, nine that build or style web interfaces have public proofs: Claude Opus 5.5 built the same brief three times without the skill and three times with it. Start with frontend-design for marketing pages, ui-ux-pro-max for app screens, and accessibility-compliance for forms and settings.
Which design skills have been tested side by side?
Each row is one proof. The brief is different for each skill, so compare a skill with its own "without" runs, not with the other rows. "What changed" counts markers in the HTML of all six pages (method below); the look of the pages is on each skill's page, all six runs, none picked by hand.
| Skill | Source | Brief | What changed with the skill (3 runs each side) | Scan |
|---|---|---|---|---|
| frontend-design | anthropics/skills | Landing page for a calendar app | Skip link in 2 of 3 runs (0 of 3 without); median ARIA attributes 18 to 36; median file size 56 KB to 37 KB | Clear |
| ui-ux-pro-max | nextlevelbuilder/ui-ux-pro-max-skill | Personal finance dashboard | Skip link in 3 of 3 runs (0 of 3 without); median ARIA attributes 41 to 103; median CSS variables 31 to 54 | Clear |
| accessibility-compliance | wshobson/agents | Team settings page with tabs and toggles | Median form labels 25 to 31; median ARIA attributes 131 to 90 | Clear |
| tailwind-design-system | wshobson/agents | Plant shop product grid | Median CSS variables (design tokens) 19 to 33 | Clear |
| canvas-design | anthropics/skills | Poster-style site for a jazz night | Median distinct media queries 3 to 7 | Clear |
| web-design-guidelines | vercel-labs/agent-skills | Newsletter sign-up page with form states | Little change on these markers; skip links in 3 of 3 runs on both sides | Clear |
| theme-factory | anthropics/skills | Invitation site for a garden dinner | Little change; median CSS variables 19 to 15 | Clear |
| web-artifacts-builder | anthropics/skills | Lisbon trip planner with a running budget | Little change; median length 531 to 630 lines | Clear |
| brand-guidelines | anthropics/skills | Internal tool announcement | Visible focus styles in 1 of 3 runs (3 of 3 without) | Clear |
Proofs recorded October 19, 2026 (web-artifacts-builder on October 21) on claude-opus-5-5. Scan results and directory counts are from October 23, 2026.
A marker is not a verdict. A page can have twice the ARIA attributes and still look generic, and fewer attributes can mean cleaner markup, not worse access. Use the table to know what to look for, then open the proofs.
Which design skill should I pick?
- A landing or marketing page that should not look like a template: frontend-design. Its own description says it helps with "aesthetic direction, typography, and making choices that don't read as templated defaults." Its pages came out smaller in all three runs.
- An app screen, dashboard or anything with a sidebar and data: ui-ux-pro-max. It covers web, mobile and desktop interfaces, charts and layout, and its runs added a skip link every time and more than doubled the ARIA attributes.
- Forms, settings and keyboard or screen reader support: accessibility-compliance. It targets WCAG 2.2, and its runs labeled more form fields.
- A component library on Tailwind: tailwind-design-system, built around Tailwind CSS v4 and design tokens. Its runs defined more tokens as CSS variables.
- Reviewing a UI you already have: web-design-guidelines. It is written as a review skill ("review my UI", "audit design"), so a build-from-scratch brief shows less of what it does.
- Restyling an existing page with a ready theme: theme-factory, which ships 10 preset themes of colors and fonts.
Two of the nine are narrower than their category suggests. brand-guidelines applies Anthropic's own colors and typography, so it is only for work that should look like Anthropic. canvas-design is written for posters and static art in PNG and PDF; its proof asked for a poster-style web page to match.
What does Claude already do without a skill?
More than most lists assume. In all 27 runs without a skill across these nine proofs, the page included a prefers-reduced-motion rule and :focus-visible styles. Skip links were already present without a skill in the web-design-guidelines and accessibility-compliance runs.
So a design skill mostly changes the choices: the type, the color system, the layout, how far the page moves away from a default look. That is hard to count, which is why every proof publishes all six pages rather than a score.
How were the proofs run and measured?
Each proof gave Claude Opus 5.5 one fixed brief and one output rule: a single self-contained HTML file with inline CSS and SVG, no outside images or fonts. It ran three times with no skill and three times with the skill installed at a pinned commit. All six pages are published on the skill's page; the method is on how proofs work.
The markers in the table come from a script run on the 54 published HTML files on October 24, 2026. It checks for a skip link, a prefers-reduced-motion rule and :focus-visible styles (counted per run), and counts ARIA attributes, <label> elements, distinct @media conditions, CSS custom properties, file size and lines (median of three runs per side). It reads the code only; it does not judge how a page looks.
Are these design skills safe to install?
All nine were Clear in the October 23, 2026 scan, which checks the files in each skill's folder for patterns such as downloading and running code in one step, sending data to an outside endpoint, reading credential files, or phrasing that tries to override your instructions. Across the whole Design category, 278 of 295 skills were clear, 14 need a manual look and 3 were flagged. The scan is a static check, not a guarantee; are agent skills safe? explains what it catches and what it cannot.
Before installing any skill, you can paste its GitHub link into the live skill check and see the same report for its current commit.
How do I install one in Claude Code?
Each skill's page has a one-line install. For frontend-design:
npx degit anthropics/skills/skills/frontend-design .claude/skills/frontend-design
That puts the skill at .claude/skills/frontend-design/SKILL.md, which Claude Code loads for that repository; ~/.claude/skills/ makes it available in all your projects. Claude Code keeps each skill's description in context and loads the full skill only when it is used, so it applies when a request matches, or when you type /frontend-design.
For more design skills, the design category list ranks all 295 with proven skills first, and proven skills shows every proof on the site. To understand how skills differ from subagents and commands, see skills vs subagents vs slash commands.