Change review

Reviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.

How to use it

Claude Code
  1. Run the line below. It pulls the whole folder into ~/.claude/skills/interface-review, including the files SKILL.md points to.
  2. Describe your job in plain words. Claude Code follows the skill from there.
Claude Code — installs the whole folder, not just SKILL.md
npx degit jakubkrehel/skills/skills/interface-review#main ~/.claude/skills/interface-review

For one project only, change the path to .claude/skills/interface-review. This skill also uses scope-resolution.md, removed-signals.md, pnpm-lock.yaml — copying SKILL.md alone won't be enough. See the folder on GitHub.

Claude (web or desktop app)
  1. On this page open ⋯ → Download .md.
  2. Save it as SKILL.md in a folder, zip the folder, then Customize → Skills → + → Create skill → Upload a skill.
  3. Pick the file and Save. Claude shows the name and description and runs a security scan.
  4. Check the skill is switched on.
  5. Start a new chat and describe your job in plain words. The AI follows the skill from there.
ChatGPT or another app
  1. ChatGPT: make a Project and paste it into Instructions.
  2. Neither? Paste it at the top of a new chat — it works for that chat.
Not working?
  • Check which app you pasted it into — the steps above name the right one.
  • Some skills need the paid tier of Claude or ChatGPT.
Step-by-step guide with screenshots · Ask in the forum

Paste into Claude, ChatGPT or Cursor.

Source of Change review

Show the full text155 lines
namedisable-model-invocationdescription
interface-reviewtrueReviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.

Change review

This skill reviews a change rather than a screen. It resolves the scope, expands the changed files to the surfaces they affect, reads both sides of the diff and classifies every finding.

Scope is all it owns. Domain rules belong to the better-* skills. Severity, consolidation, coverage, the cap and the verdict belong to better-interface, which this skill hands the review to.

Correctness, tests, security and performance belong to the project's general code review. Name the concern once and move on.

The change, not the codebase

The author is asking "did I make this worse?". Report what the change caused and stay mostly quiet about what it merely touched. Three pre-existing findings is a courtesy; thirty is a different review and one nobody asked for.

Read the change before forming an opinion of it. The stated intent decides what counts as incomplete, and a skimmed diff produces findings about code the next hunk already fixed.

Core principles

1. Resolve the change scope first

The whole invocation is the target, so /interface-review pr 482 reviews pull request 482. Scope resolution holds the accepted targets and how each resolves.

With no target supplied, resolve in this order and stop at the first match:

  1. HEAD is ahead of git merge-base origin/<default-branch> HEAD: that range plus any uncommitted changes, with the commit count and the uncommitted file count stated separately.
  2. The working tree is dirty: the uncommitted changes.
  3. Neither: there is no change to review. Stop and ask, per With no change, ask rather than invent one.

Order matters. Check the working tree first and one stray formatting edit shadows a twelve-commit branch, with the report still claiming full coverage.

Exclude lockfiles, snapshots, generated output, vendored code and binaries, and name what you excluded. An empty scope after exclusions reaches the same place by a different route.

2. With no change, ask rather than invent one

A clean tree with nothing ahead of the merge base means the user asked to review a change that does not exist. Never fall back to HEAD~1..HEAD on your own. The last commit is whatever happened to land, often a merge, often someone else's work, and a report on it is indistinguishable from a report on what the user meant.

State the repository facts you found, then offer the routes and wait. Nothing to review holds the facts to gather:

  • The last commit, HEAD~1..HEAD, named by short SHA and subject, so the user sees what they would get before choosing it.
  • A target they name: pr <n>, a branch, a ref, or a range, resolved per Resolve the change scope first.
  • A whole-repository interface audit, which is not a change review. Hand it to better-interface as a repository-scope review, without this skill's scope block, statuses, or pre-existing section. With no change, every finding is pre-existing and the classification says nothing.

Check for an open pull request on the current branch before asking, and offer it first. A branch whose commits already landed resolves to no change, while its pull request is still exactly what the user meant.

Where the scope emptied out after exclusions, say which files were excluded and ask the same way. Never report a review of nothing as Approve.

3. A diff is not a surface

A changed file is evidence, not the review subject. Its blast radius is the set of surfaces it renders in; review those.

Expand the blast radius one hop by default: the direct importers and callers. Expand a second hop only for design tokens, theme values and shared primitives, where one line reaches the whole product.

Review at most five consumers, ordered by the rule in Scope resolution, then state how many you did not expand. A sweep with no bound cannot support the coverage it claims, and an unstated cutoff reads as completeness.

4. Read the removed lines

Regressions are invisible in the post-change state. Read the - side of every hunk against Removed signals.

A signal is a lead, not a finding. A removal is only a regression when nothing in the change replaces it, and the domain skill owns that judgement. Route each unmatched removal to its owner, report only what that skill confirms and status it Regression. That tells the author they broke something that worked rather than made a new mistake.

