New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Comparing Branches Visually

by spencerpauly in spencerpauly/awesome-cursor-skills

Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff.

CC0-1.0Auto-check passedDevelopment

Install Comparing Branches Visually

skills CLI
$ npx skills add spencerpauly/awesome-cursor-skills --skill comparing-branches-visually -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install spencerpauly/awesome-cursor-skills comparing-branches-visually --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/resources/comparing-branches-visually .claude/skills/comparing-branches-visually && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
comparing-branches-visually
GitHub stars
843
Token cost
~532 tokens
SKILL.md length
143 words
Files
1
Skills in repo
60
Repo updated
First seen
Licence
CC0-1.0

At a glance

Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff.

  • Works in 6 steps: Set Up Two Worktrees → Start Both Servers → Identify Pages to Compare → …
  • Tasks that involve Git worktrees
  • SKILL.md covers Workflow and Tips
  • Calls git and npm

What it does

Comparing Branches Visually is an agent skill from spencerpauly/awesome-cursor-skills. Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff.

Its SKILL.md is about 530 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Git worktrees and Visual regression testing. The repository describes itself as: A curated list of awesome skills for Cursor. The licence is CC0-1.0.

When your agent uses it

  • Tasks that involve Git worktrees
  • Tasks that involve Visual regression testing

Example prompts

  • “/comparing-branches-visually”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Set Up Two Worktrees
  2. Start Both Servers
  3. Identify Pages to Compare
  4. Screenshot Both Versions
  5. Report
  6. Clean Up

What it can do on your machine

Read from SKILL.md and the folder at commit 99cd265. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • git
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use git and npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Comparing Branches Visually loads about 532 tokens when it runs. Until then it costs about 43 tokens; SKILL.md has 143 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~43
When it runs · the whole SKILL.md, loaded when a task matches
~532

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from spencerpauly/awesome-cursor-skills at commit 99cd265, republished under its CC0-1.0 licence (© spencerpauly). 143 words, ~532 tokens.

