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.4.0 · 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
| Capability | Description |
|---|---|
| Design Token Generation | Produces DTCG-format JSON tokens (colors, typography, spacing, shadows, borders, breakpoints, motion) with a 3-tier architecture: Primitive → Semantic → Component |
| Component Design | Designs components from Atoms to Templates following Atomic Design, with anatomy, variants, states, token mapping, and accessibility specs |
| Code Generation (any framework) | Adapter Protocol targets any stack — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, CSS-in-JS — or generates a new adapter on demand |
| Design-System Interop | Maps to/from any design system (Material 3, Apple HIG, Fluent, Carbon, shadcn/ui, Radix…) via a role-based crosswalk |
| Runnable Skills | 17 invocable /skills + real scripts (token + contrast validators, real-render & state-aware WCAG gates, axe-core a11y, focus-trap, RTL, taste audit, token build) |
| Accessibility Auditing | Evaluates against WCAG 2.2 AA/AAA with prioritized findings (P0/P1/P2) |
| Design Review | Scores designs across 6 dimensions with Nielsen's 10 Heuristics and a structured findings table |
| Prototyping & Research | Guides through a 5-level fidelity ladder, user journey mapping, and usability testing scripts |
| Motion Design | Tokenized durations, easing curves, transition presets, and reduced-motion strategy for accessible animation |
| UX Writing | Voice & tone system with error/empty-state formulas, microcopy patterns, and inclusive language guidelines |
| Design Taste | Native anti-slop doctrine, aesthetic archetypes, and a library of 138 design systems for layout variance, editorial typography, and premium visual direction |
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"
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.
| Command | What it does |
|---|---|
/design-tokens |
Generate / extend / validate DTCG tokens, palettes, multi-brand theming |
/design-component |
Spec a component (anatomy, variants, 8 states, a11y) |
/design-code |
Generate code for any framework via the Adapter Protocol |
/design-review |
Score a design (6 dimensions + Nielsen) with a findings table |
/a11y-audit |
WCAG 2.2 audit + contrast checks |
/apply-aesthetic |
Apply an archetype or one of 138 design systems |
/redesign |
Audit-first upgrade of an existing UI without breaking it |
/migrate-design-system |
Map to/from Material 3, Apple HIG, shadcn, Radix, etc. |
/prototype |
Move up the fidelity ladder + plan usability testing |
/ux-writing |
Write/review buttons, errors, empty states, microcopy |
/design-code a pricing card in Vue, dark-mode aware
/apply-aesthetic stripe → make the dashboard feel like Stripe
/a11y-audit this checkout form
/migrate-design-system from Material 3 to our tokens
3. Run the scripts (real, no dependencies)
Plain python3 — useful in the terminal or CI:
python3 scripts/validate_tokens.py # validate token JSON + alias refs
python3 scripts/validate_contrast.py # batch WCAG gate: token pairs, light + dark
python3 scripts/contrast.py "#1d1d1f" "#ffffff" # WCAG contrast ratio for one pair
python3 scripts/validate_component_spec.py # every component spec is complete
python3 scripts/lint_hardcodes.py src/ # no off-theme hex/px/timing (consistency)
python3 scripts/lint_taste.py page.html # heuristic anti-slop taste check
python3 scripts/design_systems.py list # browse the 138-system library
python3 scripts/scaffold_component.py "Date Picker" # emit a component spec stub
These are the same gates CI runs (.github/workflows/ci.yml) — token validity, WCAG contrast in light + dark, spec completeness, and zero hardcoded values — so theme/color stays consistent across every page and accessibility is enforced, not assumed.
Typical flow
1. /apply-aesthetic linear → set the visual direction (tokens re-pointed)
2. /design-component Combobox → spec it with states + a11y
3. /design-code Combobox in React + Tailwind → production code
4. /a11y-audit → verify contrast, keyboard, focus
5. /design-review → score + findings before ship
Tip: skills compose.
apply-aestheticalways re-verifies contrast througha11y-audit;redesigncallsdesign-review+a11y-auditautomatically.
Project Structure
.
├── CLAUDE.md # Agent persona & master instructions (the session brief)
├── CONTEXT.md # Ubiquitous language — shared domain vocabulary
├── CLAUDE.local.md # Personal prefs (gitignored, per-machine)
├── .mcp.json # Project MCP servers (Figma) — no secrets, env-expanded
│
├── .claude/skills/ # Runnable skills — invoke via /name
│ └── design-tokens · design-component · design-code · design-review · a11y-audit
│ apply-aesthetic · redesign · migrate-design-system · prototype · ux-writing
├── .claude/commands/ # Custom slash commands — /gate · /ship · /scaffold-project
├── .claude/settings.json # Shared permissions (scripts allowlist), checked into git
│
├── reference/ # Real screens the agent studies before designing/reviewing
│
├── scripts/ # Real helper scripts (python3, no deps)
│ ├── validate_toke