skills.rest
supersterling
supersterlingCOMMUNITY
Explore all skills by this author →
GitHub

before-and-after

Capture before-and-after screenshots from two URLs or image paths to compare UI changes.

1|Updated Feb 26, 2026
Search Tags:#automation#ui#qa#screenshot#visual-diff#before-after
One-click install
npx skills add https://github.com/supersterling/primus --skill before-and-after-supersterling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: before-and-after
Source: https://github.com/supersterling/primus/tree/main/.agents/skills/before-and-after
Command: npx skills add https://github.com/supersterling/primus --skill before-and-after-supersterling

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Captures before/after screenshots to visually compare UI changes across two targets, saving time on QA and design validation.

Core Features & Use Cases

  • Capture side-by-side before-and-after screenshots from two URLs or two image paths.
  • Supports selectors and viewport options to focus on relevant UI regions and different devices.
  • Use Case: QA engineers verify visual regressions in PRs or design reviews by generating a diff gallery.

Quick Start

Provide two targets to generate a before-and-after screenshot comparison.

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 side-by-side before-and-after screenshots to compare UI changes?▼

To capture before-and-after screenshots, provide two targets such as URLs or image paths to generate a side-by-side visual diff. This automates UI comparison for QA checks and design reviews.

Can I focus visual diff screenshots on specific UI regions during a design review?▼

Yes, visual diff screenshots support optional selectors and viewport options to focus on specific UI regions and device sizes. This targets the exact elements needing comparison.

Does this screenshot comparison tool work with local image paths?▼

Yes, the screenshot comparison tool works with local image paths as well as live URLs. It processes two file inputs directly to reveal visual differences without needing live deployments.

Do I need curl and gh installed to automate visual regression checks?▼

Yes, curl and gh are required dependencies to automate visual regression checks. The scripts also use pbcopy or xclip for clipboard operations when handling the resulting diff outputs.

What is the best way to generate a visual diff gallery for PR checks?▼

The best way to generate a visual diff gallery for PR checks is automating side-by-side screenshot captures from two targets. This outputs a comparison view revealing visual regressions for review.

Related Skills

Explore More Design & Creative Skills→
umputunumputun
439

txt-copy

Copy generated text to the clipboard via a timestamped temporary file.

Community
Intermediate
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced
IgosukiIgosuki
1

browser-screenshot

Capture full-page, viewport, and element screenshots via Playwright CLI.

Community
Intermediate
alvarettoalvaretto
1

Comparación Visual Inteligente

Compare generated images against originals and report visual differences.

Community
Advanced