ux-ui-agent-skills

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.

Current release v2.8.0 · Changelog · No build tools, dependencies, or runtime — a pure instruction and knowledge layer for AI agents.

---

The output, rendered

Not a mockup. These are screenshots of the files in examples/, taken by node scripts/screenshot_docs.mjs from the same HTML the 44 gates measure — so what you see below is what the gate run passed, in both themes.

Click through them yourself: plugin87.github.io/ux-ui-agent-skills — 49 live pages: twenty whole-product screens, every component harness, both reference screens, with a theme toggle. No install, no clone.

Meridian Terminal is the density test: ten chart types on one screen - candlestick, volume, moving average, depth, order book, tape, sparklines, stacked area, waterfall, bubble and a correlation matrix - every one of them inline SVG drawn from the same tokens, no chart library. Open it live. Build one yourself with /data-dashboard.

Atlas is one HTML file in examples/showcase/, built only from the kit's tokens and rules: the hero figure leads at 3x the body size, the three breakdowns are deliberately three different shapes rather than three identical cards, the range tabs move the numbers, and the table headers really sort. Open it live.

One theme, two modes, no per-page palette. The destructive action wears the danger variant in both. Loading keeps full strength and swaps in a spinner instead of borrowing the disabled dimming. Every one of those is a rule in CLAUDE.md that a gate or a critic enforces.

---

What the gates actually catch

Left: the same dashboard written the way a model writes it when nothing stops it - the indigo-to-purple gradient, four equal cards with no focal point, emoji as icons, one radius and one shadow everywhere, grey-on-white body text, and a blue Delete Account. Right: the reference app in this repo.

The difference is not a matter of opinion, and that is the point. The page on the left is tests/fixtures/bad/slop-screen.html; here is what the gates say about it:

Gate	Verdict on the left-hand page
REAL-render WCAG	x <h1> "Analytics Dashboard" 1.00:1 (need 3) - white text on a gradient has no measurable background
State-aware WCAG	x default "Save Changes" 1.00:1 (need 4.5) [rgb(255,255,255) on rgb(255,255,255)] - 6 states below AA
Target size (2.5.8)	x button.icon-btn is 15.3x16 (min 24x24)
Responsive	x @280px overflow +820px (widest: div.card)
axe-core	SERIOUS target-size
Slop tells	HIGH: hardcoded indigo-purple gradient, single radius, one flat shadow, #000 on #fff
Taste audit	HIGH: biggest heading 24px vs 14px body = 1.7x, not a display scale
Token by intent	x "Delete Account" is destructive but filled with rgb(99, 102, 241) (hue 239deg, not a danger colour)
No emoji	x slop-screen.html:55: emoji/pictograph - a chart glyph in the <h1>
No hardcoded values	FAIL: 63 hardcoded value(s)

Ten gates reject it, none of them on a matter of taste. The right-hand page passes all 44.

The last row is there because building this comparison broke a gate open. lint_intent originally read that blue Delete Account as fine: it resolved "primary" and "danger" from the page's own CSS variables, and a page with no tokens resolved neither, so it skipped the page and reported zero intent-bearing controls. An untokenised page is precisely where intent gets picked by convenience, so the gate no longer looks away - a destructive label filled with a saturated colour outside the danger hue range is wrong-intent with or without a theme. Re-checked against every example in both themes afterwards: no false positives.

tests/meta/browser-gates.test.mjs pins every claim in this table, so it cannot rot.

---

It was run blind, and it came back as rework

Two subagents were handed a brief and a project scaffolded by ux-ui-skills new — which installs the kit and ships no example screens — and nothing else. No hints, no warning that anything would be scored, no access to the conversation that built the kit. They met CLAUDE.md and .claude/rules/ the way a new user's agent does.

Both scored 14/14 on an independent run of evals/run.mjs, scored here rather than self-reported. The rules transfer across a cold start.

And the two runs cost the kit seven defects that four in-session runs never hit, because a familiar run keeps reaching for a finished demo theme instead of the template a real user gets: a secondary button at 1.13:1 dark-on-dark because the component tier never followed the dark map; a reduced-motion policy in an external stylesheet read as "no policy" (Chromium treats a file:// linked sheet as cross-origin, so the gate was blind exactly where every real project lives); a missing scrim token; a theme that emitted colours and no spacing; an intent gate that did not know "cancel subscription" is destructive.

Then the outputs went to /critique, which renders the work and argues for rejection. Verdict on two pages that pass all fourteen gates: rework, eight findings, five Major, and not one of them measurable — an empty state that reads as a page that failed to load, a theme toggle that communicates nothing about its own state, a toast claiming "Draft project created" over a list that never changed, and a loading state wearing the disabled dimming so it reads as "you cannot do this".

The blind outputs were never edited. They are in evals/out/ as the record of what a cold-start agent produced; patching them would be editing the experiment. The findings were spent on the kit instead — one of them became a gate, verify_interactive.mjs, which fails any control that declares a state contract and changes nothing when clicked.

The whole log, including what is still unproven, is in evals/RESULTS.md.

---

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