Repolode
Submit
plugin87

plugin87/ux-ui-agent-skills

A pure instruction and knowledge kit that turns Claude and other coding agents into a UX/UI design expert, with DTCG tokens, component specs, 138 design systems and 52 objective gates.

View on GitHubWebsite
Stars
2,375
Forks
253
Open issues
11
Last commit
21 hours ago

What is it?

UX/UI Agent Skills is a kit of structured instructions, design tokens, runnable skills and reference design systems that guide an AI coding agent through design work. It generates DTCG-format tokens organised in a Primitive, Semantic and Component tier, designs components from atoms to templates with anatomy, states and accessibility specs, and produces code for a range of frameworks through an adapter protocol, including React with Tailwind, Next.js, SwiftUI, Vue, Svelte and Flutter.

The project ships 52 gates that check output objectively. Around 34 of them open a headless browser to measure rendered HTML for WCAG contrast in each state, axe-core roles, keyboard operation, target size, reduced motion and horizontal overflow at narrow widths. The remaining checks read token files, component specs and source code for hardcoded values, emoji and destructive controls declared without intent. It also includes a 138-entry library of design systems and an MCP server that exposes the gates, doctrine and tokens to any MCP client.

Installation options include a Claude Code plugin, an npx command, Homebrew, and an AGENTS.md surface for Codex, Cursor, Copilot and Aider. Hooks that enforce rules automatically exist only on the Claude Code path.

Key features

  • 01Generates DTCG-format design tokens across a three-tier Primitive, Semantic and Component architecture.
  • 02Provides 52 objective checks, about 34 of which measure rendered pages in a headless browser.
  • 03Covers WCAG 2.2 contrast, keyboard operation, target size and reduced motion in its checks.
  • 04Ships a library of 138 named design systems for reference.
  • 05Adapts output to frameworks including React, Next.js, SwiftUI, Vue, Svelte and Flutter.
  • 06Exposes gates, doctrine and tokens through an MCP server.

Use cases

  • Having a coding agent design and build a new UI with consistent tokens and accessibility checks.
  • Auditing an existing interface for WCAG contrast, target size and overflow problems.
  • Adding a design-token pipeline and component specs to a team's front-end project.
  • Using a shared set of design-system references when migrating or mapping between systems.

Quick start

  1. 1

    Open Claude Code and install the kit as a Claude Code plugin (Option A in the README, two commands)

  2. 2

    Review docs/INSTALL.md to compare the other install routes (AGENTS.md for Codex and Cursor, MCP server, Homebrew, npx)

Things to know

  • The plugin install commands are cut off in the README excerpt, so the exact commands are not shown here.
  • Full browser-based gate verification opens a real browser, which adds setup beyond installing the kit.

Topics

#design-system#design-tokens#accessibility#wcag#ai-agents#claude-code#ui#tailwindcss#claude#claude-skills

FAQ

What is ux-ui-agent-skills?
A pure instruction and knowledge kit that turns Claude and other coding agents into a UX/UI design expert, with DTCG tokens, component specs, 138 design systems and 52 objective gates. UX/UI Agent Skills is a kit of structured instructions, design tokens, runnable skills and reference design systems that guide an AI coding agent through design work. It generates DTCG-format tokens organised in a Primitive, Semantic and Component tier, designs components from atoms to templates with anatomy, states and accessibility specs, and produces code for a range of frameworks through an adapter protocol, including React with Tailwind, Next.js, SwiftUI, Vue, Svelte and Flutter.
Is ux-ui-agent-skills free to use? What license does it have?
ux-ui-agent-skills is open source under the MIT license. Check the license terms before using it in commercial products.
Is ux-ui-agent-skills still maintained?
Actively maintained. The last commit to ux-ui-agent-skills was on Oct 19, 2026.
What can I use ux-ui-agent-skills for?
Having a coding agent design and build a new UI with consistent tokens and accessibility checks. Auditing an existing interface for WCAG contrast, target size and overflow problems. Adding a design-token pipeline and component specs to a team's front-end project. Using a shared set of design-system references when migrating or mapping between systems.
How do I install ux-ui-agent-skills?
Open Claude Code and install the kit as a Claude Code plugin (Option A in the README, two commands) Review docs/INSTALL.md to compare the other install routes (AGENTS.md for Codex and Cursor, MCP server, Homebrew, npx)
Where can I get ux-ui-agent-skills?
The source code and installation instructions are on GitHub: https://github.com/plugin87/ux-ui-agent-skills

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects