AGENT SKILLS
Best Claude Code Skills for Design and Development
Compare Claude Code skills for interface design, UI review and development planning. Check their sources and scope, then follow the client-specific installation guide.
On this page
Find your next step
7 resources
Frontend Design Skill for Briefs and UI Review
Frontend Design is Anthropic’s guidance for building interfaces with a deliberate visual direction. It connects decisions about typography, composition, color and interaction while working within a project’s technical constraints.
Read more
UI UX Pro Max Skill for Design Systems
UI UX Pro Max is a design-focused skill project with design-system tooling and references. It gives coding agents a more structured starting point for visual choices and reusable interface patterns.
Read more
Web Design Guidelines Skill for UI Audits
Vercel’s Web Design Guidelines skill reviews interface code against maintained Web Interface Guidelines. It works with selected files and returns findings tied to code locations, making it useful for improving an existing UI.
Read more
Superpowers Skill for Planning and Verification
Superpowers is a skills framework and development methodology connecting design clarification, planning, implementation and review. It emphasizes test-driven development and explicit checks, with setup routes for different coding-agent environments.
Read more
Vercel Agent Skills by Task and Prerequisite
Vercel Agent Skills is an official repository of packaged agent instructions and scripts. Use the collection as a catalog, then choose the skill that matches the job.
Read moreSkillsMP: Find Skills and Understand Source Quality
SkillsMP indexes public agent skills and their original sources. Use it to discover examples, then inspect the publisher, scope and supporting files before using a skill.
Read more
GitHub Spec Kit for an Existing Repository: Spec to Tasks
Try GitHub Spec Kit on one change in an existing repository and check the spec, plan and tasks before implementation.
Read morePair the skill with a UI library
Once the design direction is clear, compare these component and interface resources. Each page covers its stack, scope and original source.
CodexFind, load and use a coding skill
01Separate design generation, interface review and implementation planning.
02Keep shared workflows in project scope and personal workflows in user scope.
03A skill can bundle scripts and references as well as instructions.
Start with one practical task
Choose the skill for the job you repeat, such as planning a feature or reviewing a UI. Inspect the instructions and required inputs, then test one small task in the project where you will use it.
Match one skill to one missing task
Frontend Design focuses on visual direction. UI UX Pro Max offers a broader design reference workflow. Web Design Guidelines supports interface review, while Superpowers structures planning and implementation. They can complement each other when their roles are explicit.
| Skill | Use it for | What to inspect | Check the result |
|---|---|---|---|
| Frontend Design | Give a new interface a coherent visual direction | Publisher instructions and the project’s existing design tokens | Review typography, hierarchy and responsive behavior in the rendered page |
| UI UX Pro Max | Explore design references and turn them into implementation choices | Included scripts, references and required local dependencies | Check whether the chosen direction fits the product and existing components |
| Web Design Guidelines | Review an existing interface against design and accessibility guidance | Review instructions and the files or views they cover | Verify concrete findings in the relevant interaction and viewport |
| Superpowers | Structure planning, implementation and verification work | Workflow stages, supporting tools and repository conventions | Confirm the requested result and evidence of the project’s checks |
Check how your client loads skills
For Claude Code, follow the official skills guide and choose project or personal scope deliberately. Read the skill’s SKILL.md and referenced files before trying a representative task. This page selects task guidance; the installation guide covers how Claude Code discovers and invokes it.
Codex and Cursor have separate discovery, invocation and remote-execution behavior. If you use one of those clients, continue to its dedicated guide and check that referenced scripts, tools and dependencies are available there. Recognizing the same file format does not guarantee identical behavior.
Inspect the source and try a small task
Read the entry file and supporting scripts, check its publisher and understand what access it expects. Run a representative task in your own project and compare the result against a written acceptance checklist. Repository popularity is not a substitute for this check.
A few more details
How should I choose the next resource?
Choose the task you need to complete, read the resource’s original documentation and verify one representative outcome in your own project.
Sources & maker notes
Related guides & projects
View allHow to Add Skills to Claude Code and Verify Setup
Already have a skill package? Follow its installation route. Writing your own is a different job: give it a clear task, choose personal or project scope, then confirm Claude can find it.
Read moreFrontend Design Skill for Briefs and UI Review
Frontend Design is Anthropic’s guidance for building interfaces with a deliberate visual direction. It connects decisions about typography, composition, color and interaction while working within a project’s technical constraints.
Read moreUI UX Pro Max Skill for Design Systems
UI UX Pro Max is a design-focused skill project with design-system tooling and references. It gives coding agents a more structured starting point for visual choices and reusable interface patterns.
Read moreWeb Design Guidelines Skill for UI Audits
Vercel’s Web Design Guidelines skill reviews interface code against maintained Web Interface Guidelines. It works with selected files and returns findings tied to code locations, making it useful for improving an existing UI.
Read moreSuperpowers Skill for Planning and Verification
Superpowers is a skills framework and development methodology connecting design clarification, planning, implementation and review. It emphasizes test-driven development and explicit checks, with setup routes for different coding-agent environments.
Read moreClaude SEO Skill and Toolkit Selection
Match the skill to the SEO job: diagnosing crawl issues, planning content or reviewing schema. Claude SEO and Marketing Skills cover different scopes, so the useful choice depends on the evidence you have.
Read more