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.
Update the homepage
| Before | After |
|---|---|
site.com | site.com |
Install
Install globally to use from anywhere
npm i -g @vercel/before-and-afterBasic Use
Capture any two URLs, protocol is optional
before-and-after site.com localhost:3000Add 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-afterOptions
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 --mobilebefore-and-after url1 url2 --size 1920x1080Capture the entire scrollable page
before-and-after url1 url2 --fullOutput a markdown table for PR descriptions
before-and-after url1 url2 --markdownUse existing images instead of capturing URLs
before-and-after before.png after.pngMix URLs and images
before-and-after before.png localhost:3000Save to a custom location
before-and-after url1 url2 --output ./screenshotsUpload to a custom image storage service
before-and-after url1 url2 --upload my-s3-uploaderBy default, images are uploaded to 0x0.st. For heavy usage or sensitive captures, use your own upload handler.