What are the best Claude Code skills for UI design?
ui-verification from mblode/agent-skills is the highest-scoring Claude Code skill for UI design, at 89/100 (grade B) on the Suede Skill Check. The table below compares the top 15 of 47 listed UI design skills from 8 repositories by score, publisher and license, using the October 22, 2026 snapshot of SuedeAI.directory.
- 47 listed UI design skills
- 7 full pages scoring 80+
- 17 repositories
Compare 15 Claude Code skills for UI design
Ranked by Suede Skill Check score. Linked names open the directory listing; scores come from the published rubric.
| Skill | Publisher | Suede Skill Check | License | What it does |
|---|---|---|---|---|
| ui-verification | mblode mblode/agent-skills | 89/100 · B | MIT | Runs scoped browser probes for focus, hit targets, overflow, themes, request failures, and performance attribution, with evidence linked to UI rule IDs. |
| auteur | agiwhitelist agiwhitelist/auteur | 89/100 · B | MIT | Designs and builds complete web experiences, including landing pages, cinematic scroll-directed sites, and multi-screen products, as one consistent design system with generated assets. |
| web-artifacts-builder | Anthropic Official anthropics/skills | 87/100 · B | Apache-2.0 | Builds elaborate multi-component claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui, for complex artifacts needing state management, routing, or shadcn/ui components. |
| ui-animation | mblode mblode/agent-skills | 86/100 · B | MIT | Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface sound. |
| ui-design | mblode mblode/agent-skills | 84/100 · B | MIT | Designs and builds React, Next, and Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data. |
| frontend-design | Anthropic Official anthropics/skills | 84/100 · B | Apache-2.0 | Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography… |
| ux-heuristics | wondelai wondelai/skills | 83/100 · B | MIT | Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "users are confused", "form… |
| design-system | nextlevelbuilder nextlevelbuilder/ui-ux-pro-max-skill | 83/100 · B | MIT | Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables… |
| ui-styling | nextlevelbuilder nextlevelbuilder/ui-ux-pro-max-skill | 83/100 · B | MIT | Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and… |
| ui-ux-pro-max | nextlevelbuilder nextlevelbuilder/ui-ux-pro-max-skill | 83/100 · B | MIT | UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces… |
| superdesign | superdesigndev superdesigndev/superdesign-skill | 83/100 · B | MIT | Designs or redesigns frontend UI, presentations, and graphics on the Superdesign canvas using a choice of AI models, comparing results and exploring visual variants. |
| fluentui-blazor | GitHub Official github/awesome-copilot | 83/100 · B | MIT | Guide for using the Microsoft Fluent UI Blazor component library (Microsoft.FluentUI.AspNetCore.Components NuGet package) in Blazor applications… |
| expo-ui | Expo Official expo/skills | 81/100 · B | MIT | Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet)… |
| lean-ux | wondelai wondelai/skills | 81/100 · B | MIT | Apply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables. Use when the user… |
| refactoring-ui | wondelai wondelai/skills | 81/100 · B | MIT | Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix… |
Questions and answers
Which UI design skill has the highest Suede Skill Check score?
ui-verification from mblode/agent-skills scores 89/100, grade B, the highest of the 47 listed UI design skills in the October 22, 2026 snapshot. It earns full points for structural checks, recent maintenance and instruction depth. auteur from agiwhitelist/auteur follows at 89/100.
How do I install a UI design skill in Claude Code?
Run npx skills add with the skill folder's GitHub URL from your project, or copy the folder into .claude/skills/ and Claude Code loads it when a request matches its description. For ui-verification, run: npx skills add https://github.com/mblode/agent-skills/tree/main/skills/ui-verification. Each full skill page on SuedeAI.directory lists the same steps for Claude Code and Codex.
Are these UI design skills free?
All 15 UI design skills on this page are published in public GitHub repositories and cost nothing to download. Every one uses an open-source or open-content license, led by MIT (13) and Apache-2.0 (2), so you can use and adapt the files at no cost under those terms.
Do these UI design skills work with Codex and Cursor?
Yes. Each of the 15 UI design skills on this page is a SKILL.md folder in the Agent Skills format, which Claude Code, Codex and Cursor all read. The skills CLI (npx skills add) installs every one of them into Claude Code, Codex, Cursor and other agents, and each full skill page adds a project-level copy into .claude/skills for Claude Code and .agents/skills for Codex. ui-verification declares compatibility in the SKILL.md frontmatter.
How does SuedeAI.directory rank UI design skills?
By Suede Skill Check score from 0 to 99, which adds structure, description quality, instruction depth, bundled files, maintenance and curated-list citations, all read from each skill's published files. A skill joins this page when its name or summary matches the UI design keyword map; each repository fills at most three rows, so the table compares publishers.
Which UI design skills come from official publishers?
web-artifacts-builder and frontend-design from Anthropic, fluentui-blazor from GitHub and expo-ui from Expo are published by the company behind the tool, marked Official in the table.
Compare alternatives
More Claude Code skills by task
Presentations · Playwright and Browser Testing · Terraform · SEO · Code Review · Git and Pull Requests · MCP Servers · Data Analysis · Kubernetes · AWS · Security Audits · Email · Video · iOS and Swift · Flutter and Dart · React and Next.js · RAG and Vector Search · LLM Evals · SQL and Databases · Technical Documentation
Browse by category: Testing and QA · Frontend and Design.