pr-video-demo

name	pr-video-demo
description	PRの変更内容をPlaywrightで録画してアノテーション付きMP4動画を生成する。引数にPR番号やURLを指定可能。トリガー: PR動画, PRデモ動画, PR video, /pr-video-demo, 動画で確認, PRの変更を動画で見せて。PRレビュー用のデモ動画作成、実装内容の動作デモ撮影、変更箇所のビジュアル確認に使用。

PR Video Demo

PRの変更内容をPlaywrightで操作しながら録画し、アノテーション（操作説明・確認ポイント）付きのMP4動画を生成する。

Arguments

引数としてPR番号またはURLを受け取れる。省略時は現在のブランチの差分を使用。

/pr-video-demo 123
/pr-video-demo https://github.com/owner/repo/pull/123
/pr-video-demo              # 引数なし: 現在のブランチのdiffを使用

Prerequisites

• playwright がプロジェクトの node_modules にインストール済み（npx playwright install chromium でブラウザも必要）
• ffmpeg がPATHに存在（webm→mp4変換用）
• ローカル開発サーバーが起動済み

Workflow

1. PR差分を取得・分析

引数の有無に応じて差分を取得する。

引数あり（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

差分から以下を特定:

• 変更されたページ/ルート
• 変更されたUI要素（ボタン、フォーム、表示等）
• 確認すべき動作（新機能、修正、レイアウト変更）

2. シナリオJSONを作成

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に書き出す

3. 録画を実行

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)

4. 出力確認

録画完了後、出力パスをユーザーに提示する。 PR番号/URLが指定されていた場合、PRのコメントに動画を添付するか確認する。

Annotation Design Guidelines

アノテーションの title には操作の種類を示すラベルを使う:

• 画面遷移: ページ移動時
• 操作: クリック、入力、選択などのユーザー操作
• 確認ポイント: PRの変更が反映されている箇所の確認
• 変更前 / 変更後: Before/Afterを見せる場合

body は簡潔に、何をしているか・何を確認すべきかを1文で記述する。

Scenario Design Tips

• 動画の長さは気にしなくてよい。PRの修正内容がすべて確認できることを最優先とする
• 変更に直接関係するページ・操作に絞る
• 管理者側と利用者側など、複数のロール・画面にまたがる変更の場合は動画を分割してもよい（1本にまとめても可）
• Before/Afterを見せたい場合は、mainブランチで1本、PRブランチで1本録る
• フォーム入力は現実的なダミーデータを使う
• screenshot アクションで確認ポイントを強調する（操作の合間に2-3秒見せる）