mcpField
C
comparing-branches-visually

comparing-branches-visually

github.com/revitalb-portTesting & quality048 installsUpdated 10w ago
Repository

About comparing-branches-visually

comparing-branches-visually is a visual testing skill for comparing UI changes across two Git branches. It guides developers to run both versions, identify affected pages, capture before-and-after screenshots, and present the differences.

Key features

  1. 01Run two branches in parallel with worktrees
  2. 02Map code changes to affected pages
  3. 03Capture before-and-after screenshots
  4. 04Prepare page-by-page visual comparisons
  5. 05Suggest consistent viewport sizes

Use cases

  1. 01Review UI changes on a feature branch
  2. 02Prepare visual comparisons for code review
  3. 03Check visual changes across multiple routes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/revitalb-port/skills-registry-demo --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