Run a quick interface usability review in Claude Code

List obvious accessibility, responsive, design-system, and state issues with their locations and fixes.

Install in Claude Code

A Claude Code workspace with the target component or page. The example includes a fictional mobile layout and project rules.

Review `.claude/skills/ux-review/SKILL.md` and its requirements at the pinned GitHub commit.
Create `.claude/skills/ux-review/` in your project and save the reviewed file as `.claude/skills/ux-review/SKILL.md`.
Start Claude Code from that project's root, then select `/ux-review` in the slash menu.

Example task

An event filter card fails on a narrow screen. The fixture is `{location:'FilterCard:12',width:520,viewport:360,label:'missing',state:'empty missing'}`. The input has no associated label and an empty search leaves the results blank.

What to check

Report `[width overflow, missing label, empty state]` with locations for the styling, input, and results. Suggest responsive width, an associated label, and a no-results message.

Original SKILL.md on GitHub · Updated 2026-11-14

Frequently asked question

How should I report a blank list, missing label, and narrow-screen overflow?

List the issue, location, and fix in separate columns. Identify the component and give a matching fix for the layout, label, or state.