Install UI design skills in Claude Code

1. Choose the work you want help with

A broad design brief and a focused accessibility review need different instructions. Pick one skill for your first task, then inspect its upstream instructions before installation.

• Baseline UI — A focused cleanup pass for spacing, typography, and interface consistency.
• Fixing Accessibility — Review controls, forms, and dialogs for concrete accessibility issues.
• Fixing Motion Performance — Find expensive animation patterns without replacing your animation stack.
• React Best Practices — React and Next.js performance guidance maintained by Vercel.
• React Composition Patterns — Make reusable React components easier to extend and understand.
• Web Design Guidelines — Review interface code against Vercel's current web guidelines.
• Frontend Design — Give an agent a deliberate visual direction for a new interface.

2. Install into your project

With Node.js and npm available, open a terminal in the project. For example, this command selects Baseline UI and targets Claude Code:

npx skills add ibelick/ui-skills --skill baseline-ui --agent claude-code

Follow the installer's prompts and keep the project scope if this skill belongs with this codebase. The command installs instructions; it does not apply design changes to your application.

3. Ask for a small, reviewable change

Use baseline-ui to review our settings screen. Keep the existing components and brand. Explain the most useful changes, implement the agreed scope, and check the result.

Provide the actual file path and your constraints. Review the diff and check the rendered interface before accepting the result.

If the skill is not found

Start a fresh Claude Code session in the project where you installed it. Confirm the install target and scope using the Skills CLI's installed-skill list:

npx skills list --agent claude-code

For installation behavior and supported targets, use the Skills CLI documentation. This guide covers installation, not a benchmark of model quality.