PREvsPost

One command for visual PR reviews. Pre-post detects the routes your branch changed, screenshots them on production and on your dev server, and posts the diff as a single PR comment.

site.com
localhost:3000
Juan Gabriel's project
Claude Codev2.1.14Welcome back Juan Gabriel!Opus 4.5 · ~/code/pre-post

How it works

  1. Make your UI changes
  2. Say /pre-post in Claude Code, or run pre-post pr
  3. Pre-post diffs your branch against main, then follows the import graph to every route you touched
  4. It captures each route twice — production (Pre) and your dev server (Post), desktop and mobile
  5. It pixel-diffs each pair and crops the changed region
  6. One sticky comment lands on the PR, updated in place on every run

Next.js App and Pages Router, Vite, and monorepos are detected automatically. The Pre side can be any reachable URL — Vercel, Netlify, or your own host.

What's different

Pre-post started as a fork of Vercel's before-and-after. The original required you to manually pass two URLs. Pre-post reads your git diff, detects which routes changed, captures both sides automatically — desktop and mobile, at 2x retina — then pixel-diffs each pair and posts a single comment on the PR.

Under the hood, it uses Playwright instead of Vercel's agent-browser. It freezes the clock, finishes animations, and waits for fonts, images, and layout to settle before each capture, so a screenshot only changes when the page does.

Install

For your terminal. Nothing to install — the first run pulls the CLI and Chromium, then reuses them.

npx -y @juangadm/pre-post@latest pr

Needs Node 20+, a GitHub token (gh auth login or GH_TOKEN), and an open PR. Stuck? Run doctor.

Add Skill

Show Claude Code how and when to take pre and post screenshots. The skill runs the one command and reports the summary and the comment link — it never opens the images, so screenshots stay out of the model's context. Say /pre-post after a UI change.

npx skills add juangadm/pre-post -y

Easiest way in. Install once, then never type a flag. No npm knowledge needed — just Node 20+.

Options

First run in a repo — the production URL is saved to .pre-post.json

pre-post pr --before https://acme.com

Skip detection and name the routes yourself

pre-post pr --routes /pricing,/docs

Custom viewports (default is desktop + mobile)

pre-post pr --viewports desktop,1440x900

Capture and diff locally without posting anything

pre-post pr --dry-run

Machine-readable output

pre-post pr --json

Compare any two URLs, no PR involved

pre-post https://acme.com http://localhost:3000 --routes /pricing

Use existing images instead of capturing URLs

pre-post before.png after.png

Check which routes this branch touches, or why a run cannot start

pre-post detect
pre-post doctor

Sign in once to a protected site — the session is reused

pre-post login https://staging.acme.com

Clean up old screenshots

pre-post prune --days 90

Screenshots are published to a pre-post-assets branch in the same repository, one commit per run, and served via GitHub blob URLs. Nothing is committed to the PR branch, so no CI runs, and the images render on private repos. prune removes images for PRs closed more than 90 days ago.

Acknowledgements

Built on before-and-after by James Clements at Vercel Labs.

FAQ

What is pre-post?
pre-post is a visual diff tool for pull requests. One command detects the routes your branch changed, captures them on production and on your dev server at desktop and mobile in 2x retina quality, pixel-diffs each pair, and posts a single comment on the PR.
How do I install pre-post?
Two ways, neither permanent. In Claude Code: npx skills add juangadm/pre-post -y once, then say /pre-post. In a terminal: npx -y @juangadm/pre-post@latest pr. Both need Node 20+ and a GitHub token, from gh auth login or GH_TOKEN.
How does pre-post work?
Make your UI changes, then say /pre-post in Claude Code or run pre-post pr. It diffs your branch against main and follows the import graph to every affected route, screenshots each one on production (Pre) and your dev server (Post), pixel-diffs them, publishes the images to a pre-post-assets branch, and updates one sticky comment on the PR.
What makes pre-post different from before-and-after?
pre-post is a fork of Vercel Labs' before-and-after. The original required manually passing two URLs. pre-post detects the changed routes from your git diff, captures desktop and mobile at 2x retina, pixel-diffs each pair, and posts the result to the PR itself. It uses Playwright with a frozen clock, finished animations, and settled fonts and layout, so a screenshot only changes when the page does.