Loading...
Loading...
Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff.
npx skill4agent add spencerpauly/awesome-cursor-skills comparing-branches-visuallybest-of-n-runner# Create a worktree for the base branch
git worktree add /tmp/branch-compare-base main
# The current working directory has the feature branch# In the base worktree
cd /tmp/branch-compare-base && PORT=3001 npm run dev
# Current branch is already on the default port (3000)git diff main --name-only | grep -E '\.(tsx?|jsx?|vue|svelte|css)'app/dashboard/page.tsx/dashboardbrowser_navigatehttp://localhost:3001/<page>browser_take_screenshotbrowser_navigatehttp://localhost:3000/<page>browser_take_screenshotVisual 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# Stop the base branch server
# Remove the worktree
git worktree remove /tmp/branch-compare-basescreenshotting-changelog