before-and-after

Capture before/after screenshots from two URLs or image paths.

Updated Sep 7, 2025
One-click install
npx skills add https://github.com/vijaykpatel/Rajat-Mahotsav-Website --skill before-and-after
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: before-and-after
Source: https://github.com/vijaykpatel/Rajat-Mahotsav-Website/tree/main/.cursor/skills/before-and-after
Command: npx skills add https://github.com/vijaykpatel/Rajat-Mahotsav-Website --skill before-and-after

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Captures before/after screenshots of web pages or elements for visual comparison. Use when you need to document UI changes or verify visual regressions across two states (file://, http(s) URLs).

Core Features & Use Cases

  • Deterministic screenshot capture of before and after states using a headless agent, across two URLs or image paths.
  • Flexible capture options: full-page, specific selectors, and viewport presets (mobile/tablet).
  • Upload and share: generate PR-ready markdown tables or clipboard-ready links for quick collaboration.

Quick Start

Provide two URLs or image paths for the before and after states, and run the tool to capture and upload the 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 UI regression testing?

To capture before and after screenshots for UI regression testing, provide two URLs or image paths and the tool generates deterministic screenshots using a headless agent. It supports full-page captures, specific selectors, and mobile or tablet viewport presets.

Can I compare visual changes between two web pages using specific viewport sizes?

Yes, you can compare visual changes between two web pages using specific viewport sizes. The capture script supports mobile, tablet, and full-page viewport presets to ensure accurate visual diffs across different device dimensions.

What is the best way to generate PR-ready markdown tables for visual diffs?

The best way to generate PR-ready markdown tables for visual diffs is to capture before and after screenshots of web pages and use the built-in upload adapters. This creates clipboard-ready links and markdown tables for quick design review collaboration.

Do I need a headless browser to automate screenshot capture for design reviews?

Yes, you need a headless browser to automate screenshot capture for design reviews. This tool uses the agent-browser powered capture script to securely fetch and generate deterministic screenshots from file:// or http(s) URLs.

Can I use local image paths instead of URLs for visual comparison?

Yes, you can use local image paths instead of URLs for visual comparison. The tool accepts both file:// paths and http(s) URLs as inputs for the before and after states to generate the required visual diff.

Does visual regression testing work with specific page elements or only full pages?

Visual regression testing works with both specific page elements and full pages. You can target specific CSS selectors or capture the entire page, allowing flexible documentation of UI changes across two states.