A skill for Claude Code and Codex

UX bugs that pass code review, caught before they ship.

An agent changes your UI. ux-quality-check finds the surfaces the diff touches, then checks each one against 52 rules mined from real UX feedback. It reads the code and measures the live page at rest, on hover and on focus.

Try the bugs yourself Watch the promo

52rules in 6 groups, each with a code check, a browser check and a fix

244UX feedback items mined from past agent sessions and bug bash notes

3interaction states measured for every changed row: rest, hover, focus

0findings on a diff with no UI. It says so and stops

Watch it work

Under a minute: four of the bugs below, measured live. Captions are in the player menu.

Ten bugs it catches

Each one comes from real review feedback. Press Run check to see the skill's measurement on the live mini-app, then switch to Fixed and run it again. The measurements on this page come from the skill's own scripts/measure.js, inlined.

How it works

The skill checks only what the diff changed, runs only the rules that apply, and checks each finding once more before it reports it.

Find the change

Reads the diff. With no UI file, it says so and stops.

Map the surfaces

Tags each surface with its kinds: write, list, overlay…

Pick the rules

Runs each rule whose kinds match. The repo's own UI rules come first.

Read, then measure

Code first. Then boxes, gaps and shifts at rest, on hover and on focus.

Check and report

Re-measures each finding, and keeps defects the diff did not add apart.

// Load the skill's helpers, then measure a hover
await page.addScriptTag({ path: "scripts/measure.js" });
await page.evaluate(() => snapshot(".item", "rest"));
await page.hover("text=Your requests");
await page.evaluate(() => gaps(".item"));
// → [{ from: "Home", to: "Your requests", y: 0 }]
await page.evaluate(() => moved("rest", "hover"));
// → []   hover moved nothing

**Surface:** Sidebar nav, “Your requests” hovered
**Rule:** `no-cramped-controls`
**Evidence:** `gaps(".item")` at 1440px, row 2
hovered: y: 0 between “Home” (selected) and
“Your requests”. At rest the gap is also 0, but
only the selected row draws a box.
**Fix:** Add `gap: 2px` to the list.

The catalog

52 rules in six groups. Highlighted ids are the ten demonstrated above.

Feedback and state 12 rules

pending-writeloading-is-not-emptyrefresh-in-placeprogress-visible-elsewherekeep-user-inputdisabled-says-whystatus-is-visiblenot-color-aloneinteraction-statesconfirm-onceerrors-lead-to-fixlong-work-can-stop

Layout and spacing 16 rules

consistent-gutterssame-page-framealigned-edgescolumns-alignno-cramped-controlstext-fitsno-horizontal-overflowfits-the-viewportno-interaction-shifttoggle-stays-putlayer-orderoverlay-sizingpopover-anchoringclear-scroll-areasmobile-layouttargets-and-shift

Controls and icons 8 rules

icon-matches-actionno-decorative-iconsno-dead-controlsone-control-per-conceptone-selection-systemcontrol-fits-the-datahover-also-focus-touchno-native-dialogs

Content and forms 8 rules

no-empty-fillerlabels-name-the-actionsafe-traceable-defaultssame-data-same-viewreferences-link-outfilters-show-statechart-legibilityai-mark

Navigation 3 rules

navigation-keeps-placepage-titlessection-permalinks

Visual system 5 rules

type-tokenstheme-contrastno-edge-stripeno-nested-boxesno-stray-corners

Install

Add the marketplace, install the plugin, then ask your agent to "check the UX of this change" after a UI edit. Source on GitHub.

# Claude Code
claude plugin marketplace add ktmud/ux-quality-check-skill
claude plugin install ux-quality-check@ux-quality-check

# Codex
codex plugin marketplace add https://github.com/ktmud/ux-quality-check-skill
codex plugin add ux-quality-check@ux-quality-check