Before-After Screenshot Skill

Package:

@vercel/before-and-after

Never use

before-and-after

(wrong package).

Agent Behavior Rules

• 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

• 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)

1. Pre-flight —

   which before-and-after || npm install -g @vercel/before-and-after

2. Protection check — if

   .vercel.app

   URL:

   curl -s -o /dev/null -w "%{http_code}" "<url>"

   (401/403 = protected)
3. Capture —

   before-and-after "<before-url>" "<after-url>"

4. Upload —

   ./scripts/upload-and-copy.sh <before.png> <after.png> --markdown

5. PR integration — optionally

   gh pr edit

   to append markdown

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

-m, --mobile

-t, --tablet

--size <WxH>

-f, --full

-s, --selector

-o, --output

--markdown

--upload-url <url>

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

.vercel.app

1. Check Vercel CLI:

   which vercel && vercel whoami

2. If available:

   vercel inspect <url>

   to get bypass token
3. 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>"

gh

Error Reference

command not found

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

could not determine executable

npx @vercel/before-and-after