plugin87 / ux-ui-agent-skills

# UX/UI Agent Skills
*aka **XIAS***
### 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.10.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 52 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.
 Statistical defaults 
 Built to the rules 
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 "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.