before-and-after

SKILL.md

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)