5. Classify every finding

Give every finding one status:

  • Introduced: the change created it.
  • Regression: the change weakened something previously correct.
  • Pre-existing: present in the touched code but not caused by this change.

Status by what the diff touched, not by which file it sits in: a line the change never touched is Pre-existing even three lines from a hunk. Confirm against the base ref when it matters:

git blame -L <line>,<line> "$BASE" -- path/to/file

Hand every finding up with its status attached and let better-interface apply its cap and verdict rules.

6. Hold the change to its stated intent

Read the pull request title and body, the linked issue and the commit messages, then review whether the interface delivers what they claim.

This is what surfaces the incomplete change. A surface review cannot see it, because it inspects the states that are present, and here the point is the ones that are absent:

  • A new variant, size, or theme applied to some states but not all: hover, focus, active, disabled, loading, selected.
  • A new user-facing string with no entry in the translation catalogue the project maintains.
  • A new component with no empty, loading, error, disabled, or narrow-width state.
  • A control added to one surface but not to the siblings that already carry its peers.

Do not report scope creep. Whether a change does too much is a process question, not an interface one.

7. Hand the review to better-interface

Hand better-interface the scope block, the affected surfaces and a status on every finding. It routes to the domain skills, applies severity, consolidates, enforces the cap and issues the verdict.

If better-interface is unavailable, report the resolved scope and the file inventory, name it as the missing skill and stop. Do not invent a severity scale, a cap, or a verdict.

8. Never mutate the working tree

A change review is read-only, including the checkout. Fetch pull request refs; never check them out. git fetch writes only to .git and is permitted. gh pr checkout, git checkout, git switch and git stash rewrite the files the author has open. They fail against local edits or discard them, so they are never permitted.

Rendered verification is opt-in. Mark visual and runtime claims Not verified unless the project exposes a cheap preview or the user asks for a rendered review. When they do, use an isolated worktree (git worktree add /tmp/review-<n> refs/remotes/pr/<n>) and remove it when done.

Before you finish

Mistake Fix
One stray edit reviewed instead of the branch Check merge-base before the working tree, and report both counts
The last commit reviewed because there was no change State the facts and offer the last commit, a named target, or a repository audit
Hunks reviewed without their consumers Expand one hop, two for tokens and primitives, and name what you skipped
Only the + side of the diff read Search the - side for removed accessibility, focus, motion and text signals
An equivalent replacement reported as a regression Route the removal to its owner; report only what it confirms
A removal reported as a new mistake Status it Regression so the author knows it used to work
A line near a hunk statused Introduced Status by what the diff touched, confirmed with git blame against the base ref
A pull request checked out to review it Fetch the ref and review it in place
Line numbers cited that do not exist on the reviewed ref Cite against the head ref named in the scope block
The severity scale or the finding cap restated here Defer to better-interface
Correctness, test, or security findings in the report Name the concern once, point at the project's code review and drop it

Review output format

Open with the scope block:

Field Value
Target branch, working, staged, pr 482, or the range as entered
Base ref origin/main at a1b2c3d
Head ref refs/remotes/pr/482 at e4f5g6h
Commits 7 committed, 2 files uncommitted
Files in scope 12 after exclusions
Excluded pnpm-lock.yaml, src/__snapshots__/: lockfile and snapshots
Surfaces expanded CheckoutPage, SettingsPanel; 3 further Button consumers not expanded

The coverage table follows it unchanged. A domain with no evidence in the change scope is Not reviewed: no evidence in the change scope, which is a coverage statement rather than a gap.

Then the findings, with a Status column per Classify every finding:

Severity Domain Status Location Before After Why
HIGH Accessibility Regression src/Dialog.tsx:42 aria-label="Close" removed in this change Restore aria-label="Close" on the icon-only control The close control had an accessible name before this change and no longer does

With no Introduced or Regression findings, omit the table and state "No actionable interface findings in this change."

Then Pre-existing findings, at most three, highest severity first, stated plainly as not this change's responsibility. Omit the section when there are none.

Severity Domain Location Issue
MEDIUM Typography src/Toolbar.tsx:7 Numeric badges use proportional figures; predates this change

The cap and the verdict cover Introduced and Regression only. Pre-existing findings sit outside the cap, so touching a legacy file cannot turn into a full-file audit. They sit outside the verdict too, so a change whose only findings are pre-existing is an Approve.

End with Block when any HIGH remains and Approve otherwise, leaving the remaining findings in the table as work to do. When better-interface is available, the severity scale and the cap come from it.

