UX/UI Agent Skills plugin
A kit of skills, tokens and rules that turns Claude into a design architect: DTCG tokens, components, accessibility and objective quality gates
- 3,164 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The /gate command runs Node check scripts for accessibility, contrast, states and responsiveness
- npx ux-ui-agent-skills init writes files and CLAUDE.md into the project
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/ux-ui-agent-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The /gate command runs Node check scripts for accessibility, contrast, states and responsiveness
- npx ux-ui-agent-skills init writes files and CLAUDE.md into the project
This is third-party code. Review the repository files before installing.
What it does
This is a pure instruction and knowledge layer for the agent, with no runtime or dependencies. It gives Claude DTCG design tokens in a three-tier architecture, component specs, typography and color rules, WCAG 2.2 accessibility requirements, and a library of brand-grade design systems from which the agent builds UI for any framework. It ships runnable skills, commands and a critic agent, plus a set of objective gates that fail the build instead of faking success. It installs as a Claude Code plugin or drops into a project via npx, after which CLAUDE.md switches on the design expert role.
Who it is for. For designers and frontend developers who want consistent, accessible output from the agent rather than a page-by-page mismatch.
Good fit when
- You need design tokens and a theme with light and dark modes on one system
- You need to build a component or screen with all states and accessibility
- You need to review a UI and run objective quality gates
Not a fit when
- You need a ready component library as a package rather than an instruction layer for the agent
- The task is not about UI or a design system
Example request
Build a billing settings screen on one shared theme with light and dark modes and all statesLimitations
It is a set of instructions and references, not a runtime or a code library, and it does not ship ready components as a package. Output depends on the model that applies it. A plugin's root CLAUDE.md is not loaded as project context, so the house rules live in the design-doctrine skill. Some capabilities assume work inside Claude Code or another Claude-powered environment.
How to disable. Remove the plugin with claude plugin uninstall ux-ui-agent-skills and claude plugin marketplace remove ux-ui-agent-skills. If you added it via npx, delete the kit files it placed in the project.
FAQ
Is this a component library?
No. It is a layer of instructions, tokens and rules for the agent; it does not ship components as a package, the agent generates code for your framework.
What do the objective gates do?
The gate command runs a set of checks over accessibility, tokens and structure and reports the real result rather than an eyeballed success.
How are UX/UI Agent Skills different from a component library?
It is a pure layer of instructions and knowledge with no runtime or dependencies. It gives Claude DTCG design tokens with a three-tier architecture, component specs and rules for typography, color and accessibility.
How do I install UX/UI Agent Skills?
In Claude Code: /plugin marketplace add plugin87/ux-ui-agent-skills, then /plugin install. It also works in Cursor. No ready components ship, it is instructions and rules for the agent.
Discussion
No questions or reviews yet.
Related
PluginsTen UX and design skills for Claude Code, Cursor and Codex: research, critique, accessibility, design systems, UX writing
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
A skill and CLI for agents: UI without the templated look, 25 commands, rule-based anti-slop checks and a 0 to 100 quality score
A Claude skill that turns sites, images and Figma files into a design system: Markdown, DTCG tokens and element rebuild prompts
An MCP server and plugin to build UI with the agent: curated design systems, UI prompts and layout variations
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
README in short
The README describes the kit as a pure instruction and knowledge layer with no build, dependencies or runtime. Installation goes two ways: a Claude Code plugin in two commands, or npx init into the current project, plus a demo mode to preview without installing. It ships skills, the gate, critique, grill-me, ship and scaffold-project commands, a critic agent, and a library of brand-grade design systems. It shows example screens rendered from the same tokens and checked by the quality gates in light and dark themes. MIT licensed.