Before-After Screenshot Skill
Package: @vercel/before-and-after
Never use before-and-after (wrong package).
Agent Behavior Rules
DO NOT:
-
Switch git branches, stash changes, start dev servers, or assume what "before" is
-
Use --full unless user explicitly asks for full page / full scroll capture
DO:
-
Use --markdown when user wants PR integration or markdown output
-
Use --mobile / --tablet if user mentions phone, mobile, tablet, responsive, etc.
-
Assume current state is After
-
If user provides only one URL or says "PR screenshots" without URLs, ASK: "What URL should I use for the 'before' state? (production URL, preview deployment, or another local port)"
Execution Order (MUST follow)
-
Pre-flight — which before-and-after || npm install -g @vercel/before-and-after
-
Protection check — if .vercel.app URL: curl -s -o /dev/null -w "%{http_code}" "<url>" (401/403 = protected)
-
Capture — before-and-after "<before-url>" "<after-url>"
-
Upload — ./scripts/upload-and-copy.sh <before.png> <after.png> --markdown
-
PR integration — optionally gh pr edit to append markdown
Never skip steps 1-2.
Quick Reference
Basic usage
before-and-after <before-url> <after-url>
With selector
before-and-after url1 url2 ".hero-section"
Different selectors for each
before-and-after url1 url2 ".old-card" ".new-card"
Viewports
before-and-after url1 url2 --mobile # 375x812 before-and-after url1 url2 --tablet # 768x1024 before-and-after url1 url2 --full # full scroll
From existing images
before-and-after before.png after.png --markdown
Via npx (use full package name!)
npx @vercel/before-and-after url1 url2
Flag Description
-m, --mobile
Mobile viewport (375x812)
-t, --tablet
Tablet viewport (768x1024)
--size <WxH>
Custom viewport
-f, --full
Full scrollable page
-s, --selector
CSS selector to capture
-o, --output
Output directory (default: ~/Downloads)
--markdown
Upload images & output markdown table
--upload-url <url>
Custom upload endpoint (default: 0x0.st)
Image Upload
Default (0x0.st - no signup needed)
./scripts/upload-and-copy.sh before.png after.png --markdown
GitHub Gist
IMAGE_ADAPTER=gist ./scripts/upload-and-copy.sh before.png after.png --markdown
Vercel Deployment Protection
If .vercel.app URL returns 401/403:
-
Check Vercel CLI: which vercel && vercel whoami
-
If available: vercel inspect <url> to get bypass token
-
If not: Tell user to provide bypass token, take manual screenshots, or disable protection
PR Integration
Check for gh CLI
which gh
Get current PR
gh pr view --json number,body
Append screenshots to PR body
gh pr edit <number> --body "<existing-body>
Before and After
<generated-markdown>"
If no gh CLI: output markdown and tell user to paste manually.
Error Reference
Error Fix
command not found
npm install -g @vercel/before-and-after
could not determine executable
Use npx @vercel/before-and-after (full name)
401/403 on .vercel.app See Vercel protection section
Element not found Verify selector exists on page