before-and-after

Installation

Summary

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

SKILL.md

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)"

Installs

978

Repository

GitHub Stars

198

First Seen

Feb 2, 2026

Security Audits