把已有截图附到 PR 的前后对比块

适合谁

这份技能适合已经有截图或屏幕录像、想把它们附到 GitHub Pull Request 里做成前后对比块的人。它是一条代理技能：只处理已有媒体，不会替你去抓页面。它也适合本机已有 agent-browser，并且 GitHub CLI 达到 2.99+、能使用 gh --attach 的人。

它不适合还没有媒体文件、指望它打开网址并录屏的人。原文写明它不包装 agent-browser、不抓取网址、不管理 Vercel 认证、不转码视频、也不托管媒体。若你还不能运行 npx，或 CLI 版本不够，先停在阅读说明。

官方仓库见 https://github.com/vercel-labs/before-and-after 请按该页已写出的命令操作。

3 分钟完成第一次尝试

只走官方写出的这一条技能安装路径。

前置条件：本机可以运行 npx，已安装 agent-browser，GitHub CLI 为 2.99 及以上。先确认：下面的命令会把技能装进当前代理。若还不想改代理技能目录，不要执行。这一步不要对真实 PR 执行附加，也不要调用 gh --attach。

安装位置：在项目根目录确认上述副作用后执行：

npx skills add vercel-labs/before-and-after#main

低风险核对：安装完成后，请代理只复述它会做什么——把已有截图和录像附到 PR 的前后对比块，并且只幂等替换一处 <!-- before-and-after:start/end --> 标记，其余描述不动。不要让它修改 PR。不要让它去打开网址或转换视频。

成功信号：技能安装结束，代理能说出需要已有媒体、需要 gh --attach，并且承认它不会抓取或托管文件。若它开始录屏或编造其他安装命令，停住。

使用案例

案例一：给已有媒体的 PR 补上前后对比。官方安装命令是 npx skills add vercel-labs/before-and-after#main。装好后，在评论或描述里准备好已有截图和录像，再让代理附加。gh --attach 会改远端 PR，执行前先确认这是可公开的测试 PR，并确认媒体路径真实存在。

案例二：重复运行时只更新标记块。原文写明它幂等替换一处 <!-- before-and-after:start/end --> 块，其余 PR 描述不动。适合已经附加过一次、只想换掉对比区的人。先只读检查描述里是否已有该标记；没有标记时，原文没有写出它会如何新建整段描述，不要假设。

使用边界

依赖写得很硬：需要 agent-browser 和 GitHub CLI 2.99+（为了 gh --attach）。缺任一条件都不要强行附加。它明确不做这些事：包装 agent-browser、抓取网址、管理 Vercel 认证、转换视频、托管媒体。

安装命令只有一条被原文写出，且带 #main：npx skills add vercel-labs/before-and-after#main。不要改成未出现的标签或安装器。官方页面是 https://github.com/vercel-labs/before-and-after 若代理建议的命令少了 #main，以该页为准。