ux-ui-agent-skills

What it does

ux-ui-agent-skills is a design-system kit for coding agents. It holds written rules on tokens, typography, components and accessibility, a set of DTCG token files, a library of brand design-system specs (2,144 by the current README), and 52 scripted checks that its makers call gates. The checks cover WCAG contrast in each state, keyboard use, target size, reduced motion, overflow, hardcoded colours and more. The same npm package also installs a small MCP server, the ux-ui-mcp program, which exposes that kit to any MCP client over stdio.

The server has six tools. Before writing UI, an assistant can pull the written rules by topic, the token source, or one brand spec. After writing it, the assistant can run one check or all the checks that apply to a set of paths and get back each check's raw output and exit code. The server does not summarise or score the output. Exit 0 means the check found nothing, 1 means it found a problem, and 2 means it could not run (a missing path, no browser, no theme). The server reports exit 2 as an error, never as a pass.

The server does not use the MCP SDK. Its makers implemented JSON-RPC over stdio directly against the 2025-06-18 protocol version so the package keeps zero dependencies. In the v2.10.0 source (mcp/server.mjs), each check runs as a child process (Node or Python, depending on the check) with a 300-second timeout, and DS_REQUIRE_BROWSER=1 is set on every call, so a render check with no browser fails instead of printing SKIPPED and exiting 0. The README does not mention the timeout.

Version 2.10.0 added an /observe skill and an npx ux-ui-skills observe report, fed by hooks that log session events on the machine (turned off with DS_OBSERVE=0). Those hooks come with the Claude Code install made by ux-ui-skills init. The MCP server's source neither reads DS_OBSERVE nor records anything.

What it needs

Node.js 20 or later with npx for the server (engines in package.json). Some checks are Python scripts, so python3 must be on PATH to run them. The render checks need a local Chrome. Run npx playwright install chrome once per machine, or call review_ui with skip_browser. No account or key is needed.

Limits

• Not covered Returns what the checks printed and does not turn failures into advice or a score.
• Not covered Its docs say no check measures taste or whether a design is good.
• Limit 34 of the 52 checks open a browser. Without Chrome they fail, and skip_browser runs only the file-reading checks, which cover less.
• Limit Each check run gets a 300-second timeout in the v2.10.0 source.
• Limit Paths that do not exist are refused with exit 2.
• Limit npx -y ux-ui-agent-skills ux-ui-mcp starts the installer CLI, so the package must be named with --package= or -p.

It returns what the checks printed and does not turn failures into advice or a score. Its docs say no check measures taste or whether a design is good. The render checks cannot run without a browser, and skip_browser runs only the file-reading checks, which cover less. The source gives each check a 300-second timeout. Paths that do not exist are refused. The docs warn that npx -y ux-ui-agent-skills ux-ui-mcp starts the installer CLI instead of the server. The package must be named with --package= or -p, as in the command below.

Who it suits

It suits developers who have an assistant generate front-end code and want objective accessibility and token-consistency checks run on that output locally, with results taken from real exit codes. It only reads design rules and runs checks on files you point it at. It does not open Figma or other design files, so pick a design-tool server for that. Without Chrome installed, about two thirds of the checks will not run. The kit also works as a Claude Code plugin or through AGENTS.md without MCP, if you only want the rules read. The /observe session report needs the Claude Code install and its hooks, not this server.