UX/UI Agent Skills
aka XIAS
Design-system doctrine for coding agents, and 52 gates that check what they build instead of taking their word for it.
Instructions, design tokens, 26 runnable skills and 2,144 design systems (2,087 of them measured from the live site) that make a coding agent design to a senior standard, in any framework and against any design system. Then the gates measure what it built.
Current release v3.1.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.
There are 56 live pages (twenty whole-product screens, five websites from a
product launch to a Thai public service page, every component harness, both
reference screens and an iPhone Duo simulator), 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 is
inline SVG drawn from the same tokens, with 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 52.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
