$ show vercel-labs/before-and-after
This repository provides an agent skill for attaching before/after screenshots and screen recordings to GitHub pull request descriptions. The core product is `skill/SKILL.md`, which instructs AI agents (like Claude Code) on a workflow: capture media using `agent-browser`, format them with the bundled zero-dependency script `skill/scripts/format.mjs`, and publish via `gh --attach`. The formatter generates deterministic markdown tables with image or video comparisons, and performs idempotent replacement of a marked block (`<!-- before-and-after:start/end -->`) in PR bodies, preserving all unrelated prose. The repository also includes a comprehensive verification suite (unit tests, local browser smoke, live GitHub smoke, and an agent smoke test) and a Next.js landing page at `site/`. The architecture is minimal: one dependency-free script, one skill document, and verification infrastructure. It does not wrap browser automation, capture, or media hosting—those are delegated to `agent-browser` and GitHub CLI.
The LLM identified 1 files worth highlighting for reuse:
A single-file, zero-dependency Node.js script that formats local media files (images and videos) into GitHub-compatible markdown tables with before/after or preview labels, and replaces a marked block in a PR body. It exports well-tested functions (`mediaKind`, `localRef`, `buildPairs`, `formatMarkdown`, `formatVideoTables`, `attachList`, `replaceMarkedBlock`) that are fully isolated and could be extracted into a standalone library for any tool that needs to inject content into a document with marker-based replacement. The script handles error cases (missing files, unsupported formats, whitespace in paths, incomplete/multiple markers) and is designed for idempotent operation.