PREvsPost

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

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
  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 pre/post 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 as a dev dependency

npm install -D @juangadm/pre-post

Add Skill

Show Claude Code how and when to take pre and post screenshots. 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 pre and post

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

Override the default upload method

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

By default, screenshots are committed directly to the PR branch (under .pre-post/) and served via GitHub blob URLs pinned to the commit SHA. Works for both public and private repos. Use --upload-url to override with a custom storage service.

Acknowledgements

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

FAQ

What is pre-post?
pre-post is a visual diff tool that captures before-and-after screenshots of web pages for pull requests. It reads your git diff, detects which routes changed, and screenshots them automatically at desktop and mobile viewports in 2x retina quality.
How do I install pre-post?
Install as a dev dependency with npm install -D @juangadm/pre-post. To add it as a Claude Code skill, run npx skills add juangadm/pre-post.
How does pre-post work?
Make your UI changes, then say /pre-post in Claude Code. It reads your git diff, detects which pages changed, screenshots each route comparing production vs your new version, and adds a comparison table to your 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 reads your git diff automatically, captures desktop and mobile at 2x retina, and uses Playwright for consistent screenshots with font loading and CSS animation freezing.