Before And After

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 |