Give Your Agent a Design Architect: 52 Gates and 26 Skills in XIAS

AI-built UI drifts toward the same slop: indigo-to-purple gradients, four identical stat cards, emoji where icons belong. The 3k-star plugin87/ux-ui-agent-skills repository — aka XIAS — attacks that with structure: a pure instruction-and-knowledge layer (no build tools, no dependencies, no runtime) that turns Claude into a design architect and then measures the output against 52 objective gates.

Why This Skill Matters

XIAS is comprehensive in a way most style guides are not. It produces DTCG-format design tokens in a three-tier architecture (Primitive → Semantic → Component), designs components from Atoms to Templates with anatomy, variants, states, and accessibility specs, and targets any framework through an adapter protocol — 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. It maps to and from established design systems (Material 3, Apple HIG, Fluent, Carbon, shadcn/ui, Radix) via a role-based crosswalk.

The runnable layer is what separates it from a doctrine document: 26 skills (14 the model reaches for on its own, 12 you invoke yourself) plus scripts that run real-render and state-aware WCAG contrast gates, axe-core accessibility checks, focus-trap, RTL, target size, keyboard, reduced motion, overflow, token-by-intent, and taste and slop audits.

Installation

The recommended path installs it as a Claude Code plugin — no files copied into your repo:

/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skills

You get all 26 skills plus the design-critic agent. To drop the kit into a project instead, use npx:

npx ux-ui-agent-skills init

npx ux-ui-agent-skills add tokens taste design-systems installs just some areas, list shows all of them, and --force/--dry control overwrite and preview. For Codex, Cursor, Copilot, Aider, and other AGENTS.md tools: npx ux-ui-agent-skills init --agent codex (or --agent both for both surfaces). There is also a Homebrew formula and an MCP server (claude mcp add ux-ui-gates -- npx -y --package=ux-ui-agent-skills ux-ui-mcp, six tools including run_gate and review_ui) — the install guide (docs/INSTALL.md) explains what each option installs and what you give up.

Real Workflow: Design a Component, Then Run the Gates

Describe the work normally, and the matching skill loads itself:

Design a notification component with all states and accessibility

That sentence routes to design-screen/design-component territory; other documented prompts range from "Review this login page against WCAG 2.2 and Nielsen's heuristics" to "Spec the motion for the modal open/close with reduced-motion fallback."

Then measure. /gate runs all 52 checks and reports the real N/N; behind it stands node scripts/accuracy_report.mjs, which scores 52/52 or fails — no partial credit. Thirty-four of the gates open a real browser, and Playwright is not pulled in by the plugin install, so once per kit directory:

npm install
npx playwright install chrome

Without a browser those 34 report REQUIRED, FAILING under the report script — the honest answer — and run individually they print SKIPPED with exit code 0, so prefix any single render gate with DS_REQUIRE_BROWSER=1 if you read exit codes.

Correctness is not taste, and the kit says so out loud: /critique hands the rendered work to an adversarial design-critic running as a forked subagent — it never sees the conversation that produced the work — which clicks every control and argues for rejection with evidence per finding.

Tips

• If the skills do not show up right after installing, start a new session; claude plugin details ux-ui-agent-skills shows the inventory and per-skill token cost.
• Know what crosses the tool boundary: on the AGENTS.md surface (Codex, Cursor, Copilot, Jules, Aider, VS Code, and about twenty more), tokens, all 52 gates, and the doctrine transfer — but the 26 on-demand skills do not load (the doctrine is inlined instead) and the hooks do not exist there.
• The hooks are the Claude Code difference: three rules fire without the model choosing to — no hardcoded values and no emoji on every write, and a refusal to end a session that edited UI and measured none of it.
• /observe reports whether the agent actually followed the rules: pages edited and measured, Stop-hook blocks, findings left open. Everything stays on your machine and DS_OBSERVE=0 turns it off.

When Not to Use This

The render gates need a real Chrome; if your environment cannot run one, 34 of 52 checks stay unmeasured. Framework coverage has a stated edge too — .vue and .swift sources get file-level checks only, which the README explicitly says are "not proven by this number until they are rendered and measured." And contribution expectations run opposite to most repos: pull requests are not merged; the maintainer writes every line and asks for gate gaps, reproductions, or proposals instead — forking under MIT is the supported path for your own changes.

See the leaderboard for more skills.