before-and-after

Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual diff", "PR screenshots", "compare old and new", or needs to document UI changes. Accepts two URLs (file://, http://, https://) or two image paths.

292stars10forksUpdated 8/20/2026

Web Development #screenshots #frontend #vercel #visual-diff #cli #pull-requests

Security Assessment

Low Risk(85/100)

Detected risks:

Uploads to Public Host(By default the skill uploads captured page screenshots to 0x0.st, an anonymous public paste host that requires no authentication, which could expose sensitive on-screen content if the images are not reviewed first., The default upload endpoint can be changed and alternative adapters for GitHub Gist and Vercel Blob are provided, and the upload is an intended, user-initiated feature rather than covert exfiltration.)

Shell and CLI Execution(The skill performs a global npm install of its package during pre-flight and invokes developer CLIs such as curl for HTTP status checks, gh for pull-request edits, and the Vercel CLI, all scoped to benign developer-facing operations.)

Security Score85/100

About before-and-after

Before-and-After captures before/after screenshots of web pages or specific elements for visual comparison, wrapping the @vercel/before-and-after npm package with an agent workflow. It solves the task of documenting UI changes for pull requests and visual diffs, accepting two URLs (file://, http://, https://) or two image paths and producing side-by-side output, optionally as a markdown table suitable for pasting into a PR body.

The skill defines a strict execution order: a pre-flight check that installs the package globally if missing, a protection check that curls .vercel.app URLs to detect 401/403 deployment protection, the capture step, an upload step, and optional PR integration via the gh CLI. It supports mobile, tablet, and custom viewports, CSS selectors (including different selectors for each side), and full-scroll capture. Captured images are uploaded through pluggable adapters, with 0x0.st as the default no-signup host and GitHub Gist or Vercel Blob as alternatives, then formatted into markdown and optionally appended to a pull request with gh pr edit. Behavior rules keep the agent from switching branches, stashing changes, or starting dev servers, and it assumes the current state is the 'after'.

It targets developers and reviewers who want quick PR screenshots or visual regression documentation. The tooling runs only benign, developer-facing shell operations (npm install, curl for HTTP status, gh, and vercel CLI checks). The one notable consideration is that the default upload path posts captured screenshots to an anonymous public paste host (0x0.st), which could expose UI content if screenshots contain sensitive data; this is an intended, user-initiated feature rather than covert exfiltration, and alternative adapters exist.

FAQ

What inputs does it accept?

Two URLs using file://, http://, or https://, or two local image paths. You can also pass a CSS selector to capture a specific element, and even different selectors for the before and after sides.

Which package does it use and how is it installed?

It uses @vercel/before-and-after (never the similarly named 'before-and-after' package). The pre-flight step runs 'which before-and-after' and installs it globally with npm if it is missing, or you can invoke it via npx with the full package name.

Where are the screenshots uploaded?

By default to 0x0.st, a public host that needs no signup, before the markdown table is generated. Alternative adapters for GitHub Gist and Vercel Blob are available via the IMAGE_ADAPTER environment variable. Because the default host is public, avoid uploading screenshots that contain sensitive information.

How does it handle protected Vercel preview deployments?

It curls .vercel.app URLs to check the HTTP status; a 401 or 403 signals deployment protection. It then checks for the Vercel CLI and can run 'vercel inspect' to obtain a bypass token, or asks the user to provide a token, take manual screenshots, or disable protection.

Can it attach the result to a pull request?

Yes. If the gh CLI is available it can read the current PR and append the generated markdown to the PR body with gh pr edit. If gh is not installed, it outputs the markdown for you to paste manually.