XIAS — UX/UI Agent Skills
Turns Claude into a senior design architect that ships DTCG tokens, accessible components, and framework-ready code, verified by 52 objective gates.
- Source repo
- plugin87/ux-ui-agent-skills
- Stars
- ★ 2.3k
- Last updated
- 8d ago
- License
- MIT
- Primary language
- JavaScript
- FA score
- 70/100 · Some gaps
At a glance
- How it runs
- Works with
- Portable with changesClaude CodeChatGPT · Codex (Partial support)
- Cost
- Free software; you pay for model usage
- Setup effort
- Low · running in minutes
- You'll need
- Typical use
- A front-end team building a SaaS console in Claude Code wants buttons, forms and tables that already carry correct light/dark theming and focus states instead of re-picking colors every time.
- Not a fit if
- Designers who want a standalone tool and will not wire in a coding agent
- Contributors who expect their pull requests to be merged upstream
- Source review
- 70/100 · Some gaps
What does this agent do, and when should you use it?
XIAS (referenced as thumbnails or path) is here to verify. This is an instruction-and-knowledge layer for coding agents rather than a runtime library: no build tools, no runtime dependencies. The repository ships 25 invocable skills, 5 slash commands, 14 DTCG token files, 52 component specs, 138 brand-grade design systems, and 16 framework adapters covering React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose and more. It reaches a project five ways: a Claude Code plugin, an AGENTS.md surface for Codex/Cursor/Copilot/Aider, an MCP server, Homebrew, or npx. The enforcement model lives in scripts/ and tests/: 52 objective gates, 34 of which open a real browser and measure rendered HTML in both themes — WCAG contrast per state, axe roles and landmarks, keyboard operability, target size, reduced motion, overflow down to 280px, token-by-intent — and the run must be a clean 52/52 with no partial credit. A separate adversarial critic, /critique, runs as a forked subagent that renders the work and argues for rejection, while evals/ measures whether a cold-start agent given only the brief produces work that passes. The output is tokens and component code you keep; the repository itself deploys nothing.
Drops CLAUDE.md (or AGENTS.md), .claude/rules/, tokens/, components/, taste/ and design-systems/ into a project so the model reads house rules before generating anything. The skill layer loads on demand — design-tokens, design-component, design-code, design-screen, a11y-audit, apply-aesthetic, data-dashboard, design-review, token-build, figma-integration, ux-writing, performance — while eleven more (brandkit, governance, image-to-code, migrate-design-system, prototype, redesign, gate, critique, grill-me, ship, scaffold-project) carry disable-model-invocation so only the user fires them. Verification is real code, not prose: token and contrast validators, real-render and state-aware WCAG gates, axe-core, focus-trap, RTL, target size, keyboard, reduced motion, responsive overflow, lint_intent.mjs for token-by-intent, lint_intent_source.mjs for destructive intent declared in framework source, and render_framework_source.mjs, which compiles the React components with esbuild, server-renders them, and runs the same browser gates. One command aggregates everything: node scripts/accuracy_report.mjs, which fails unless all 52 pass. The ux-ui-mcp server exposes six tools — list_gates, run_gate, review_ui, get_doctrine, get_design_system, get_tokens — and returns raw gate output with exit codes (0 found nothing, 1 found something, 2 could not look; never a pass).
- A front-end team building a SaaS console in Claude Code wants buttons, forms and tables that already carry correct light/dark theming and focus states instead of re-picking colors every time.
- A design-system owner needs the brand spec expressed as DTCG tokens and enforced consistently across several product front-ends.
- A government, fintech or healthcare project must meet WCAG 2.2 AA or AAA and wants failure detail on contrast, target size, keyboard and reduced motion before CI runs.
- A developer on Cursor or Codex runs npx ux-ui-agent-skills init --agent codex to bring the same doctrine and all 52 gates into a non-Claude editor.
- A data product team needs a dense dashboard with many chart types and sortable tables, using the data-dashboard skill's inline SVG instead of a chart library.
- A reviewer sends finished screens to /critique for an independent, evidence-cited argument for rejection rather than a green gate.
How do you install or deploy this agent?
The recommended route is the Claude Code plugin marketplace; two commands make every skill available in any project you open:
/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skillsFor non-Claude editors, install onto the AGENTS.md surface:
npx ux-ui-agent-skills init --agent codex # writes AGENTS.md
npx ux-ui-agent-skills init --agent both # both surfacesYou can also take only some areas, or install via Homebrew:
npx ux-ui-agent-skills add tokens taste design-systems
brew install plugin87/tap/ux-ui-agent-skills
ux-ui-skills initTo run the gates from any MCP client:
claude mcp add ux-ui-gates -- npx -y --package=ux-ui-agent-skills ux-ui-mcpBrowser gates only score if Playwright and a real Chrome channel are present:
npm install
npx playwright install chromeNo account or API key is required for installation; runtime needs Node.js, and the package declares no dependencies of its own.
How do you use this agent?
Open the project after installing: CLAUDE.md loads automatically and activates the persona, so plain requests pull in the right skill:
"Design a notification component with all states and accessibility"
"Build the billing settings screen, one shared theme, light and dark"
"/grill-me"
"/gate"
"/critique"Run the full gate set and read the real score (52/52 or it fails, no partial credit):
node scripts/accuracy_report.mjsA single render gate prints SKIPPED and exits 0 when no browser is available, so force the honest answer when you are reading exit codes:
DS_REQUIRE_BROWSER=1 node scripts/<gate>.mjsFrom an MCP client, read the doctrine and tokens before generating, then gate what you produced:
list_gates
run_gate
review_ui
get_doctrine
get_design_system
get_tokensTo look without installing anything:
npx ux-ui-agent-skills demoThe cold-start eval suite runs on a brief id, and the critic is scored against a seeded defect key:
node evals/run.mjs <brief-id>
node evals/score_critic.mjsWhat are this agent's strengths and limitations?
- All 52 gates are backed by runnable scripts, and 34 open a real browser to measure rendered output in both themes; scores cannot be self-reported.
- Tokens are W3C DTCG JSON in a three-tier Primitive → Semantic → Component architecture, with a role-based crosswalk to Material 3, Apple HIG, Fluent, Carbon, shadcn/ui and others.
- Framework-agnostic by design: 16 adapters span React, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter and Jetpack Compose, with new adapters generatable on demand.
- Works on both the Claude Code plugin surface and the open AGENTS.md convention, so non-Claude editors reuse the same rules and the full gate set.
- Ships 138 named design systems and an anti-slop doctrine aimed at the model's defaults: gradient headers, four identical cards, emoji icons, one radius everywhere.
- MIT licensed with no runtime dependencies, so nothing is injected into your build or bundle.
- The 34 browser gates require separately installing Playwright and a real Chrome channel; without them accuracy_report.mjs reports REQUIRED, FAILING, and standalone runs print SKIPPED with exit code 0, which reads like a pass.
- On the AGENTS.md surface every rule is a request rather than an enforced hook, so hardcoded values and emoji are not blocked at write time and gates only run when you run them.
- Pull requests are explicitly not merged; every line is written by the maintainer, so outside contribution is limited to gate gaps, reproductions and proposals.
- Framework-source coverage is incomplete: .vue and .swift receive file-level checks only and are not rendered, so the 52/52 number does not prove them.
- Intent linting proves a declaration, not a colour — variant=\"destructive\" wired to a blue token still passes the file-level check.
- Some documented figures have needed post-hoc meta-tests to stay honest (the author records a 35/16 vs 34/18 count discrepancy), so readers should treat untested numbers cautiously.
How does this agent compare with similar options?
The repository itself contrasts its two surfaces. Claude Code and the open AGENTS.md surface (usable by Codex, Cursor, Copilot, Jules, Aider, VS Code and roughly twenty more) share tokens, components, taste, accessibility, the 138 design systems and all 52 gates. Claude Code additionally provides the 25 on-demand skills, hooks that fire whether or not the model remembers, and /critique in a separate context; the AGENTS.md surface inlines the doctrine and leaves every rule as a request. The kit also frames correctness (a real N/N from accuracy_report.mjs) against quality (/critique's judgement), stating plainly that a passing gate is never evidence of taste.
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| XIAS — UX/UI Agent Skills This agent | 70 · Some gaps | Agent plugin / skillFree + model costs | ★ 2.3k | 8d ago | JavaScript | Claude Code |
| DESIGN.md Specification | 80 · Good | CLIFree | ★ 28k | 2d ago | TypeScript | — |
| Appllama Mobile Design Skills | 50 · Major gaps | Agent plugin / skillFreemium | ★ 2.9k | 1mo ago | — | Codex · Claude Code |
| Stitch Design Skills | 0 · Major gaps | Agent plugin / skillFree + model costs | ★ 8.5k | 2mo ago | TypeScript | ChatGPT · Codex · Claude Code |
How does FollowAgents rate this agent?
Why each dimension lost points
Evidence shows: the CLI offers --dry preview and --force overwrite flags; all install paths (plugin/npx/brew/MCP) are user-initiated; MCP tools read doctrine/tokens and run local gates; no credential access or exfiltration is visible; CI permissions are narrowed to contents: read, with pages limited to pages: write + id-token: write. Deductions: the README does not describe any confirmation flow when the agent writes or overwrites files inside a user project, nor any data-flow statement (whether code is uploaded or network calls are made); sensitive-data handling is entirely unaddressed; rollback relies only on --force overwrite and git, with no uninstall/restore guidance; dependencies are devDependencies (playwright/esbuild/react) with no lockfile evidence, so version pinning cannot be confirmed.
Evidence shows: failure messaging is deliberately designed — gate exit codes 0/1/2 distinguish pass / found-something / could-not-look, and the README explicitly forbids reading SKIPPED as green; accuracy_report requires 52/52 with no partial credit; CI includes meta-gates that prove gates still reject broken fixtures. Deductions: the README itself states 34/52 checks need a browser and report REQUIRED, FAILING without one, so the default environment cannot produce a complete verdict; dependency availability depends on npm/Playwright/Chrome installs with no offline or degraded path documented; on self-consistency, internal counts (52 gates, 34 browser, 25 skills, 19 skills, 138 design systems) vary slightly across sections and, while claimed to be derived by counts.test.mjs, cannot be verified statically.
Evidence shows: it targets multiple hosts (Claude Code, Codex, Cursor, Copilot, Aider, MCP) with dual AGENTS.md/CLAUDE.md surfaces, covers many frameworks (React/Vue/Svelte/SwiftUI/Flutter adapters), and spans scenarios from token generation to a11y auditing, UX writing, and motion. Deductions: capability boundaries rest mainly on README self-description with no explicit 'what it does not do' list in the visible files; trigger precision depends on skill invocation/disable-model-invocation fields, and the README admits a wrong field was used historically, so triggering was unreliable; environment fit requires Node>=20 and Python3, and 34 gates need real Chrome, a threshold not fully front-loaded in Quick Start.
Evidence shows: install documentation is thorough (docs/INSTALL.md with five paths, Homebrew, npx, MCP, plugin), examples and FAQ are rich (sample prompts, live demo, screenshots, before/after comparison), known limitations are stated unusually candidly (which checks read files vs render, .vue/.swift not yet render-verified), the MIT license is complete and consistent with package.json, and version 2.9.8 links to a CHANGELOG. Deductions: maintenance responsibility is only an individual author name with no governance, response-time, or support-channel statement, and publisher identity is unverified; naming stability is at risk because skills and commands were migrated/renamed historically; the information architecture is large (138 design systems, 52 components, 25 skills) with no full directory tree in the visible files, raising navigation cost.
Evidence shows: output usability is concretely supported — DTCG tokens, component specs, runnable gates, a clickable live demo and screenshots, with artifacts directly usable in a project; marginal value lies in converting design taste into executable gates plus an adversarial critic, and in honestly separating measurable correctness from unmeasurable quality. Deductions: core value depends heavily on the host agent and a browser environment, dropping sharply outside Claude Code/Playwright; cost is non-trivial since 34 gates need Chrome and Playwright and CI needs a full npm install; no quantified comparison against existing design systems or component libraries is provided, so marginal value is partly self-asserted.
Evidence shows: fact/inference separation is handled well — it explicitly distinguishes measured correctness from judged quality, marks which numbers are script-derived and which are unverified (.vue/.swift not rendered), and publicly admits a previously wrong number (35/16 corrected to 34/18). Deductions: on claim traceability, many README numbers (52 gates, 138 design systems, 25 skills, 14 token files, 16 adapters) cannot be individually traced to specific files in the visible evidence; cross-source corroboration only partially holds across README, package.json, and CI, with no independent source for the rest; static review cannot execute accuracy_report or evals, so every 'passes' claim is independently unverifiable.
- README figures such as 52/52 gates, 138 design systems, and 25 skills cannot be individually verified from the visible files; static review is no substitute for actually running accuracy_report.mjs or evals.
- 34 gates require real Chrome and Playwright; without them they report REQUIRED, FAILING, and when run individually they print SKIPPED and exit 0 — never read SKIPPED as a pass.
- Install/init writes CLAUDE.md, .claude/, and similar files into the user's project; the README does not describe a confirmation step before overwriting, so preview with --dry and keep version control for rollback.
- Publisher identity is unverified and maintenance responsibility is only an individual author name with no support channel or response-time commitment, leaving long-term maintenance and update paths uncertain.
- Dependencies are devDependencies with no lockfile evidence; version pinning and supply-chain risk for Playwright/esbuild/React must be assessed independently.
- The README describes no data-flow or sensitive-data handling policy; before using it in repositories containing sensitive code, confirm whether the agent makes network calls or sends content externally.
Recent releases
Latest entries from the project's GitHub Releases. Notes are quoted from upstream as written, not rewritten or tested by FollowAgents.
-
Release notes excerpt
**The Stop hook can no longer block you over another project's files, even if its ledger is wrong.** 2.9.7 fixed how the ledger is named; this release makes the outcome independent of the ledger being right. - The Stop hook names only files inside the current project. A ledger holding another repository's paths, for any reason, cannot block here. - With no session id the hooks record nothing and block nothing. The shared local fallback name, the root of the cross-session leak, is gone. - SessionStart deletes the shared ledgers left by 2.9.6 and earlier …View on GitHub ↗ -
Release notes excerpt
The Stop hook no longer blocks you over files you did not edit. The hooks keyed their edit ledger on CLAUDE_SESSION_ID, which never reaches a hook process. Every session fell back to local, so every session wrote to one ledger. In 2.9.5 that ledger was shared by every project on the machine too, and a session was blocked over five files edited in two other repositories. 2.9.6 scoped the ledger per project; this release scopes it per session as well, using the session_id Claude Code passes to every hook on stdin. If you hit this on 2.9.5 or 2.9.6, the stale ledger can be removed: …View on GitHub ↗ -
Release notes excerpt
The kit is an MCP server now. Any MCP client can run its gates, not just read its doctrine. ```bash claude mcp add ux-ui-gates -- npx -y --package=ux-ui-agent-skills ux-ui-mcp ``` Six tools: list_gates, run_gate, review_ui for measuring, and get_doctrine, get_design_system, get_tokens for the rules and the source to build from. Doctrine before generating, review after. AGENTS.md already let Codex, Cursor and Copilot read the doctrine. This lets any client run the 52 gates, which reading cannot do. Plenty of things …View on GitHub ↗