What is UX/UI Agent Skills?

It is a kit of structured instructions, DTCG design tokens, component specs and runnable skills that turns Claude into a senior design architect. It is a knowledge layer, not a library: nothing is imported, nothing is built, and it has no runtime.

Run npx ux-ui-agent-skills init in the project folder, then open that folder in Claude Code. CLAUDE.md loads on its own, so there is no configuration step. To take only part of it, use npx ux-ui-agent-skills add tokens taste design-systems.

Which frameworks does it support?

Any of them. The Framework Adapter Protocol is a universal token-to-framework contract, so the agent can target a stack with no dedicated file and write a new adapter on demand. It ships full references for React 19 with Tailwind v4, Next.js 15 App Router and SwiftUI 6, plus 16 concise adapters covering Vue, Svelte, Angular, Solid, Lit, Qwik, Astro, MUI, Mantine, Chakra, Bootstrap, React Native, Flutter, Jetpack Compose, vanilla CSS and CSS-in-JS.

Does it actually enforce accessibility, or just recommend it?

It enforces it. Thirty-seven gates run against a real headless render in light and dark: contrast in default, hover and focus, axe-core roles and names, focus traps, RTL mirroring, target size, keyboard operability, reduced motion and silent text clipping. They exit non-zero on failure, and node scripts/accuracy_report.mjs runs them as one all-or-nothing check with no partial credit. The floor is WCAG 2.2 Level AA, with an AAA upgrade path documented.

What are the 138 design systems?

A library of brand-grade DESIGN.md specs covering products like Apple, Stripe, Linear, Vercel, Notion and Spotify, alongside aesthetic archetypes such as brutalism, editorial and glassmorphism. Ask for a direction by name and the tokens re-point to it while accessibility holds, because taste serves the aesthetics tier and never overrides POUR.

Does it work with tools other than Claude Code?

It works in any Claude-powered IDE, because the kit is plain Markdown and JSON that the agent reads. Claude Code picks up CLAUDE.md automatically; elsewhere the same files can be pointed at by hand.

Yes. It is MIT licensed and published on npm as ux-ui-agent-skills. The current release is v2.5.1.

Can it prove the design is good?

No, and it says so. The gates prove objective correctness, never taste. For the half no script can score, /critique is an adversarial reviewer that renders the work, screenshots it at 1280 and 390 in both themes, clicks every control and argues for rejection with evidence. A passing gate is never evidence of taste.

Turn Claude into a
Senior Design Architect.

Design tokens, 50 component specs, WCAG 2.2 gates and code for any framework. A pure instruction and knowledge layer for AI agents. No build tools, no dependencies, no runtime.

npx ux-ui-agent-skills init View on GitHub 982

138 Brand-grade design systems, from Apple to Linear to Stripe

37 Objective gates, run as one all-or-nothing check

17 Runnable skills you invoke with a slash command

16 Framework adapters, plus one protocol for the rest

Tokens, never hex codes

PRIMITIVE SEMANTIC
COMPONENT DTCG TOKENS

A brief goes in,
shipped UI comes out

Accessibility, enforced not assumed

It ships in

Design systems.
All 138 of them.

The library

61 homepages,
captured for this page.

Every one of these ships as a DESIGN.md spec you can point the agent at. Say make it feel like Linear and the tokens re-point, while accessibility holds.

77 more that no browser can show you

Aesthetic archetypes with no address of their own, plus the handful of hosts that answer a headless browser with a consent wall instead of a homepage. Each still ships as a full spec.

agentic
application
artistic
atelier zero
bento
binance
bold
brutalism
cafe
canva
claude
claymorphism
clean
clickhouse
coinbase
colorful
composio
contemporary
corporate
cosmic
creative
dashboard
default
dithered
doodle
dramatic
editorial
elegant
elevenlabs
energetic
enterprise
expressive
fantasy
ferrari
flat
friendly
futuristic
glassmorphism
gradient
ibm
kami
levels
lingo
lovable
luxury
mastercard
minimal
modern
mono
neobrutalism
neon
neumorphism
nvidia
openai
pacman
paper
perspective
premium
professional
publication
refined
renault
retro
revolut
simple
skeumorphism
sleek
spacious
starbucks
storytelling
tetris
theverge
vibrant
vintage
warm editorial
x ai
xiaohongshu

Built to survive

and it drops into
any project.

ux-ui-agent-skills

$ npx ux-ui-agent-skills init
Installing full kit -> .

  + CLAUDE.md
  + tokens/          13 files
  + components/      50 specs
  + design-systems/  138 systems
  + .claude/skills/  17 skills
  + scripts/         the gates

Done. 259 copied, 0 skipped.
Open the folder in Claude Code, CLAUDE.md loads itself.

View on npm Clone on GitHub

How to use

Three steps.
Then just ask.

01
Drop the kit into your project

One command in the folder you are working in. Nothing to build, nothing to install, no runtime. The kit is instructions and knowledge, not a dependency.
```
$ npx ux-ui-agent-skills init
```
Only part of it? npx ux-ui-agent-skills add tokens taste design-systems. Prefer a clone? git clone the repo and copy the folders you want.
02
Open the folder in Claude Code

There is no step to remember here. CLAUDE.md loads on its own and the agent picks up the persona, the token rules, the eight states, the WCAG floor and the anti-slop doctrine, plus the Request Router that pulls the right layer for the job and leaves the rest unread.
```
$ claude
```
03
Ask for the work in plain words

No syntax to learn. Describe the outcome and the router loads the layers it needs.
- Design a notification component with every state and its accessibility spec
- Make this landing page feel like Linear
- Generate React and Tailwind code for a data table with sorting and pagination
- Audit this checkout form against WCAG 2.2 and give me a prioritized findings table
- Migrate our Material 3 colours into this token system

