before-and-after

name	before-and-after
description	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.
allowed-tools	["Bash(npx @vercel/before-and-after *)","Bash(before-and-after *)","Bash(which before-and-after)","Bash(npm install -g @vercel/before-and-after)","Bash(*/upload-and-copy.sh *)","Bash(curl -s -o /dev/null -w *)","Bash(gh pr view *)","Bash(gh pr edit *)","Bash(vercel inspect *)","Bash(vercel whoami)","Bash(which vercel)","Bash(which gh)"]

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)