UX/UI Agent Skills
A kit of skills, tokens and rules that turns Claude into a design architect: DTCG tokens, components, accessibility and objective quality gates
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The kit is only instructions, tokens and references, with no runtime
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/ux-ui-agent-skillsDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run one by one in the Claude Code chat
/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skillsInstall as a Claude Code plugin: /plugin marketplace add plugin87/ux-ui-agent-skills, then /plugin install ux-ui-agent-skills@ux-ui-agent-skills. Or drop it into a project: npx ux-ui-agent-skills init.
Other ways from the author
/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skillsSkills, commands and the agent become available in any 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.
Security check
- The kit is only instructions, tokens and references, with no runtime
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.
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.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys