mcpField
C
comparing-branches-visually

comparing-branches-visually

github.com/spencerpaulyTesting & quality868388 installsUpdated 13w ago
Repository

About comparing-branches-visually

A skill for comparing UI changes between two Git branches by running both versions and capturing screenshots of affected pages. It helps teams review visual differences before reporting them.

Key features

  1. 01Set up separate branch worktrees
  2. 02Run both branch servers on different ports
  3. 03Find pages affected by code changes
  4. 04Capture before-and-after screenshots
  5. 05Report visual differences

Use cases

  1. 01Review UI changes before merging
  2. 02Compare affected pages across branches
  3. 03Prepare visual summaries for a pull request

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill comparing-branches-visually

After installing, type/comparing-branches-visuallyin Claude Code to confirm it loaded.

Details

From the project README

Comparing Branches Visually

Create a visual before/after comparison of UI changes between two branches.

Workflow

1. Set Up Two Worktrees

Use best-of-n-runner subagents or git worktrees to run both branches simultaneously:

# Create a worktree for the base branch
git worktree add /tmp/branch-compare-base main

# The current working directory has the feature branch
2. Start Both Servers

Start the base branch server on a different port:

# In the base worktree
cd /tmp/branch-compare-base && PORT=3001 npm run dev

# Current branch is already on the default port (3000)
3. Identify Pages to Compare

Determine which pages are affected by the changes:

git diff main --name-only | grep -E '\.(tsx?|jsx?|vue|svelte|css)'

Map changed files to their routes (e.g. app/dashboard/page.tsx → /dashboard).

4. Screenshot Both Versions

For each affected page:

  1. browser_navigate to http://localhost:3001/<page> (base branch)
  2. browser_take_screenshot → save as "before"
  3. browser_navigate to http://localhost:3000/<page> (feature branch)
  4. browser_take_screenshot → save as "after"
5. Report

Present the comparison:

Visual Diff: feature/redesign-header vs main

/dashboard:
  Before: [screenshot from main]
  After:  [screenshot from feature branch]
  Changes: Header height reduced, nav links repositioned, new avatar dropdown

/settings:
  Before: [screenshot]
  After:  [screenshot]
  Changes: No visual differences detected
6. Clean Up
# Stop the base branch server
# Remove the worktree
git worktree remove /tmp/branch-compare-base

Tips

  • Test at a consistent viewport size (1280×800 is a good default)
  • For mobile-first changes, also compare at 375px width
  • If the app requires auth, log in on both ports first
  • This pairs well with screenshotting-changelog for PR descriptions

Comments

Markdown supported