demo-video-master は何をしますか？
機能説明とURLを、1つのコマンドでシネマティックな製品デモ動画に変換します。
4つのツールを1つの自動パイプラインに統合：
| ステージ | ツール | 機能 |
|---|---|---|
| キャプチャ | agent-browser | ライブURLのスクリーンショット + スクロール録画 |
| デザイン | video-shotcraft | 5～7のシネマティックショット、PageCamキー、キャプション、SFX |
| レンダリング | Remotion | React → mp4 |
| 音声 | ElevenLabs | シーンごとのVOナレーション |
| 結合 | ffmpeg | VO + 動画 → 最終的なmp4 |
トリガー
以下のいずれかでこのスキルが起動します：
demo-video: <機能説明> <URL>
<URL> のデモ動画を作成 — <機能説明>
全体パイプライン（開始前にお読みください）
詳細なステップバイステップのエージェント手順については pipeline.md を参照してください。
簡単な概要：
- キャプチャ —
scripts/capture.mjs <URL> <スラッグ>を実行 → PNGがpublic/textures/<スラッグ>/に保存されます - デザイン — キャプチャ結果を指定して
video-shotcraftの自律モードを呼び出し；shotlist.json+ シーンTSXファイルを出力 - 並列実行：
- 3a VO（音声） — バックグラウンドで
scripts/elevenlabs-vo.mjs <スラッグ>を実行 - 3b レンダリング —
npx remotion render src/Root.tsx <CompositionId> out/<スラッグ>.mp4を実行
- 3a VO（音声） — バックグラウンドで
- 結合 —
scripts/merge.sh <スラッグ>— ffmpegでレンダリング済み動画にVOを重ねます - コミット + プレビュー —
examples/<スラッグ>/にコミットし、QuickLookで開く
セットアップ（初回のみ）
# 1. このスキルをインストール
git clone https://github.com/yash0208/demo-video-master ~/.claude/skills/demo-video-master
# 2. agent-browserをインストール（vercel-labs/agent-browser）
npm install -g agent-browser
agent-browser install # Chromeを一度ダウンロード
# 3. 前提スキルをインストール
git clone https://github.com/vincentwei1021/video-shotcraft ~/.claude/skills/video-shotcraft
git clone https://github.com/yash0208/remotion-best-practices ~/.claude/skills/remotion-best-practices
# 4. ffmpegをインストール
brew install ffmpeg # macOS；Linuxの場合は apt install ffmpeg
# 5. envテンプレートを動画プロジェクトにコピー
cp ~/.claude/skills/demo-video-master/.env.example _video/.env.local
# ELEVENLABS_API_KEY と ELEVEN_VOICE_ID を記入
ルール（常に適用）
- スクリーンショットのみ — agent-browserによる実際のページキャプチャを使用；UIを合成しないこと
- PIIマスキング — レンダリングに取り込む前に実際のユーザーデータを置き換えること
- 決定論的レンダリング — Remotionシーン内で
Math.random()/Date.now()を使用しない；すべてのランダム性をインデックスからシードすること - 並列VO＋レンダリング — 時間節約のため、必ずElevenLabsとRemotionを同時に実行すること
- 外部インフォグラフィックのみ — アニメーション要素はスクリーンショットの上に配置；translateZカードリフト、スクリーンショット上にボーダーリングを描画しないこと
環境変数
ELEVENLABS_API_KEY=あなたのAPIキー
ELEVEN_VOICE_ID=あなたのボイスID # デフォルト: Adam (pNInz6obpgDQGcFmaJgB)