mcpField
C
comparing-branches-visually

comparing-branches-visually

github.com/revitalb-port测试与质量048 次安装10 周前更新
代码仓库

关于 comparing-branches-visually

comparing-branches-visually 是用于对比两个 Git 分支界面变化的视觉测试技能，面向需要检查或展示 UI 改动的开发者。它通过并行运行分支版本、识别受影响页面并截取前后截图，整理成可视化对比。

主要功能

  1. 01使用 worktree 并行运行两个分支
  2. 02从代码改动定位受影响页面
  3. 03截取改动前后的页面截图
  4. 04整理页面级视觉对比结果
  5. 05提供一致视口尺寸建议

适用场景

  1. 01检查功能分支的 UI 改动
  2. 02为代码评审准备界面对比
  3. 03验证多个路由的视觉变化

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/revitalb-port/skills-registry-demo --skill comparing-branches-visually

安装后在 Claude Code 中输入/comparing-branches-visually确认已加载。

详细介绍

直观比较分支

创建两条分支之间 UI 变更的前后对比图。

工作流

1. 设置两个工作树

使用 best-of-n-runner 子 Agent 或 Git 工作树，同时运行两条分支：

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

# The current working directory has the feature branch
2. 启动两个服务

在不同端口启动基线分支的服务：

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

# Current branch is already on the default port (3000)
3. 确定要比较的页面

确定哪些页面受到变更影响：

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

将变更文件映射到对应路由（例如，app/dashboard/page.tsx → /dashboard）。

4. 为两个版本截图

对于每个受影响的页面：

  1. 使用 browser_navigate 导航到 http://localhost:3001/<page>（基线分支）
  2. 使用 browser_take_screenshot 截图 → 保存为“变更前”
  3. 使用 browser_navigate 导航到 http://localhost:3000/<page>（功能分支）
  4. 使用 browser_take_screenshot 截图 → 保存为“变更后”
5. 报告

展示对比：

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. 清理
# Stop the base branch server
# Remove the worktree
git worktree remove /tmp/branch-compare-base

提示

  • 使用一致的视口尺寸进行测试（1280×800 是不错的默认值）
  • 对于移动优先的变更，也应在 375px 宽度下进行比较
  • 如果应用需要身份验证，请先在两个端口分别登录
  • 在 PR 描述中，这与 screenshotting-changelog 搭配使用效果很好

评论

支持 Markdown