ux-ui-agent-skills
Turn Claude into a Senior Design Architect — DTCG design tokens, 42 components, WCAG 2.2 accessibility, any-framework code, 138 design systems, and runnable skills.
The ux-ui-agent-skills plugin transforms Claude into a senior design architect with expertise in design systems, accessibility, and component engineering. It provides 19 runnable skills, 5 slash commands, DTCG-format design tokens, 42 component specifications, WCAG 2.2 accessibility validation, and framework adapters for React, Next.js, SwiftUI, Vue, Svelte, and more. The kit includes 138 brand-grade design systems, 44 objective validation gates, and an adversarial design-critic agent that reviews work for quality and accessibility compliance.
Key Features
Use Cases
- 01Generate accessible, token-driven React or Next.js components with all states and ARIA specifications
- 02Build complete product screens (dashboards, settings, billing) with consistent design tokens across light and dark themes
- 03Audit existing interfaces for WCAG 2.2 compliance, keyboard accessibility, and target size violations
- 04Create framework-agnostic design systems that port across React, Vue, SwiftUI, and native platforms
- 05Review UI work against Nielsen's 10 heuristics and accessibility standards with prioritized findings
- 06Prototype data visualizations with inline SVG charts driven by design tokens without chart libraries
Related Plugins
View moreandrej-karpathy-skills
A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
claude-mem
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
Understand-Anything
Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.
rtk
CLI proxy that reduces LLM token consumption by 60-90% on common dev commands. Single Rust binary, zero dependencies
ux-ui-agent-skills — FAQ
What is ux-ui-agent-skills?+
It's a Claude Code plugin that equips AI agents with design system expertise, providing runnable skills for component design, code generation, accessibility auditing, and design review across any framework.
How do I install the ux-ui-agent-skills plugin in Claude Code?+
Run '/plugin marketplace add plugin87/ux-ui-agent-skills' then '/plugin install ux-ui-agent-skills@ux-ui-agent-skills' in Claude Code. All 19 skills, 5 commands, and the design-critic agent become available in any project you open.
Can I use this without Claude Code?+
Yes, run 'npx ux-ui-agent-skills init' to drop the kit (CLAUDE.md, tokens, rules, skills) into any project folder. It works with any Claude-powered IDE that reads CLAUDE.md as project context.
Which frameworks and design systems does it support?+
It generates code for React, Next.js, SwiftUI, Vue, Svelte, Angular, Web Components, React Native, Flutter, and vanilla CSS. It maps to/from Material 3, Apple HIG, Fluent, Carbon, shadcn/ui, Radix, and 138 other design systems.
Does it require API keys or dependencies?+
No API keys required. For full validation (44 gates), install Playwright and Chrome locally with 'npm install' and 'npx playwright install chrome' to enable real-browser accessibility checks.
Is ux-ui-agent-skills free to use?+
Yes, it's released under the MIT License and free for commercial and personal use. The plugin and all design systems, tokens, and validation gates are included.
How do I install ux-ui-agent-skills?+
Open the source repository on GitHub and follow its README. ux-ui-agent-skills is a plugin — MCP Agents Market links you directly to the official repo.
Is ux-ui-agent-skills free?+
ux-ui-agent-skills is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.