before-and-after

Before and after is a tool that adds before and after screenshots to your PRs. Add it as a skill for your agent to call automatically or use it directly from the command line.

Install

Install globally to use from anywhere:

npm i -g @vercel/before-and-after

Basic Use

Capture any two URLs, protocol is optional:

before-and-after site.com localhost:3000

Add Skill

Show your agent how and when to take before and afters. The skill uses gh to detect the associated PR with your branch and (soon) vercel to bypass deployment protection when capturing from Vercel preview branches.

npx skills add vercel-labs/before-and-after

Options

Capture a specific element using a CSS selector:

before-and-after url1 url2 ".hero"

Use different selectors for before and after:

before-and-after url1 url2 ".old" ".new"

Capture at mobile (375×812), tablet (768×1024), or custom viewport:

before-and-after url1 url2 --mobile
before-and-after url1 url2 --size 1920x1080

Capture the entire scrollable page:

before-and-after url1 url2 --full

Output a markdown table for PR descriptions:

before-and-after url1 url2 --markdown

Use existing images instead of capturing URLs:

before-and-after before.png after.png

Mix URLs and images:

before-and-after before.png localhost:3000

Save to a custom location:

before-and-after url1 url2 --output ./screenshots

Upload to a custom image storage service:

before-and-after url1 url2 --upload my-s3-uploader

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