把已有截圖附到 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，以該頁為準。