Or name the skill

Seventeen skills, invoked as slash commands. Six you start; eleven the agent reaches for on its own while it works.

/brandkitA whole brand foundation from a brief, tokens, light and dark, one theme.css, WCAG-verified
/redesignAudit-first upgrade of an existing UI without breaking it
/image-to-codeA screenshot becomes token-driven, accessible code
/a11y-auditWCAG 2.2 audit and real contrast checks
/apply-aestheticApply an archetype or one of the 138 named systems
/critiqueAn adversarial reviewer that argues for rejection, with evidence

Then make it prove itself

The kit does not ask to be trusted. Its gates run against real files and real renders, and they exit non-zero when they fail. This is the actual output from running four of them against this page.

$ python3 scripts/validate_tokens.py
Parsed 14/14 token files, 450 tokens defined.
OK: all token files valid JSON.

$ python3 scripts/validate_contrast.py
OK: all required contrast pairs pass WCAG 2.2 minimums.

$ python3 scripts/lint_hardcodes.py public/site.css
OK: no hardcoded values found.

$ python3 scripts/check_no_emoji.py index.html public/site.css
OK: no emoji in UI output or taste files.

The full run is node scripts/accuracy_report.mjs, 37 gates as one all-or-nothing check on a headless render in light and dark. One failure fails the whole thing, and taste is never scored, only judged.

Questions

Straight answers.

What is UX/UI Agent Skills?: It is a kit of structured instructions, DTCG design tokens, component specs and runnable skills that turns Claude into a senior design architect. It is a knowledge layer, not a library: nothing is imported, nothing is built, and it has no runtime.
How do I install it?: Run npx ux-ui-agent-skills init in the project folder, then open that folder in Claude Code. CLAUDE.md loads on its own, so there is no configuration step. To take only part of it, use npx ux-ui-agent-skills add tokens taste design-systems.
Which frameworks does it support?: Any of them. The Framework Adapter Protocol is a universal token-to-framework contract, so the agent can target a stack with no dedicated file and write a new adapter on demand. It ships full references for React 19 with Tailwind v4, Next.js 15 App Router and SwiftUI 6, plus 16 concise adapters covering Vue, Svelte, Angular, Solid, Lit, Qwik, Astro, MUI, Mantine, Chakra, Bootstrap, React Native, Flutter, Jetpack Compose, vanilla CSS and CSS-in-JS.
Does it actually enforce accessibility, or just recommend it?: It enforces it. Thirty-seven gates run against a real headless render in light and dark: contrast in default, hover and focus, axe-core roles and names, focus traps, RTL mirroring, target size, keyboard operability, reduced motion and silent text clipping. They exit non-zero on failure, and node scripts/accuracy_report.mjs runs them as one all-or-nothing check with no partial credit. The floor is WCAG 2.2 Level AA, with an AAA upgrade path documented.
What are the 138 design systems?: A library of brand-grade DESIGN.md specs covering products like Apple, Stripe, Linear, Vercel, Notion and Spotify, alongside aesthetic archetypes such as brutalism, editorial and glassmorphism. Ask for a direction by name and the tokens re-point to it while accessibility holds, because taste serves the aesthetics tier and never overrides POUR.
Does it work with tools other than Claude Code?: It works in any Claude-powered IDE, because the kit is plain Markdown and JSON that the agent reads. Claude Code picks up CLAUDE.md automatically; elsewhere the same files can be pointed at by hand.
Is it free?: Yes. It is MIT licensed and published on npm as ux-ui-agent-skills. The current release is v2.5.1.
Can it prove the design is good?: No, and it says so. The gates prove objective correctness, never taste. For the half no script can score, /critique is an adversarial reviewer that renders the work, screenshots it at 1280 and 390 in both themes, clicks every control and argues for rejection with evidence. A passing gate is never evidence of taste.

Capabilities

Design Tokens

13 files

DTCG-format JSON on a three-tier architecture, primitive, semantic, component. Colour, typography, spacing, shadows, borders, breakpoints, motion. Dark mode swaps semantics; primitives never move.

DTCG light + dark multi-brand

Read the token architecture

Component Specs

50 components

Atoms to templates, each with anatomy, variants, the eight states, token mapping and an accessibility spec. A component is correct only when every variant times every state renders right, not just the resting default.

atomic design 8 states ARIA patterns

See the component library

Code for any framework

16 adapters

The Framework Adapter Protocol is a universal token-to-framework contract, so the agent can target a stack even with no dedicated file, and writes a new adapter on demand. Full references for React 19 + Tailwind v4, Next.js 15 App Router and SwiftUI 6; concise adapters for Vue, Svelte, Angular, Solid, Lit, React Native, Flutter, Jetpack Compose, vanilla CSS and CSS-in-JS.

Read the adapter protocol

Taste, as a real layer

138 systems

An anti-slop doctrine with banned defaults, aesthetic archetypes, and a library of 138 brand-grade design systems, Apple, Linear, Stripe, Vercel, Notion, Spotify and more. Ask for the direction by name: make this dashboard feel like Stripe, and the tokens re-point while accessibility holds.

Browse all 138

Accessibility gates

WCAG 2.2

Measured on a real render, in both themes

Contrast in default, hover and focus. axe-core roles and names. Focus traps, RTL mirroring, target size, keyboard operability, reduced motion, including content only an animation reveals. Not a checklist: a gate that exits non-zero.

Judgement, where gates end

/critique

An adversarial reviewer, not a score

A passing gate is never evidence of taste. /critique refuses to review from source alone - it screenshots at 1280 and 390 in light and dark, clicks every control, and returns the three reasons a senior designer would send the work back.

Turn Claude into aSenior Design Architect.

61 homepages,captured for this page.