before-and-after

★ 199

by vercel · part of vercel-labs/before-and-after

Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual diff", "PR screenshots", "compare old and new", or needs to document UI changes. Accepts two URLs (file://, http://, https://) or two image paths.

🔥🔥🔥✓ VerifiedFreeQuick setup

#automation #devops #git

🧰 Not standalone. This skill ships with vercel-labs/before-and-after and only works together with that tool — install the tool first, then add this skill.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

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

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

Copy & paste — that's it

npx skills add https://github.com/vercel-labs/before-and-after --skill before-and-after

Run this in your project — your agent picks the skill up automatically.

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