A Claude Code skill that turns a finished code change into a one-page visual review: before/after screenshots with arrow callouts, "how to reproduce" steps for both states, and the diff split into short annotated sections.
What you get
- Before and after screenshots, cropped to the same region, with labelled arrows pointing at exactly what moved.
- How to reproduce, with shared setup, then numbered steps and an "Expect" line for each side.
- Watch the change (optional): an embedded before/after walkthrough clip for flows that are easier to watch than to read.
- What changed in the code, 3 to 5 trimmed hunks grouped by intent, each with three bullets that say what and why.
- Two looks, Modern (plain, monochrome) and Classic (cream, serif, terracotta), switchable per viewer. Light and dark mode both handled.
- A single self-contained HTML file. Images are embedded, so it can be published as a Claude Code Artifact or opened straight from disk.
Example
https://github.com/user-attachments/assets/1f60c5ae-5b25-4c56-be1a-b35d79993f6b
More info
https://steveharrison.dev/reviewing-ai-work-with-change-previews
Install
git clone https://github.com/steveharrison/change-preview ~/.claude/skills/change-preview
Then in Claude Code, after finishing a change:
/change-preview ABC-123
or just "show changes" or "make a preview page for this change". The skill reads the diff, captures screenshots if the change is visible, writes a spec, builds the page and publishes it as a private Artifact (or writes a standalone HTML file if the Artifact tool is not available).
Adapting to your team
The skill is tracker-agnostic. It reads a ticket from whatever is connected (Jira or Linear MCP, gh pr view) and picks the base branch from the PR, the repo default, or an argument. If your team has fixed conventions (release branches by label, a specific dev server port, a mock toggle), add a short "Project conventions" section at the bottom of SKILL.md or put them in your repo's CLAUDE.md, where the skill will see them.
License
MIT
