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