SkillFoxx

before-and-after skill

A Vercel Labs skill puts a before and after block with screenshots and recordings into a pull request without touching other text

  • 425 ★ on the repository
  • Last commit
SkillOfficial

Extended access

Why this level

  • Through `gh pr edit` and `gh pr comment` the skill changes the PR description and uploads your files to GitHub, visible to everyone who can see the PR
  • Captures of protected pages can carry tokens and authenticated parameters into a public PR
All reasons and checks

vercel-labs/before-and-afterAuthor:Vercel Labs

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/before-and-after

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • Through `gh pr edit` and `gh pr comment` the skill changes the PR description and uploads your files to GitHub, visible to everyone who can see the PR
  • Captures of protected pages can carry tokens and authenticated parameters into a public PR

This is third-party code. Review the repository files before installing.

What it does

The skill takes screenshots and screen recordings you have already captured and lays them out in a GitHub pull request description. `agent-browser` does the capture, `gh --attach` does the upload, and the skill steers the work between them and owns the single dependency-free script `skill/scripts/format.mjs`. The script builds the markup and replaces one block in the PR text, wrapped in `<!-- before-and-after:start -->` and `<!-- before-and-after:end -->` comments. The rest of the description stays as it was. Images go into a side-by-side table: before on the left, after on the right. Full-page captures are padded to equal height so their tops line up. For a page with no pair the script makes a `Preview` block. GitHub renders a video on its own line as a player, and a two-video comparison takes two steps: first the files go into a temporary comment, then their permanent links are placed into an HTML table. The skill also advises where to put the block: near the top of the description, ahead of the implementation details.

Who it is for. Frontend developers and design engineers whose pull requests change the interface and who find it easier to show a reviewer the result in a picture and a recording.

Good fit when

  • A PR changes the layout and the reviewer wants desktop and mobile views before and after
  • A new page has no earlier version and only a preview goes into the description
  • An animation or transition is shown with a screen recording that plays right in the PR description
  • The PR description is updated again and the media block is replaced with no duplicates
  • Screenshots were taken by an agent through `agent-browser` and only need tidy formatting

Not a fit when

  • The PR does not touch the interface and there is nothing to show
  • You have no way to take captures: the skill does no capturing itself and leaves it to `agent-browser`
  • The machine has a `gh` older than 2.99, which the `--attach` flag needs
  • The page you capture needs access tokens, and they could end up in the screenshot

Example request

Capture the home page before and after my changes at desktop and mobile widths and add the comparison to the description of PR 123

Limitations

It needs `agent-browser` and GitHub CLI 2.99 or newer. The skill does not wrap `agent-browser`, manage Vercel authentication, convert video or host media. `agent-browser` versions 0.35.2 and 0.36.0 record at a fixed 10 frames per second, and raising the rate while transcoding only duplicates frames. For protected Vercel Previews the recording starts in a fresh browser context and may lose the access header, so authentication has to come first. The formatter accepts PNG, JPEG, GIF, WebP, MP4, MOV and WebM. The repository metadata defines no license. Captures with OIDC tokens, bypass secrets and authenticated query parameters must not be published.

How to disable. Delete the `before-and-after` skill folder from the agent's skills directory. In PR descriptions already updated, remove the block by hand between the `before-and-after:start` and `before-and-after:end` comments. If a failure left temporary video comments behind, delete them in the PR discussion.

FAQ

How do I install before-and-after in Claude Code?

Run `npx skills add vercel-labs/before-and-after#main`. You also need `agent-browser` for capture and GitHub CLI 2.99 or newer for uploads.

What does the skill do to the rest of the PR description?

Nothing. It replaces only the block between the `<!-- before-and-after:start -->` and `<!-- before-and-after:end -->` comments. If the block is missing the script adds it, and where the spot is unclear it appends to the end.

Why must the tops of the before and after screenshots line up?

GitHub centers a shorter image in its table cell. The skill has you add empty space only at the bottom of the shorter page so the file heights match and the top edges stay level.

How do I add a comparison of two videos?

In two steps: upload the videos to a temporary comment with `gh pr comment --attach`, take the permanent `user-attachments` URLs from it, then build the table with `format.mjs` using `--before-video-url` and `--after-video-url` and update the description with `gh pr edit`.

What frame rate does the screen recording use?

`agent-browser` 0.35.2 and 0.36.0 record at 10 frames per second and it cannot be changed. Transcoding to 30 or 60 only duplicates frames and does not add smoothness.

Discussion

No questions or reviews yet.

Skills

A skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project

SkillExtended access773

A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program

SkillExtended access556

A skill for Claude Code and other agents that builds websites directed like films: art direction before code, local CLI asset generation and an anti-slop linter

SkillExtended access1K

A skill rebuilds a UI from a site, screenshot or screen recording and scores the copy on layout, style, pixels and motion.

SkillExtended access112
Needs a VPN

A skill that builds a landing page where scrolling flies a camera through a generated 3D world

SkillBroad access11K

README in short

The page divides the work between tools: capture belongs to `agent-browser`, upload to `gh`, layout to the skill. Then come the install command, a list of what the skill produces, and a table of five verification layers, from formatter tests to a trial Claude Code run on a fixture PR.

README badge

Original SKILL.md

---
name: before-and-after
description: 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.
---

# 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:

   ```text
   captures/desktop-before.png
   captures/desktop-after.png
   captures/mobile-before.png
   captures/mobile-after.png
   ```

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. For full-page before/after screenshots, make both files the same pixel height so their top edges align:

1. Open both pages at the same viewport and state.
2. Read `document.documentElement.scrollHeight` in both sessions.
3. Append bottom-only space to the shorter page until both scroll heights match, then take both `--full` screenshots.

The padding may be transparent or use the capture tool's default canvas. Never add space above the page. For component or section comparisons, capture the same scoped region instead of padding unrelated page content.

Use raw `agent-browser eval` for this DOM-only adjustment; do not add an image-processing dependency to this skill. Confirm the resulting files have equal pixel dimensions before publishing.

## Format

Report a problem