既存のスクリーンショットを PR の前後比較ブロックに付ける

誰向けか

このスキルは、すでにスクリーンショットや画面録画があり、それらを GitHub Pull Request に前後比較ブロックとして付けたい人向けです。エージェント用スキルであり、既存メディアだけを扱い、ページを代行取得はしません。本機に agent-browser があり、GitHub CLI が 2.99+ で gh --attach を使える人にも向いています。

メディアファイルがまだなく、URL を開いて画面録画してくれると期待する人には向きません。原文は、agent-browser を包まない、URL を取得しない、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 --> マーカーを 1 か所だけ冪等に置き換え、残りの説明は触らない、ということです。PR を変更させないでください。URL を開かせたり、動画を変換させたりしないでください。

成功の合図: スキル導入が終わり、エージェントが「既存メディアが必要」「gh --attach が必要」、そして取得もホストもしない、と言えることです。画面録画を始めたり、別のインストールコマンドを作ったりしたら止めてください。

利用ケース

ケース 1: メディアがすでにある PR に前後比較を足す。公式のインストールコマンドは npx skills add vercel-labs/before-and-after#main です。入れたあと、コメントまたは説明に既存のスクリーンショットと録画を用意し、エージェントに添付させます。gh --attach はリモート PR を変えるので、実行前に公開できるテスト PR であることと、メディアパスが実在することを確認してください。

ケース 2: 繰り返し実行時はマーカーブロックだけ更新する。原文は、<!-- before-and-after:start/end --> ブロックを 1 か所冪等に置き換え、残りの PR 説明は触らない、と書いています。一度添付済みで、比較部分だけ差し替えたい人向けです。先に説明にそのマーカーがあるかを読み取り専用で確認してください。マーカーがないとき、原文は説明全体をどう新規作成するか書いていないので、仮定しないでください。

利用上の境界

依存は厳格です。agent-browser と GitHub CLI 2.99+（gh --attach のため）が必要です。どちらか欠けたら無理に添付しないでください。明確にしないこと: agent-browser を包む、URL を取得する、Vercel 認証を管理する、動画を変換する、メディアをホストする。

原文に書かれたインストールコマンドは 1 本だけで、#main 付きです: npx skills add vercel-labs/before-and-after#main。出ていないタグやインストーラーに変えないでください。公式ページは https://github.com/vercel-labs/before-and-after です。エージェントが提案するコマンドから #main が欠けていたら、そのページを正としてください。