PREvsPost

Automatic visual diffs for PRs. Pre-post reads your git changes, figures out which pages changed, and screenshots them.

site.com
localhost
jamesvclements
jamesvclements
# Update the homepage

How it works

  1. Make your UI changes
  2. Say /pre-post in Claude Code
  3. Pre-post reads your git diff and detects which pages changed
  4. It screenshots each route — production vs your new version
  5. You review the screenshots
  6. Pre-post adds a before/after table to your PR

Works with localhost, Vercel preview deploys, Netlify, or any accessible URL.

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, and captures them automatically — desktop and mobile, at 2x retina quality.

Under the hood, it uses Playwright instead of Vercel's agent-browser. It waits for fonts to load and freezes CSS animations before each capture, so screenshots are consistent across runs.

Install

Install globally to use from anywhere

npm i -g pre-post

Add Skill

Show Claude Code how and when to take before and afters. The skill uses gh to detect the associated PR with your branch and Playwright for browser automation

npx skills add juangadm/pre-post
Options

Capture responsive screenshots (desktop + mobile)

pre-post compare --before-base url1 --after-base url2 --responsive

Compare specific routes

pre-post compare --before-base url1 --after-base url2 --routes /dashboard,/settings

Capture a specific element using a CSS selector

pre-post url1 url2 ".hero"

Use different selectors for before and after

pre-post url1 url2 ".old" ".new"

Capture at mobile (375x812), tablet (768x1024), or custom viewport

pre-post url1 url2 --mobile
pre-post url1 url2 --size 1920x1080

Capture the entire scrollable page

pre-post url1 url2 --full

Output a markdown table for PR descriptions

pre-post url1 url2 --markdown

Use existing images instead of capturing URLs

pre-post before.png after.png

Save to a custom location

pre-post url1 url2 --output ./screenshots

Upload to a custom image storage service

pre-post url1 url2 --upload-url my-s3-endpoint

By default, images are uploaded to 0x0.st. For heavy usage or sensitive captures, use your own upload handler.

Acknowledgements

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