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)

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

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:

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>"

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