Before and after

Skill vijpatel7/favorite_skills_and_plugins/.agents/skills/before-and-after

My favorite/commonly used Claude Code skills & plugins + my personally created skills

Install

npx -y skills add vijpatel7/favorite_skills_and_plugins --skill before-and-after

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

4.0 KB, as published. Nobody here has run it

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