Attach existing screenshots to a PR before-and-after block

Who it's for

This skill is for people who already have screenshots or screen recordings and want to attach them to a GitHub Pull Request as a before-and-after block. It is an agent skill: it only handles existing media and will not capture a page for you. It also fits people who already have agent-browser locally, and whose GitHub CLI is 2.99+ so they can use gh --attach.

It is not for people who have no media files yet and expect it to open a URL and record the screen. The source says it does not wrap agent-browser, does not scrape URLs, does not manage Vercel authentication, does not transcode video, and does not host media. If you cannot run npx yet, or the CLI version is too old, stop at reading the docs.

The official repository is https://github.com/vercel-labs/before-and-after Follow the commands already written on that page.

First try in 3 minutes

Follow only the one skill-install path the official docs write.

Prerequisites: this machine can run npx, agent-browser is installed, and GitHub CLI is 2.99 or newer. Confirm first: the command below will install the skill into the current agent. If you do not want to change the agent skill directory yet, do not run it. In this step do not attach to a real PR, and do not call gh --attach.

Where to install: after you confirm those side effects, run this at the project root:

npx skills add vercel-labs/before-and-after#main

Low-risk check: after install, ask the agent only to restate what it will do — attach existing screenshots and recordings to a PR before-and-after block, and only idempotently replace one <!-- before-and-after:start/end --> marker, leaving the rest of the description untouched. Do not let it modify the PR. Do not let it open a URL or convert video.

Success signal: the skill install finishes, and the agent can say it needs existing media, needs gh --attach, and admits it will not scrape or host files. If it starts recording the screen or invents other install commands, stop.

Use cases

Case 1: Add a before-and-after comparison to a PR that already has media. The official install command is npx skills add vercel-labs/before-and-after#main. After install, prepare the existing screenshots and recordings in the comment or description, then let the agent attach them. gh --attach will change the remote PR; before you run it, confirm this is a publicly discussable test PR and that the media paths really exist.

Case 2: On repeat runs, update only the marker block. The source says it idempotently replaces one <!-- before-and-after:start/end --> block and leaves the rest of the PR description untouched. This fits people who have already attached once and only want to swap the comparison area. First, read-only check whether the description already has that marker; if there is no marker, the source does not say how it would create a whole new description, so do not assume.

Limits

The dependencies are strict: you need agent-browser and GitHub CLI 2.99+ (for gh --attach). If either is missing, do not force an attach. It explicitly does not do these things: wrap agent-browser, scrape URLs, manage Vercel authentication, convert video, or host media.

Only one install command is written in the source, and it includes #main: npx skills add vercel-labs/before-and-after#main. Do not change it to a tag or installer that never appears. The official page is https://github.com/vercel-labs/before-and-after If an agent suggests a command that drops #main, treat that page as the source of truth.