mcpField
B
before-and-after

before-and-after

github.com/vercel-labs开发4152.9k 次安装8 周前更新
代码仓库

关于 before-and-after

用于向 GitHub PR 添加截图和视频证据的技能。它负责整理与发布附件，并使用 agent-browser 进行捕获。

主要功能

  1. 01整理图片和视频对比
  2. 02添加仅含更新后的预览
  3. 03插入或替换 PR 标记区块
  4. 04上传并核验视频附件

适用场景

  1. 01用前后截图展示界面改动
  2. 02为新页面添加预览图
  3. 03在 PR 中发布视频对比

安装

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

$npx skills add https://github.com/vercel-labs/before-and-after --skill before-and-after

安装后在 Claude Code 中输入/before-and-after确认已加载。

附带文件scripts/format.mjs

详细介绍

为 PR 添加视觉媒体

使用 agent-browser 创建截图或录屏。本技能仅负责 GitHub PR 附件工作流。

捕获

  1. 使用 agent-browser skills get core --full 加载与版本匹配的核心说明，并按照说明处理会话、导航、页面状态、截图和录屏。

  2. 如果 Vercel URL 受保护，请加载 agent-browser skills get protected-vercel-deployments --full。不要在此处复述其身份验证流程。

  3. 将媒体保存在仓库下的路径中，路径不得包含空白字符，例如：

    captures/desktop-before.png
captures/desktop-after.png
captures/mobile-before.png
captures/mobile-after.png

格式化工具支持 PNG、JPEG、GIF、WebP、MP4、MOV 和 WebM 文件。对于全新预览，只使用 --after 文件，不要搭配对应的 --before 文件。

屏幕录制

agent-browser record start 会创建全新的浏览器上下文。它会保留 Cookie 和本地存储，但用于打开受保护 Vercel Preview 的源站范围请求头可能不会沿用到这个新上下文中。录制受保护的 Preview 前：

  1. 加载 agent-browser skills get protected-vercel-deployments --full。
  2. 在空白页面上启动录制上下文。
  3. 在录制上下文中按照该技能所述方式进行身份验证。
  4. 仅在身份验证生效后导航到 Preview；如有必要，裁剪掉开头的导航片段。

不要假设 record start 之前可以访问的页面，在此之后仍会保持身份验证状态。

agent-browser 0.35.2 和 0.36.0 以硬编码的 10 fps 进行捕获，且没有 CLI 或环境变量选项可更改。请检查已安装的版本及其录制参考文档，不要假设后续版本仍然如此。转码时应保留源帧率：将容器帧率改为 30 或 60 fps 只会重复帧，并不会让动作更流畅。若动画证据需要更高的实际帧率，请使用真正高帧率的捕获方式，而不是对 agent-browser 输出进行升帧处理。

等高图片对

GitHub 会在 Markdown 表格单元格中垂直居中较短的图片。对于整页前后对比截图，请让两个文件的像素高度相同，以便顶部边缘对齐：

  1. 在相同视口和状态下打开两个页面。
  2. 在两个会话中读取 document.documentElement.scrollHeight。
  3. 为较短的页面仅在底部添加空白，直到两个滚动高度一致，然后分别截取 --full 截图。

填充可以是透明的，也可以使用捕获工具的默认画布。切勿在页面顶部添加空白。对于组件或页面区块对比，应捕获相同范围的区域，而不是给无关页面内容添加填充。

请使用原生 agent-browser eval 进行此 DOM 调整；不要为本技能添加图像处理依赖。发布前请确认生成的文件具有相同的像素尺寸。

格式

每组对比传入一对 --before 和 --after。多组对比可重复使用 --label 标识：

node skill/scripts/format.mjs \
  --before captures/desktop-before.png \
  --after captures/desktop-after.png \
  --before captures/mobile-before.png \
  --after captures/mobile-after.png \
  --label Desktop \
  --label Mobile \
  > /tmp/before-and-after.md

仅显示对比后的预览时：

node skill/scripts/format.mjs \
  --after captures/new-page.png \
  > /tmp/before-and-after.md

如果 PR 需要注明证据的制作人，请添加 --attribution "<name>"，以 > Before/after by <name> 行作为区块前缀。

