vercel-labs / before-and-after

The underlying tool, installed globally with npm i -g @vercel/before-and-after, captures two URLs (or two existing image files) and produces a side-by-side comparison — a specific CSS selector, a mobile or custom viewport, the full scrollable page, and a markdown table sized for a PR description are all supported as flags. The single skill wraps that CLI for an agent: it uses gh to find the pull request tied to the current branch and attaches the comparison there automatically, rather than requiring a person to run the command and paste the result in by hand.

Because it needs gh authenticated against the repository, this only works inside a project where the agent already has GitHub CLI access configured — there is nothing here for a project without one. The README also says the skill will use the vercel CLI to get past deployment protection on Vercel preview branches, marked "(soon)," so that path is not built yet.

READ THE FULL ANALYSIS＋

Where the images go. Unless a project supplies its own uploader with --upload, before-and-after sends every captured screenshot to 0x0.st, a public anonymous file host, to get a URL that GitHub can render — worth knowing before pointing it at anything that shouldn't leave your infrastructure, and the README itself flags this as the reason to bring your own uploader "for heavy usage or sensitive captures."

Our data marks this repository not official despite the vercel-labs org, and it has a single skill and no page grouping — there isn't a larger package around it to describe.