Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual…
Visual comparison of web pages or elements across two URLs or images. 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://, http://, 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 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)
don't have the plugin yet? install it then click "run inline in claude" again.