UX/UI Agent Skills

Turn Claude into a Senior Design Architect — 15+ years of expertise in design systems, accessibility, and production-ready component engineering.

A comprehensive kit of structured instructions, design tokens, runnable skills, and 138 brand-grade design systems that turn Claude into a UX/UI expert agent — targeting any framework and any design system. Drop it into any project for consistent, accessible, token-driven design outputs, every time.

Version

Current release: v2.5.1 · See the Changelog · All releases

No build tools, dependencies, or runtime required — this is a pure instruction & knowledge layer for AI agents.

What It Does

Quick Start

Option A — Install with npx (recommended)

Drop the kit into any project, no clone needed:

npx ux-ui-agent-skills init          # full kit into the current folder
npx ux-ui-agent-skills add tokens taste design-systems   # just some areas
npx ux-ui-agent-skills list          # see all areas

Flags: --force (overwrite existing files) · --dry (preview, change nothing).

Option B — Clone

git clone https://github.com/plugin87/ux-ui-agent-skills.git
cp -r ux-ui-agent-skills/ your-project/

Then start using — open the project in Claude Code or any Claude-powered IDE. CLAUDE.md loads automatically, activating the agent persona with full access to every tokens / components / taste / design-system file and the runnable /skills.

"Design a notification component with all states and accessibility"
"Review this login page against WCAG 2.2 and Nielsen's heuristics"
"Generate React + Tailwind code for a data table with sorting and pagination"
"Create a color token palette for a fintech brand using blue as the primary"
"Audit this form for accessibility issues — give me a prioritized findings table"
"Write the empty state and error copy for the onboarding flow"
"Spec the motion for the modal open/close with reduced-motion fallback"

Start a New Design Project

The kit is the engine. A product repo that uses it wants its own lean layout, and templates/product-design/ is that starter, shipped ready to copy:

your-product/
  CLAUDE.md              the brief Claude reads every session (lean, placeholders to fill)
  CLAUDE.local.md        your personal prefs, gitignored
  .mcp.json              Figma / Notion connections, env-expanded, no secrets
  .claude/
    rules/               components.md · tokens.md · accessibility.md — load only when relevant
    skills/              repeatable workflows your team adds
    commands/            /gate — the project's own all-or-nothing check
    settings.json        shared permissions, checked into git
  design-tokens.json     source of truth: color, type, spacing (light + dark, WCAG-verified)
  src/components/        the real UI Claude reads and edits
  public/images/         real images so prototypes do not break
  reference/             real screens Claude studies for context

In Claude Code, from a clone of this repo:

/scaffold-project ../your-product

It copies the template, installs the engine areas next to it (npx ux-ui-agent-skills add tokens components taste accessibility workflows content frameworks design-systems scripts skills), and walks the placeholders with you. The project brief stays short on purpose: it loads on every turn, so everything that is not needed every turn lives in .claude/rules/ or a skill.

The seeded theme is not a guess. python3 scripts/validate_template.py proves the layout is complete, every alias resolves, and the required contrast pairs pass WCAG 2.2 AA in both light and dark before a project starts from it.

How to Use

New here? Read docs/WORKFLOW.md for the full end-to-end picture — how the Request Router loads layers on demand, real usage scenarios, and the automated release pipeline.

There are three ways to drive the kit. Use whichever fits the moment.

1. Just ask (zero commands)

CLAUDE.md loads automatically, so plain requests already route to the right knowledge. Describe what you want and the agent self-routes via the built-in Request Router:

"Generate a Svelte button with all states and dark mode"
"Make this landing page feel like Linear"
"Migrate our Material 3 colors into this token system"

2. Run a skill explicitly (/skill)

Type a slash command to invoke a capability directly. Each skill loads only the files it needs and can run its own scripts.

Each SKILL.md carries an invocation field, so it is clear which ones you drive and which ones the agent reaches for on its own. Both kinds can be typed as a slash command.

User-invoked — you start them, they orchestrate a whole job

Model-invoked — the discipline the agent applies while it works