UI Ux Suite

English · 简体中文 · 日本語 · Español · Français

ESLint for design. It finds the exact line, the measured wrong value, and the exact fix.

  What it does · Install · Use it · What you get · Works in your editor · Good to know

What it does

Most design review tells you to improve your contrast. This tells you that .hero-subtitle on
line 14 of src/styles.css is #fbfbfb on #ffffff, which measures 1.03 to 1, and that
#767676 would pass. Same shape as a linter error, applied to design.

It reads your CSS, JSX, HTML and Tailwind classes. By default nothing is executed, nothing
leaves your machine, and no key is ever needed. Findings come in two kinds. A located finding,
which is most of what you act on, carries three things:

- Located. The file, the line and the selector.
- Measured. The real wrong value, not an adjective.
- Fixed. The exact before to after change, plus the WCAG criterion or named UX law it rests on.

The rest are project-level, like "5 font families, use 1 or 2". They score and they name the
problem, but there is no single line to point at.

Install

That is Claude Code. For any other agent that reads the Agent Skills format, install the 14
skills straight from this repo:

The command-line tool needs no install step: npx ui-ux-suite . runs it.

Or add it as a dev dependency

Requires Node 18 or newer. Zero runtime dependencies, so this pulls nothing else.

Use it

1. Point it at a project.

You get a ranked list of findings and a weighted score out of 10 across 12 dimensions. No
config file, no setup step.

2. Read a finding. This is real output from the broken fixture shipped in this repo, which
scores 3.7 out of 10 because it is supposed to:

Run it yourself with npx ui-ux-suite test/fixtures/planted-ux-problems from a checkout.

3. Put it in CI. Pick the…