before-and-after

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}" "" (401/403 = protected) Capture — before-and-after "" "" 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 # 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 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 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 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 --body " ## Before and After " 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 Weekly Installs427Repositoryvercel-labs/bef…nd-afterGitHub Stars190First SeenFeb 2, 2026Security AuditsGen Agent Trust HubFailSocketFailSnykWarnInstalled oncodex368opencode352gemini-cli319github-copilot309cursor299claude-code298