Official Document Processing

before-and-after

Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual diff", "PR screenshots", "compare old and new", or needs to document UI changes. Accepts two URLs (file://, http://, https://) or two image paths.

This skill ships only metadata — no inline instructions. See the source repo for details.

Install this skill

One command (all agents)

Runs the npx skills CLI which auto-detects every AI coding agent you have installed (Claude Code, Cursor, Codex, OpenCode, Windsurf, Copilot, and 51 more).

npx skills add https://github.com/vercel-labs/before-and-after

Alternative: shorthand form

npx skills add vercel-labs/before-and-after

Install to a specific agent

Pick the agent you use. The CLI writes the skill to that agent's standard skill directory.

npx skills add vercel-labs/before-and-after --agent claude-code

npx skills add vercel-labs/before-and-after --agent cursor

npx skills add vercel-labs/before-and-after --agent codex

npx skills add vercel-labs/before-and-after --agent opencode

npx skills add vercel-labs/before-and-after --agent github-copilot

npx skills add vercel-labs/before-and-after --agent windsurf

Manual install (no CLI)

Prefer to skip the CLI? Clone the repo and drop the skill folder into your agent's skills directory.

git clone https://github.com/vercel-labs/before-and-after.git

cp -r before-and-after ~/.claude/skills/

For other agents, replace ~/.claude/skills/ with their skill directory — see the full list.

Use it

Once installed, ask your agent to "use the before-and-after skill" or describe what you want (e.g. "Captures before/after screenshots of web pages or elements for visual comparison"). Most agents auto-discover the skill from its SKILL.md description — no slash command needed.

Requires: Node.js 18+ for npx skills. Skill files are MIT-style permissive by default — check the source repo for the actual license.

SKILL.md source

---
name: before-and-after
description: Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual diff", "PR screenshots", "compare old and
---

Related skills 6

env-and-assets-bootstrap

★ Featured

RigorPilot setup skill for README-first deep learning repo reproduction. Use when the task is specifically to prepare a conservative conda-first environment, checkpoint and dataset path assumptions, cache location hints, and setup notes before any run on a README-documented repository. Do not use for repo scanning, full orchestration, paper interpretation, final run reporting, or generic environment setup that is not tied to a specific reproduction target.

lllllllama 127k

Document Processing

firecrawl

★ Featured

Search, scrape, and interact with the web via the Firecrawl CLI. Use this skill whenever the user wants to search the web, find articles, research a topic, look something up online, scrape a webpage, grab content from a URL, get data from a website, crawl documentation, download a site, or interact with pages that need clicks or logins. Also use when they say "fetch this page", "pull the content from", "get the page at https://", or reference external websites. This provides real-time web sea...

firecrawl 59k

Document Processing