Name: before-and-after
Author: vercel-labs

Imported from vercel-labs/before-and-after (AGENTS.md). Install upstream with npx skills add vercel-labs/before-and-after. Copyright stays with the author.

AGENTS.md

before-and-after is an agent skill that attaches screenshots and recordings to GitHub PR descriptions. Browser work belongs to agent-browser; uploads belong to gh --attach. This repo owns skill/SKILL.md, one formatter script, and the verification that proves they work.

skill/SKILL.md             the product
skill/scripts/format.mjs   the only shipped script (node builtins only)
tests/unit/                formatter invariants
tests/verification/        contract, browser, GitHub, and agent smokes (see VERIFICATION.md)
site/                      jm.sv/before-and-after

Rules

Do not add browser automation, Vercel authentication, capture, recording, video conversion, or media hosting. Delegate to the source tools.
skill/scripts/ stays dependency-free and single-file.
Formatter flags version with SKILL.md. Update both; pnpm verify:skill enforces it. No compatibility shims.
Images may use tables. Local videos stay on their own lines; video tables only take final user-attachments URLs.
Never touch PR prose outside .
Verify behaviour, not wording. A claim about GitHub or agent-browser belongs in a smoke that would fail if it stopped being true.
Keep the fixture PR (verification-fixture branch) open. Never merge it.

Commands

pnpm verify                                     # unit + contract + local browser smoke
VERIFY_GITHUB_MUTATION=1 pnpm verify:github     # live, against the fixture PR
VERIFY_GITHUB_MUTATION=1 VERIFY_AGENT=1 pnpm verify:agent
cd site && pnpm dev

Agentation Watch Mode

When the user says "watch mode", start a loop with agentation_watch_annotations:

Call agentation_watch_annotations and wait for annotations.
For each annotation: agentation_acknowledge, make the fix, then agentation_resolve with a short summary.
Continue watching until the user says stop or a timeout is reached.

Install before-and-after and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

{ "ocm": "1", "id": "vercel-labs-before-and-after-before-and-after", "kind": "skill", "name": "before-and-after", "description": "before-and-after is an agent skill that attaches screenshots and recordings to GitHub PR descriptions. Browser work belongs to `agent-browser`; uploads belong to `gh --attach`. This repo owns `skill/SKILL.md`, one formatter script, and the verification that proves they work.", "publisher": "vercel-labs", "version": "1.0.0", "capabilities": { "domains": [ "coding", "legal" ], "tags": [ "skill-md", "github-agents" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "before-and-after is an agent skill that attaches screenshots and recordings to GitHub PR descriptions. Browser work belongs to `agent-browser`; uploads belong to `gh --attach`. This repo owns `skill/SKILL.md`, one formatter script, and the verification that proves they work." ], "primary": false, "metadata": { "source": { "provider": "github-agents", "repository": "https://github.com/vercel-labs/before-and-after", "path": "AGENTS.md", "ref": "8306d34f459b6704e08e6adb5829fcddb0dc3557", "url": "https://github.com/vercel-labs/before-and-after/blob/8306d34f459b6704e08e6adb5829fcddb0dc3557/AGENTS.md", "key": "vercel-labs/before-and-after/AGENTS.md" } }, "instructions": "# AGENTS.md\n\nbefore-and-after is an agent skill that attaches screenshots and recordings to GitHub PR descriptions. Browser work belongs to `agent-browser`; uploads belong to `gh --attach`. This repo owns `skill/SKILL.md`, one formatter script, and the verification that proves they work.\n\n```text\nskill/SKILL.md the product\nskill/scripts/format.mjs the only shipped script (node builtins only)\ntests/unit/ formatter invariants\ntests/verification/ contract, browser, GitHub, and agent smokes (see VERIFICATION.md)\nsite/ jm.sv/before-and-after\n", "cost": { "context_tokens": 488 } }

before-and-after

About

AGENTS.md

Rules

Commands

Agentation Watch Mode

Install before-and-after and it becomes one more candidate the router can pick - when it fits.

Use it

Manifest

Reviews