skills.rest
spencerpauly
spencerpaulyCOMMUNITY
Explore all skills by this author →
Website𝕏@spencerpaulyGitHub

comparing-branches-visually

Compare two Git branches by capturing matching screenshots and generating a visual diff report.

672|104|Updated Apr 10, 2026
Search Tags:#git#screenshots#browser automation#worktree#ui testing#visual comparison
One-click install
npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill comparing-branches-visually-spencerpauly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: comparing-branches-visually
Source: https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/comparing-branches-visually
Command: npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill comparing-branches-visually-spencerpauly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the manual friction of checking whether two branches look the same or different by setting up both versions, opening the same pages, and comparing their rendered output side by side.

Core Features & Use Cases

  • Parallel branch comparison: Runs a base branch and a feature branch in separate worktrees so both can be tested at once.
  • UI regression review: Captures screenshots of the same routes to highlight layout, styling, and interaction changes.
  • Practical use case: Use it when a redesign, refactor, or bug fix needs a fast visual confirmation before merging.

Quick Start

Use this skill to compare the current branch against another branch, capture matching screenshots of the relevant pages, and report the visual differences clearly.

Frequently Asked Questions about comparing-branches-visually

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

FAQPage Schema
How do I compare visual UI changes between two git branches?▼

To compare visual UI changes between git branches, this Skill sets up both branches in separate worktrees, runs their dev servers, captures matching screenshots of identical routes, and generates a visual diff report highlighting layout and styling differences.

What is the best way to automate before-and-after screenshots for a branch regression check?▼

Automating before-and-after screenshots for a branch regression check involves running parallel worktrees, navigating browser automation to specific routes or responsive breakpoints, and capturing screenshots for a side-by-side visual comparison.

Do I need separate git worktrees to run two branches simultaneously for UI testing?▼

Yes, separate git worktrees are required to run two branches simultaneously for UI testing. This Skill creates parallel worktrees so both the base and feature branch dev servers can run at once on consistent ports for screenshot capture.

Can I use browser automation to capture screenshots across the same routes on different branches?▼

Yes, you can use browser automation to capture screenshots across the same routes on different branches. The Skill navigates matching paths and responsive breakpoints in both worktrees to ensure the visual comparison is accurately aligned.

When should I use a visual comparison workflow for git branch reviews?▼

You should use a visual comparison workflow for git branch reviews when a redesign, refactor, or bug fix needs fast visual confirmation of layout and styling changes before merging, replacing manual friction with automated screenshot diffs.

Related Skills

Explore More Software Engineering Skills→
codercoder
2.0k

dev-server-sandbox

Launch isolated Mux dev-server instances with temporary MUX_ROOT directories.

Official
Advanced
sparkfabriksparkfabrik
3

githuman

Review AI-generated code diffs with inline comments in a Docker environment.

Official
Intermediate
fullykubedfullykubed
2

DevBrowser

Automate browser-based UI testing with headless Chromium commands.

Community
Advanced
GolferGeekGolferGeek

create-worktree-skill

Create isolated Git worktrees with independent ports and configuration.

Community
Basic