before-and-after

Capture paired screenshots from two URLs or image paths for comparison.

3|Updated Dec 22, 2025

Search Tags:#documentation #ui-testing #screenshot #web #visual-diff #before-after

Ready to run

npx skills add https://github.com/JoaquinCampo/Skills --skill before-and-after-joaquincampo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: before-and-after
Source: https://github.com/JoaquinCampo/Skills/tree/main/before-and-after
Command: npx skills add https://github.com/JoaquinCampo/Skills --skill before-and-after-joaquincampo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires curl, gh, agent-browser, pbcopy, xclip, and includes scripts (resource) components.

What problem does it solve?

This skill automates the capture of before-and-after visuals to document UI changes and verify design iterations.

Core Features & Use Cases

Capture paired screenshots from two URLs or two image paths for side-by-side comparison.
Support simple workflows for production vs staging, PR review, or design reviews.
Output ready-to-share assets and markdown-friendly references for documentation.

Quick Start

Provide two URLs or two image paths to compare, and the tool will generate before and after screenshots.

Frequently Asked Questions about before-and-after

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I capture before and after screenshots for visual UI comparison?▼

Capture before and after screenshots by providing two URLs or two image paths to generate paired visuals for side-by-side comparison. The CLI workflow automates screenshot capture and outputs ready-to-share assets for design review or PR verification.

What is a visual diff workflow for UI change verification?▼

A visual diff workflow compares paired screenshots to document UI changes and verify design iterations. It applies to production versus staging checks, PR reviews, or design reviews, generating markdown-friendly references for documentation.

Can I compare staging and production screenshots using a CLI script?▼

Yes, you can compare staging and production screenshots by passing both URLs to the capture script. The workflow generates paired screenshots for direct visual comparison, verifying UI changes across environments.

Do I need curl and gh installed to generate before and after screenshots?▼

You need curl as a core dependency to run the capture and upload scripts. The gh dependency is optional, used by a pluggable adapter in upload-and-copy.sh to publish results, while curl handles the default upload method.

How do I share visual diff results in markdown documentation?▼

Share visual diff results in markdown by running the upload-and-copy.sh script after screenshot capture. This uploads paired images and copies markdown-friendly references to your clipboard for immediate pasting into documentation.

What are the limitations of using screenshot scripts for UI testing?▼

Screenshot scripts for UI testing are limited to visual comparison of captured web pages and do not perform automated DOM or functional testing. They require valid URLs or image paths and rely on CLI dependencies like curl for execution.