UI UX Audit Skill — Security skill for Claude Code

ui-ux-audit

A Claude skill that audits web UI for the failures AI consistently ships, measures the render instead of guessing, and raises landing pages, dashboards and analytics pages from competent to exceptional.

Almost every AI UI failure traces back to one root cause: the model generates a plausible static snapshot of a single state (the happy path, on desktop), it cannot see the rendered result, and it carries no persistent design system across generations. The output looks right in a screenshot and breaks the moment content grows, the viewport shrinks, an error occurs, or a second component is generated with slightly different padding. This skill forces all of that into view.

What it does

Three modes, chosen automatically from how you ask:

1. Full audit. "Run a full UI audit" or "is this ready to ship". Claude renders the page with the bundled measuring script (scripts/uicheck.py, Python Playwright) at 360, 768 and 1280px, walks the flow as the real user, a constrained user and an edge-case-data user, then sweeps 16 categories. The report gives a 0-100 score with the arithmetic shown, a ship verdict, findings by severity (Blocker 12, Critical 8, Warning 4, Polish 1, with Polish capped at 5 points), a visual-quality rating with concrete improvements, and the tools that stop each failure family returning.
2. Quick review. "Why does this card look off". Two to five findings, no score.
3. Build. When Claude creates or restyles a page, dashboard or report, it chooses a distinctive art direction, writes one global design system first (type scale, spacing, gutters, radii, control heights, media ratios), computes and double-checks every figure, then measures and fixes until the checks are clean.

The 16 categories: typography, layout and spacing, visual hierarchy, colour and contrast, component states, forms, touch, responsive behaviour, accessibility (WCAG 2.2), alignment and consistency, navigation and icons, motion, performance, visual quali