---
slug: "before-and-after-jamesvclements"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/jamesvclements/before-and-after@main/README.md"
repo: "https://github.com/jamesvclements/before-and-after"
source_file: "README.md"
branch: "main"
---
# before-and-after

Before and after is a tool that adds before and after screenshots to your PRs. Add it as a skill for your agent to call automatically or use it directly from the command line.

![before-and-after](https://jm.sv/before-and-after/opengraph-image.png)

## Install

Install globally to use from anywhere:

```bash
npm i -g @vercel/before-and-after
```

## Basic Use

Capture any two URLs, protocol is optional:

```bash
before-and-after site.com localhost:3000
```

## Add Skill

Show your agent how and when to take before and afters. The skill uses `gh` to detect the associated PR with your branch and (soon) `vercel` to bypass deployment protection when capturing from Vercel preview branches.

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

## Options

Capture a specific element using a CSS selector:

```bash
before-and-after url1 url2 ".hero"
```

Use different selectors for before and after:

```bash
before-and-after url1 url2 ".old" ".new"
```

Capture at mobile (375×812), tablet (768×1024), or custom viewport:

```bash
before-and-after url1 url2 --mobile
before-and-after url1 url2 --size 1920x1080
```

Capture the entire scrollable page:

```bash
before-and-after url1 url2 --full
```

Output a markdown table for PR descriptions:

```bash
before-and-after url1 url2 --markdown
```

Use existing images instead of capturing URLs:

```bash
before-and-after before.png after.png
```

Mix URLs and images:

```bash
before-and-after before.png localhost:3000
```

Save to a custom location:

```bash
before-and-after url1 url2 --output ./screenshots
```

Upload to a custom image storage service:

```bash
before-and-after url1 url2 --upload my-s3-uploader
```

By default, images are uploaded to [0x0.st](https://0x0.st). For heavy usage or sensitive captures, use your own upload handler.