图片会以表格形式呈现。本地视频最初会单独显示，以便 gh --attach 上传并提供最终附件 URL。前后对比视频表格需要按下方的两步工作流处理，因为 gh --attach 不会改写 <video src> 属性中的本地引用。

放置证据

插入新的标记区块前，先阅读现有 PR 描述。将视觉证据放在靠前的位置：简短的开场上下文之后，以及现有的预览或部署链接区块（如果有）之后；但要放在实现相关的详细内容、变更、测试或备注等区块之前。

视觉证据内部按以下顺序排列：

  1. 首先放置能证明 PR 内容的真实前后对比或预览证据。
  2. 主要证据之后再放置补充格式、其他状态或演示。
  3. 任何展示此技能而非 PR 本身的内容都要标注为演示，并在旁边说明重要限制。例如，当动画流畅度很重要时，请注明已安装的 agent-browser 录制器目前限制为 10 fps。

标题只是语义提示，不是必需名称。切勿仅为创建锚点而编造或改写文字，也不要拆分段落、列表、表格、代码块或其他 Markdown 结构。如果没有明确安全的锚点，就将区块追加到末尾，避免造成破坏。如果已存在标记区块，只移动或替换该完整区块；保留所有无关文字的每一个字节。

发布后，打开渲染后的 PR，确认主要证据出现在补充演示和实现细节之前。

发布

保留现有 PR 描述，只替换此技能的标记区块：

PR=123
gh pr view "$PR" --json body --jq .body > /tmp/pr-body.md

node skill/scripts/format.mjs \
  --body-file /tmp/pr-body.md \
  --before captures/desktop-before.png \
  --after captures/desktop-after.png \
  > /tmp/pr-body-next.md

ATTACH_ARGS=()
while IFS= read -r file; do
  ATTACH_ARGS+=(--attach "$file")
done < <(
  node skill/scripts/format.mjs \
    --attach-list \
    --before captures/desktop-before.png \
    --after captures/desktop-after.png
)

gh pr edit "$PR" --body-file /tmp/pr-body-next.md "${ATTACH_ARGS[@]}"

在同一目录中运行格式化程序和 gh。gh --attach 会将本地文件上传到 GitHub，并在 PR 正文中改写对应的本地引用。

发布后，获取或打开 PR 描述，确认标记区块中不再包含任何 ./captures/... 引用，并确认内容按预期顺序呈现。

发布视频表格

视频对比是一项分两步完成的发布操作：

  1. 使用常规的独占一行输出，通过 gh pr comment --attach 在临时 PR 评论中上传本地视频。

  2. 通过 gh api 获取该评论，并按前后顺序收集稳定的 https://github.com/user-attachments/assets/... URL。

  3. 根据这些 URL 生成最终 HTML 表格，并替换 PR 中的标记区块：

    node skill/scripts/format.mjs \
  --body-file /tmp/pr-body.md \
  --before-video-url https://github.com/user-attachments/assets/BEFORE_ID \
  --after-video-url https://github.com/user-attachments/assets/AFTER_ID \
  --label "Desktop hero" \
  > /tmp/pr-body-next.md

gh pr edit "$PR" --body-file /tmp/pr-body-next.md

  4. 删除临时评论前，先获取编辑后的 PR 正文。确认其中包含两个最终 URL，且不再包含任何本地视频路径，然后删除该评论。

  5. 打开渲染后的 PR，确认两个 <video> 元素都位于对比表格内，能够进入可播放的就绪状态，并显示控件。

如果 URL 提取、格式化或 PR 验证失败，请保留临时评论，使其已上传的附件仍可找回，并从最后一个成功阶段重试。也可将视频单独放在各自行中，作为简单的备用方案。

不要发布包含 Vercel OIDC 令牌、绕过验证的密钥、已认证的查询参数或浏览器状态文件的捕获内容。

脚本约定

scripts/format.mjs 是唯一有意随附的脚本。它会：

  • 格式化现有本地媒体；
  • 将最终的 GitHub 视频附件 URL 格式化为 HTML 对比表格；
  • 将仅含后续内容的媒体标注为 Preview；
  • 输出确切的附件路径列表；
  • 插入或替换 ``，且不更改 PR 中的其他文字。

它的参数会随此技能一起更新，不是公共库 API。

评论

支持 Markdown