1---
2name: interface-review
3disable-model-invocation: true
4description: Reviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.
5---
6 
7# Change review
8 
9This skill reviews a change rather than a screen. It resolves the scope, expands the changed files to the surfaces they affect, reads both sides of the diff and classifies every finding.
10 
11Scope is all it owns. Domain rules belong to the `better-*` skills. Severity, consolidation, coverage, the cap and the verdict belong to `better-interface`, which this skill hands the review to.
12 
13Correctness, tests, security and performance belong to the project's general code review. Name the concern once and move on.
14 
15## The change, not the codebase
16 
17The author is asking "did I make this worse?". Report what the change caused and stay mostly quiet about what it merely touched. Three pre-existing findings is a courtesy; thirty is a different review and one nobody asked for.
18 
19Read the change before forming an opinion of it. The stated intent decides what counts as incomplete, and a skimmed diff produces findings about code the next hunk already fixed.
20 
21## Core principles
22 
23### 1. Resolve the change scope first
24 
25The whole invocation is the target, so `/interface-review pr 482` reviews pull request 482. [Scope resolution](scope-resolution.md) holds the accepted targets and how each resolves.
26 
27With no target supplied, resolve in this order and stop at the first match:
28 
291. `HEAD` is ahead of `git merge-base origin/<default-branch> HEAD`: that range **plus** any uncommitted changes, with the commit count and the uncommitted file count stated separately.
302. The working tree is dirty: the uncommitted changes.
313. Neither: there is no change to review. Stop and ask, per **With no change, ask rather than invent one**.
32 
33Order matters. Check the working tree first and one stray formatting edit shadows a twelve-commit branch, with the report still claiming full coverage.
34 
35Exclude lockfiles, snapshots, generated output, vendored code and binaries, and name what you excluded. An empty scope after exclusions reaches the same place by a different route.
36 
37### 2. With no change, ask rather than invent one
38 
39A clean tree with nothing ahead of the merge base means the user asked to review a change that does not exist. Never fall back to `HEAD~1..HEAD` on your own. The last commit is whatever happened to land, often a merge, often someone else's work, and a report on it is indistinguishable from a report on what the user meant.
40 
41State the repository facts you found, then offer the routes and wait. [Nothing to review](scope-resolution.md#nothing-to-review) holds the facts to gather:
42 
43- **The last commit**, `HEAD~1..HEAD`, named by short SHA and subject, so the user sees what they would get before choosing it.
44- **A target they name**: `pr <n>`, a branch, a ref, or a range, resolved per **Resolve the change scope first**.
45- **A whole-repository interface audit**, which is not a change review. Hand it to `better-interface` as a repository-scope review, without this skill's scope block, statuses, or pre-existing section. With no change, every finding is pre-existing and the classification says nothing.
46 
47Check for an open pull request on the current branch before asking, and offer it first. A branch whose commits already landed resolves to no change, while its pull request is still exactly what the user meant.
48 
49Where the scope emptied out after exclusions, say which files were excluded and ask the same way. Never report a review of nothing as `Approve`.
50 
51### 3. A diff is not a surface
52 
53A changed file is evidence, not the review subject. Its **blast radius** is the set of surfaces it renders in; review those.
54 
55Expand the blast radius one hop by default: the direct importers and callers. Expand a second hop only for design tokens, theme values and shared primitives, where one line reaches the whole product.
56 
57Review at most five consumers, ordered by [the rule in Scope resolution](scope-resolution.md#expanding-to-consumers), then state how many you did not expand. A sweep with no bound cannot support the coverage it claims, and an unstated cutoff reads as completeness.
58 
59### 4. Read the removed lines
60 
61Regressions are invisible in the post-change state. Read the `-` side of every hunk against [Removed signals](removed-signals.md).
62 
63A signal is a lead, not a finding. A removal is only a regression when nothing in the change replaces it, and the domain skill owns that judgement. Route each unmatched removal to its owner, report only what that skill confirms and status it `Regression`. That tells the author they broke something that worked rather than made a new mistake.
64 
65### 5. Classify every finding
66 
67Give every finding one status:
68 
69- `Introduced`: the change created it.
70- `Regression`: the change weakened something previously correct.
71- `Pre-existing`: present in the touched code but not caused by this change.
72 
73Status by what the diff touched, not by which file it sits in: a line the change never touched is `Pre-existing` even three lines from a hunk. Confirm against the base ref when it matters:
74 
75```bash
76git blame -L <line>,<line> "$BASE" -- path/to/file
77```
78 
79Hand every finding up with its status attached and let `better-interface` apply its cap and verdict rules.
80 
81### 6. Hold the change to its stated intent
82 
83Read the pull request title and body, the linked issue and the commit messages, then review whether the interface delivers what they claim.
84 
85This is what surfaces the **incomplete** change. A surface review cannot see it, because it inspects the states that are present, and here the point is the ones that are absent:
86 
87- A new variant, size, or theme applied to some states but not all: hover, focus, active, disabled, loading, selected.
88- A new user-facing string with no entry in the translation catalogue the project maintains.
89- A new component with no empty, loading, error, disabled, or narrow-width state.
90- A control added to one surface but not to the siblings that already carry its peers.
91 
92Do not report scope creep. Whether a change does too much is a process question, not an interface one.
93 
94### 7. Hand the review to `better-interface`
95 
96Hand `better-interface` the scope block, the affected surfaces and a status on every finding. It routes to the domain skills, applies severity, consolidates, enforces the cap and issues the verdict.
97 
98If `better-interface` is unavailable, report the resolved scope and the file inventory, name it as the missing skill and stop. Do not invent a severity scale, a cap, or a verdict.
99 
100### 8. Never mutate the working tree
101 
102A change review is read-only, including the checkout. Fetch pull request refs; never check them out. `git fetch` writes only to `.git` and is permitted. `gh pr checkout`, `git checkout`, `git switch` and `git stash` rewrite the files the author has open. They fail against local edits or discard them, so they are never permitted.
103 
104Rendered verification is opt-in. Mark visual and runtime claims **Not verified** unless the project exposes a cheap preview or the user asks for a rendered review. When they do, use an isolated worktree (`git worktree add /tmp/review-<n> refs/remotes/pr/<n>`) and remove it when done.
105 
106## Before you finish
107 
108| Mistake | Fix |
109| --- | --- |
110| One stray edit reviewed instead of the branch | Check `merge-base` before the working tree, and report both counts |
111| The last commit reviewed because there was no change | State the facts and offer the last commit, a named target, or a repository audit |
112| Hunks reviewed without their consumers | Expand one hop, two for tokens and primitives, and name what you skipped |
113| Only the `+` side of the diff read | Search the `-` side for removed accessibility, focus, motion and text signals |
114| An equivalent replacement reported as a regression | Route the removal to its owner; report only what it confirms |
115| A removal reported as a new mistake | Status it `Regression` so the author knows it used to work |
116| A line near a hunk statused `Introduced` | Status by what the diff touched, confirmed with `git blame` against the base ref |
117| A pull request checked out to review it | Fetch the ref and review it in place |
118| Line numbers cited that do not exist on the reviewed ref | Cite against the head ref named in the scope block |
119| The severity scale or the finding cap restated here | Defer to `better-interface` |
120| Correctness, test, or security findings in the report | Name the concern once, point at the project's code review and drop it |
121 
122## Review output format
123 
124Open with the scope block:
125 
126| Field | Value |
127| --- | --- |
128| Target | `branch`, `working`, `staged`, `pr 482`, or the range as entered |
129| Base ref | `origin/main` at `a1b2c3d` |
130| Head ref | `refs/remotes/pr/482` at `e4f5g6h` |
131| Commits | 7 committed, 2 files uncommitted |
132| Files in scope | 12 after exclusions |
133| Excluded | `pnpm-lock.yaml`, `src/__snapshots__/`: lockfile and snapshots |
134| Surfaces expanded | `CheckoutPage`, `SettingsPanel`; 3 further `Button` consumers not expanded |
135 
136The coverage table follows it unchanged. A domain with no evidence in the change scope is `Not reviewed: no evidence in the change scope`, which is a coverage statement rather than a gap.
137 
138Then the findings, with a `Status` column per **Classify every finding**:
139 
140| Severity | Domain | Status | Location | Before | After | Why |
141| --- | --- | --- | --- | --- | --- | --- |
142| HIGH | Accessibility | Regression | `src/Dialog.tsx:42` | `aria-label="Close"` removed in this change | Restore `aria-label="Close"` on the icon-only control | The close control had an accessible name before this change and no longer does |
143 
144With no `Introduced` or `Regression` findings, omit the table and state "No actionable interface findings in this change."
145 
146Then `Pre-existing` findings, at most three, highest severity first, stated plainly as not this change's responsibility. Omit the section when there are none.
147 
148| Severity | Domain | Location | Issue |
149| --- | --- | --- | --- |
150| MEDIUM | Typography | `src/Toolbar.tsx:7` | Numeric badges use proportional figures; predates this change |
151 
152The cap and the verdict cover `Introduced` and `Regression` only. `Pre-existing` findings sit outside the cap, so touching a legacy file cannot turn into a full-file audit. They sit outside the verdict too, so a change whose only findings are pre-existing is an `Approve`.
153 
154End with `Block` when any `HIGH` remains and `Approve` otherwise, leaving the remaining findings in the table as work to do. When `better-interface` is available, the severity scale and the cap come from it.
155 

Discussion

Alternatives

Also in Interface designSee all 106 in Design →
Frontend designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.Design & UI · Apache-2.0ImpeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.Design & UI · Apache-2.0Apple designApple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.Design & UI · MITBuilding AnimationsBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.Design & UI · MIT