before-and-after

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

Updated Apr 7, 2026
One-click install
npx skills add https://github.com/Yahia89/ordering-food --skill before-and-after-yahia89
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: before-and-after
Source: https://github.com/Yahia89/ordering-food/tree/main/.agents/skills/before-and-after
Command: npx skills add https://github.com/Yahia89/ordering-food --skill before-and-after-yahia89

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires curl, gh, and includes scripts (resource) components.

What problem does it solve?

This tool automates the capture of before/after screenshots to document UI changes, reducing manual comparison effort and enabling quick visual validation.

Core Features & Use Cases

  • Two-source capture: provide two URLs or two image paths to generate a paired visual diff.
  • Automated hosting-friendly outputs: uploads screenshots via adapters (0x0st, gist, blob) for easy sharing.
  • Use Case: verify UI changes after a PR or design update by generating side-by-side comparisons.

Quick Start

Provide two sources (URLs or image paths) to generate and upload a before/after screenshot.

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 UI regression testing?

To capture before and after screenshots for UI regression testing, provide two sources such as URLs or image paths to generate a paired visual diff. The tool automates the capture and comparison process to document UI changes quickly.

Can I generate a visual diff between two web pages using URLs?

Yes, you can generate a visual diff between two web pages by providing two URLs as inputs. The tool captures paired screenshots of the provided pages and creates a side-by-side comparison for design review or regression testing.

How do I automate screenshot comparisons after a pull request or design update?

You can automate screenshot comparisons after a pull request or design update by passing the updated and original sources to the tool. It generates a paired visual diff and optionally uploads the output via adapters for easy sharing.

Do I need curl and gh to take paired screenshots for visual diffs?

Yes, the tool requires curl and gh dependencies to function properly in your environment. These command-line tools facilitate the automated capture and upload processes needed for generating and sharing before-and-after screenshots.

What is the best way to share side-by-side UI screenshots for design reviews?

The best way to share side-by-side UI screenshots is by using the tool's automated upload adapters. Once the visual diff is generated from two sources, the output can be automatically uploaded via 0x0st, gist, or blob adapters for easy sharing.

Does visual regression testing work with local image paths instead of live URLs?

Yes, visual regression testing works with local image paths as an alternative to live URLs. The tool accepts two image paths as input sources to generate a paired before-and-after visual comparison for design verification.