Agent skill · design visual · vercel-labs
before-and-after
Add existing screenshots or screen recordings to a GitHub pull request as a before/after or preview block. Use when a PR needs visual media attached to its description. Browser navigation and capture belong to agent-browser.
Why this skill is useful
Adds specific commands and workflows for capturing and comparing web page screenshots that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. About 5k tokens when loaded. Last updated 2026-08-05. 208 stars on the source repository.
What this skill does
Add visual media to a PR Use agent-browser to create the screenshots or recordings. This skill only owns the GitHub PR attachment workflow. Capture 1. Load the version-matched core instructions with agent-browser skills get core --full and follow them for sessions, navigation, page state, screenshots, and recordings. 2. If a Vercel URL is protected, load agent-browser skills get protected-vercel-deployments --full. Do not reproduce its authentication workflow here. 3. Save media under the repository with paths that contain no whitespace, for example: The formatter supports PNG, JPEG, GIF, WebP, MP4, MOV, and WebM files. Use an --after file without a matching --before file for a net-new preview. Screen recordings agent-browser record start creates a fresh browser context. It preserves cookies and local storage, but an origin-scoped header used to open a protected Vercel Preview may not carry into that new context. Before recording a protected Preview: 1. Load agent-browser skills get protected-vercel-deployments --full. 2. Start the recording context on a blank page. 3. Apply the authentication method from that skill inside the recording context. 4. Navigate to the Preview only after authentication is active, then trim the navigation lead-in if necessary. Do not assume that a page which worked before record start will remain authenticated after it. Agent-browser 0.35.2 and 0.36.0 capture at a hardcoded 10 fps with no CLI or environment override. Inspect the installed version and its recording reference rather than assuming this stays true in later releases. Preserve the source cadence when transcoding: changing the container to 30 or 60 fps only duplicates frames and does not make motion smoother. For animation evidence that requires a higher real frame rate, use a genuinely higher-cadence capture path instead of upsampling agent-browser output. Equal-height image pairs GitHub vertically centers a shorter image inside a Markdown table cell. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills vercel-labs/skill