before-and-after

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Captures and compares two visual states to document UI changes, reducing manual screenshot reviews and ensuring consistency across deployments.

Core Features & Use Cases

  • Command-line agent that captures before and after screenshots from two URLs or image paths.
  • Supports viewport options (mobile/tablet/full) and element-level captures for precise diffs.
  • Ideal for PR reviews, UI regression testing, and design verification.

Quick Start

Provide two URLs or image paths to generate a before/after visual diff.

Frequently Asked Questions about before-and-after

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

FAQPage Schema
How do I generate a visual diff between two web pages?

You can generate a visual diff by providing two URLs or image paths to the before-and-after CLI, which captures screenshots and produces a side-by-side comparison highlighting UI changes.

Can I capture element-level screenshots for visual regression testing?

Yes, you can capture element-level screenshots for visual regression testing by specifying element options, allowing precise visual diff verification of individual UI components.

Do I need to install the before-and-after CLI to compare UI screenshots?

Yes, installing the before-and-after CLI is required to automate visual diff capture, as it processes the screenshot comparisons and supports viewport configurations for UI verification.

Does visual diff capture work with local image files or only remote URLs?

Visual diff capture works with both local image paths and remote URLs, enabling flexible UI verification across local development environments and deployed web applications.

What is the best way to automate UI verification across deployments?

Automating UI verification across deployments is best achieved by capturing before and after screenshots from two URLs using a command-line agent, generating visual diffs to ensure deployment consistency.

Can I set viewport options for mobile and tablet when taking UI screenshots?

Yes, you can configure viewport options for mobile, tablet, and full screen when capturing UI screenshots, ensuring responsive design verification across different device sizes.