skills.rest
vercel-labsvercel-labsOfficial·1 Agent Skills Included

before-and-after

Before-and-after screenshots and visual diffs for pull requests

Captures before-and-after screenshots of web pages, elements, or local builds for visual comparison. Generates PR-ready markdown tables with uploaded images, eliminating manual screenshotting and image hosting. Supports mobile, tablet, and custom viewports, CSS selectors, and full-page captures to document UI changes fast.
210|9
↗
npx skills add vercel-labs/before-and-after --all -g -y
Available:

Tells your AI agent how the project is structured, how to capture and upload screenshots, and the conventions to follow when running the before-and-after workflows.

All Skills in This Repository (1)

Pure Emerald Level Indicators
📦 In Repo
vercel-labsvercel-labs

before-and-after

Capture before-and-after screenshots from two URLs or image paths.

Official
Advanced

Frequently Asked Questions

FAQPage Schema
How to install before-and-after?▼

Run `npx skills add vercel-labs/before-and-after --all -g -y` in your terminal to install the skill globally for your agent.

How to add before-and-after screenshots to a PR?▼

Run `before-and-after <before-url> <after-url> --markdown` to capture both states, upload the images, and copy a ready-to-paste markdown table for your pull request.

Can it capture mobile or specific page elements?▼

Yes. Use `--mobile` or `--tablet` for device viewports, `--size` for custom dimensions, and pass a CSS selector to screenshot a single element.

Does it work with Vercel preview deployments?▼

Yes. It detects protected .vercel.app URLs and uses the Vercel CLI bypass token when available, or prompts you for one.

Can I compare existing images instead of URLs?▼

Yes. Pass two local image paths instead of URLs, or mix an image with a URL, and it will still upload them and generate the comparison markdown.

Related Repositories in Software Engineering

View All in Software Engineering→
openclawopenclaw
388.4k

openclaw

Run a personal AI assistant across your devices and chat apps

Official📦 120 Skills
obraobra
280.0k

superpowers

Gives coding agents a disciplined workflow from idea to merged code

Community📦 15 Skills
facebookfacebook
248.4k

react

AI agent skills for building, testing, and porting React core

Official📦 14 Skills