PRの変更内容をPlaywrightで録画してアノテーション付きMP4動画を生成する。引数にPR番号やURLを指定可能。トリガー: PR動画, PRデモ動画, PR video, /pr-video-demo, 動画で確認, PRの変更を動画で見せて。PRレビュー用のデモ動画作成、実装内容の動作デモ撮影、変更箇所のビジュアル確認に使用。
PRの変更内容をPlaywrightで操作しながら録画し、アノテーション（操作説明・確認ポイント）付きのMP4動画を生成する。
引数としてPR番号またはURLを受け取れる。省略時は現在のブランチの差分を使用。
/pr-video-demo 123
/pr-video-demo https://github.com/owner/repo/pull/123
/pr-video-demo # 引数なし: 現在のブランチのdiffを使用
playwright がプロジェクトの node_modules にインストール済み（npx playwright install chromium でブラウザも必要）ffmpeg がPATHに存在（webm→mp4変換用）引数の有無に応じて差分を取得する。
引数あり（PR番号 or URL）:
# PR番号の場合
gh pr view 123 --json title,body,baseRefName,headRefName,url,files
gh pr diff 123
# URLの場合（URLからowner/repoと番号を抽出）
gh pr view https://github.com/owner/repo/pull/123 --json title,body,baseRefName,headRefName,url,files
gh pr diff https://github.com/owner/repo/pull/123
引数なし（現在のブランチ）:
# 現在のブランチに紐づくPRがあるか確認
gh pr view --json title,body,baseRefName,headRefName,url,files 2>/dev/null
# PRがあればそのdiffを使用、なければgit diffを使用
git diff main...HEAD --stat
git diff main...HEAD
差分から以下を特定:
PR差分の分析結果から、操作手順を記述したJSONシナリオを作成する。 シナリオフォーマットの詳細は references/scenario_format.md を参照。
{
"title": "PR #123: ログイン画面のバリデーション改善",
"description": "入力バリデーションのリアルタイム表示を追加",
"steps": [
{
"action": "navigate",
"url": "/login",
"annotation": { "title": "画面遷移", "body": "ログイン画面を開きます" }
},
{
"action": "fill",
"selector": "#email",
"value": "invalid-email",
"annotation": { "title": "操作", "body": "不正なメールアドレスを入力" }
},
{
"action": "screenshot",
"duration": 2500,
"annotation": { "title": "確認ポイント", "body": "リアルタイムでバリデーションエラーが表示される" }
}
]
}
シナリオファイルはプロジェクトルートの tmp/ に保存:
mkdir -p tmp
# JSONをtmp/pr-demo-scenario.jsonに書き出す
node ~/.claude/skills/pr-video-demo/scripts/record_demo.mjs \
--scenario tmp/pr-demo-scenario.json \
--base-url http://localhost:3000 \
--output tmp/pr-demo.mp4 \
--width 1280 \
--height 800
Options:
--scenario (required): シナリオJSONファイルのパス--base-url: 開発サーバーURL (default: http://localhost:3000)--output: 出力MP4パス (default: ./pr-demo.mp4)--width/--height: ビューポートサイズ (default: 1280x800)--keep-raw: 変換前webmを保持--project-dir: Playwrightを探すプロジェクトルート (default: cwd)録画完了後、出力パスをユーザーに提示する。 PR番号/URLが指定されていた場合、PRのコメントに動画を添付するか確認する。
アノテーションの title には操作の種類を示すラベルを使う:
body は簡潔に、何をしているか・何を確認すべきかを1文で記述する。
screenshot アクションで確認ポイントを強調する（操作の合間に2-3秒見せる）