before-and-after

Visual comparison of web pages or elements across two URLs or images. Package: @vercel/before-and-after Never use before-and-after (wrong package). DO NOT: DO: Never skip steps 1-2. If .vercel.app URL returns 401/403: If no gh CLI: output markdown and tell user to paste manually. - Captures screenshots at desktop, mobile (375x812), or tablet (768x1024) viewports, with optional full-page scrolling - Supports CSS selectors to isolate specific elements, and accepts file://, https:// URLs or local image paths - Generates markdown-formatted output with automatic image upload to 0x0.st (or GitHub Gist) for easy PR integration - Includes Vercel deployment protection detection and GitHub CLI integration for direct PR body updates - 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 - 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)" - Pre-flight — which before-and-after || npm install -g @vercel/before-and-after - Protection check — if .vercel.app URL: curl -s -o...