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.9.8 · 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.

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: