Get the FREE Ultimate OpenClaw Setup Guide →

before-and-after

npx machina-cli add skill vijaykpatel/favorite_skills_and_plugins/before-and-after --openclaw
Files (1)
SKILL.md
4.0 KB

Before-After Screenshot Skill

Package: @vercel/before-and-after Never use before-and-after (wrong package).

Agent Behavior Rules

DO NOT:

  • Switch git branches, stash changes, start dev servers, or assume what "before" is
  • Use --full unless user explicitly asks for full page / full scroll capture

DO:

  • Use --markdown when user wants PR integration or markdown output
  • Use --mobile / --tablet if user mentions phone, mobile, tablet, responsive, etc.
  • Assume current state is After
  • If user provides only one URL or says "PR screenshots" without URLs, ASK: "What URL should I use for the 'before' state? (production URL, preview deployment, or another local port)"

Execution Order (MUST follow)

  1. Pre-flight — which before-and-after || npm install -g @vercel/before-and-after
  2. Protection check — if .vercel.app URL: curl -s -o /dev/null -w "%{http_code}" "<url>" (401/403 = protected)
  3. Capture — before-and-after "<before-url>" "<after-url>"
  4. Upload — ./scripts/upload-and-copy.sh <before.png> <after.png> --markdown
  5. PR integration — optionally gh pr edit to append markdown

Never skip steps 1-2.

Quick Reference

# Basic usage
before-and-after <before-url> <after-url>

# With selector
before-and-after url1 url2 ".hero-section"

# Different selectors for each
before-and-after url1 url2 ".old-card" ".new-card"

# Viewports
before-and-after url1 url2 --mobile    # 375x812
before-and-after url1 url2 --tablet    # 768x1024
before-and-after url1 url2 --full      # full scroll

# From existing images
before-and-after before.png after.png --markdown

# Via npx (use full package name!)
npx @vercel/before-and-after url1 url2
FlagDescription
-m, --mobileMobile viewport (375x812)
-t, --tabletTablet viewport (768x1024)
--size <WxH>Custom viewport
-f, --fullFull scrollable page
-s, --selectorCSS selector to capture
-o, --outputOutput directory (default: ~/Downloads)
--markdownUpload images & output markdown table
--upload-url <url>Custom upload endpoint (default: 0x0.st)

Image Upload

# Default (0x0.st - no signup needed)
./scripts/upload-and-copy.sh before.png after.png --markdown

# GitHub Gist
IMAGE_ADAPTER=gist ./scripts/upload-and-copy.sh before.png after.png --markdown

Vercel Deployment Protection

If .vercel.app URL returns 401/403:

  1. Check Vercel CLI: which vercel && vercel whoami
  2. If available: vercel inspect <url> to get bypass token
  3. If not: Tell user to provide bypass token, take manual screenshots, or disable protection

PR Integration

# Check for gh CLI
which gh

# Get current PR
gh pr view --json number,body

# Append screenshots to PR body
gh pr edit <number> --body "<existing-body>

## Before and After
<generated-markdown>"

If no gh CLI: output markdown and tell user to paste manually.

Error Reference

ErrorFix
command not foundnpm install -g @vercel/before-and-after
could not determine executableUse npx @vercel/before-and-after (full name)
401/403 on .vercel.appSee Vercel protection section
Element not foundVerify selector exists on page

Source

git clone https://github.com/vijaykpatel/favorite_skills_and_plugins/blob/main/.agents/skills/before-and-after/SKILL.mdView on GitHub

Overview

The before-and-after skill automates capturing visual diffs between two states of a page or element. It accepts two URLs or two image paths and guides users through a repeatable workflow—pre-flight, protection checks, capture, and upload—to produce shareable Markdown output for reviews or PRs.

How This Skill Works

It follows a defined workflow: first ensure the tool is installed (pre-flight). Then perform a protection check on any .vercel.app URLs. Next, run before-and-after with the before and after sources to generate two images, and finally upload them with a script to produce Markdown suitable for PRs or documentation. Optional PR integration can append the generated markdown to a GitHub PR body.

When to Use It

  • Compare old and new UI by supplying production and preview URLs to visualize changes.
  • Create PR-ready diffs by capturing before/after states and uploading Markdown for inclusion in the PR description.
  • Document UI changes using two local image files when URLs are not accessible.
  • Capture specific viewports (mobile, tablet, or full) to assess responsiveness with --mobile, --tablet, or --full flags.
  • Target a specific element with a CSS selector for each state using the -s/--selector flag.

Quick Start

  1. Step 1: Pre-flight — which before-and-after || npm install -g @vercel/before-and-after
  2. Step 2: Capture — before-and-after "<before-url>" "<after-url>"
  3. Step 3: Upload — ./scripts/upload-and-copy.sh <before.png> <after.png> --markdown

Best Practices

  • Provide both before and after sources (URLs or image paths) to ensure a valid diff.
  • Use viewport flags (--mobile, --tablet, or --full) when responsiveness matters.
  • Leverage --markdown to automatically upload images and generate a shareable markdown table.
  • If you're separating states, consider using --selector to isolate the diff to a specific element.
  • Check protected .vercel.app URLs and handle access with bypass tokens or manual capture if needed.

Example Use Cases

  • Team compares production vs staging home page to verify a recent design change.
  • PR reviewers see an automatically generated markdown diff appended to the PR body.
  • Designers compare a redesigned hero section against the old version via specific selectors.
  • A mobile-focused UI change is validated by capturing both desktop and mobile viewports.
  • Two design mocks are compared against implemented pages by using two image paths.

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