⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
a11y-audit
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
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:
| 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 |
// HOW IT'S BUILT
KEY FILES