Download SKILL.mdSave it as .claude/skills/comparing-branches-visually/SKILL.md (or your agent's skills folder).
name
comparing-branches-visually
description
Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff.
user-invocable
true

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:

bash
# 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:

bash
# 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:

bash
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
bash
# 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

© spencerpauly, CC0-1.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in resources/comparing-branches-visually of spencerpauly/awesome-cursor-skills.

Open the folder on GitHubat commit 99cd265

Compare with similar skills

Comparing Branches Visually next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Comparing Branches Visually compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Comparing Branches Visually this skillspencerpauly/awesome-cursor-skills843—~532Automated safety check: PassCC0-1.0
Berth Visual Diffsean-brydon/berthd286—~2kAutomated safety check: PassMIT
Android UI Visual Reviewpermissionlesstech/bitchat-android7.8k—~2.6kAutomated safety check: PassGPL-3.0
Run Dozzle Dev Instanceamir20/dozzle15k—~747Automated safety check: PassMIT
DevSpace Manual QA SetupWaishnav/devspace5.2k—~440Automated safety check: PassMIT
Bench Batonnooga/let-go568—~821Automated safety check: PassMIT

Similar skills

  • Berth Visual Diff

    sean-brydon/berthd

    Check what your change did to a web app's pages before you say you're done — berthd shots compare screenshots your worktree's dev server and the main checkout's at phone, tablet and desktop widths…

    286 GitHub stars~2k tokensUpdated today
    Testing & QAAuto-check passed

  • Android UI Visual Review

    permissionlesstech/bitchat-android

    Analyze an Android pull request, branch, commit, or patch for user-visible changes and produce reproducible before/after screenshots from isolated builds.

    7.8k GitHub stars~2.6k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

  • Run Dozzle Dev Instance

    amir20/dozzle

    Starts a Dozzle dev server on a port derived from the current worktree so you can test by hand in a browser, without disturbing instances started elsewhere.

    15k GitHub stars~747 tokensUpdated today
    DevelopmentAuto-check passed

  • DevSpace Manual QA Setup

    Waishnav/devspace

    Prepares the current DevSpace checkout or worktree for isolated local manual QA, covering QA state seeding, UI asset builds and snapshot resets.

    5.2k GitHub stars~440 tokensUpdated today
    DevelopmentAuto-check passed

  • Bench Baton

    nooga/let-go

    Coordinate heavy local workloads across worktrees, processes, and subagents — benchmarks and timing-sensitive gates run exclusively on a quiesced machine, while builds, test suites, regeneration…

    568 GitHub stars~821 tokensUpdated today
    DevelopmentAuto-check passed

  • Fix

    exercism/website

    Fix a GitHub issue end-to-end — fetches issue, creates worktree, plans and implements fix, runs validation, opens PR, cleans up.

    549 GitHub stars~1.2k tokensUpdated yesterday
    DevelopmentAuto-check: notes

More from spencerpauly/awesome-cursor-skills

All 60 skills in this repo

  • Generating Images

    spencerpauly/awesome-cursor-skills

    Generate or edit images using the OpenAI Image API (gpt-image-2).

    843 GitHub stars~3.7k tokensUpdated 2 mo ago
    Auto-check: notes

  • Babysitting PR

    spencerpauly/awesome-cursor-skills

    Monitor a pull request for CI failures, review comments, and merge conflicts — then fix them automatically.

    843 GitHub stars~930 tokensUpdated 2 mo ago
    Auto-check passed

  • Best Of N Solving

    spencerpauly/awesome-cursor-skills

    Solve a hard problem by trying multiple approaches in parallel using isolated git worktrees.

    843 GitHub stars~698 tokensUpdated 2 mo ago
    Auto-check passed

  • Grinding Until Pass

    spencerpauly/awesome-cursor-skills

    Keep iterating on code changes until the tests pass, the build succeeds, or linting is clean.

    843 GitHub stars~796 tokensUpdated 2 mo ago
    Auto-check passed

  • Parallel CI Triage

    spencerpauly/awesome-cursor-skills

    When GitHub Actions fails, fetch failing job logs and assign each failing job to a separate subagent that fixes its slice of the problem in parallel.

    843 GitHub stars~793 tokensUpdated 2 mo ago
    Auto-check passed

  • Parallel Exploring

    spencerpauly/awesome-cursor-skills

    Explore a large codebase in parallel by launching multiple explore subagents that each investigate a different area simultaneously.

    843 GitHub stars~787 tokensUpdated 2 mo ago
    Auto-check: notes

Categories

Questions about Comparing Branches Visually

What does Comparing Branches Visually do?

Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff. Comparing Branches Visually is an agent skill from spencerpauly/awesome-cursor-skills. Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff.

When should I use Comparing Branches Visually?

Comparing Branches Visually fits situations like: tasks that involve Git worktrees; tasks that involve Visual regression testing.

How do I install Comparing Branches Visually in Claude Code?

Run `npx skills add spencerpauly/awesome-cursor-skills --skill comparing-branches-visually -a claude-code`. Or copy the skill folder (resources/comparing-branches-visually in spencerpauly/awesome-cursor-skills) into .claude/skills/comparing-branches-visually in your project. Claude Code loads it when a task matches its description.

How do I install Comparing Branches Visually in Codex?

Run `npx skills add spencerpauly/awesome-cursor-skills --skill comparing-branches-visually -a codex`. Or copy the skill folder (resources/comparing-branches-visually in spencerpauly/awesome-cursor-skills) into .agents/skills/comparing-branches-visually in your project. Codex loads it when a task matches its description.

Can I use Comparing Branches Visually in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add spencerpauly/awesome-cursor-skills --skill comparing-branches-visually -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/comparing-branches-visually, .gemini/skills/comparing-branches-visually, .github/skills/comparing-branches-visually and .opencode/skills/comparing-branches-visually in your project.

What does Comparing Branches Visually need to run?

Going by SKILL.md and its folder, Comparing Branches Visually needs the command-line tools its instructions call (git and npm).

Does Comparing Branches Visually access the network?

SKILL.md contains no URLs. Its commands use git and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Comparing Branches Visually safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Comparing Branches Visually use?

Comparing Branches Visually is published under the CC0-1.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Comparing Branches Visually use?

About 532 tokens (SKILL.md is roughly 2.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Comparing Branches Visually?

Skills that share tags, products or a category with Comparing Branches Visually: Berth Visual Diff (sean-brydon/berthd, 286 stars), Android UI Visual Review (permissionlesstech/bitchat-android, 7.8k stars), Run Dozzle Dev Instance (amir20/dozzle, 15k stars) and DevSpace Manual QA Setup (Waishnav/devspace, 5.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Comparing Branches Visually?

spencerpauly (a GitHub user) maintains it in spencerpauly/awesome-cursor-skills, which has 843 GitHub stars. The repository holds 60 skills in this directory. The repository was last updated on August 2, 2026.

Source: spencerpauly/awesome-cursor-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.