Repo Demo Video

このスキルを使用すると、リポジトリを洗練された製品デモ計画に変換し、十分なランタイム情報が利用可能な場合は、ブラウザで録画されたデモ動画を生成できます。

基本原則

ユーザーによる完璧な設定よりも、リポジトリの証拠を優先します：

demo.config.json または demo.config.yaml が存在する場合はそれを使用します。
DEMO_GUIDE.md が存在する場合はそれを使用します。
README.md を使用します。
package.json、フレームワークファイル、ルートフォルダ、コンポーネント名、ページタイトル、ソース構造を使用します。
安全なURLが存在する場合、デプロイ済みまたはローカルのアプリをブラウザで探索します。
信頼度スコア付きのフォールバック仮定を生成します。

README.md とソースコードを主要ソースとして扱い、DEMO_GUIDE.md を推奨される人間向けガイド、demo.config.* をオプションの機械向けオーバーライドとして扱います。

ワークフロー

ターゲットリポジトリのパスまたはURLを解決します。MVP CLIではローカルリポジトリパスを使用します。GitHub URLが指定された場合は、将来クローン機能が明示的に利用可能でない限り、ユーザーにローカルクローンを提供するよう依頼します。

アナライザーを実行します：

npm run demo -- --repo ./path-to-repo

オプションの入力：

npm run demo -- --repo ./path-to-repo --config ./demo.config.json
npm run demo -- --repo ./path-to-repo --url https://example.com
npm run demo -- --repo ./path-to-repo --mode draft
npm run demo -- --repo ./path-to-repo --mode full

タイムスタンプ付きの出力フォルダ（例：demoOutput-2026-05-10-143012/）内で生成されたアーティファクトを確認します：
- project_summary.md
- demo_plan.draft.json
- demo_plan.json（信頼度が十分に高い場合）
- narration_script.draft.md
- narration_script.md
- script_quality_report.json
- timing_plan.json
- demo_storyboard.md
- manual_recording_guide.md
- recordings/（ブラウザキャプチャが成功した場合）
- screenshots/（ブラウザ探索が成功した場合）
- voiceover.mp3（TTS_PROVIDER=openai と OPENAI_API_KEY が利用可能な場合）
- demo_video.html（MP4合成が不完全な場合のローカルプレビューフォールバック）
- demo_video.mp4（録画、実際の音声、ffmpeg がすべて利用可能な場合のみ）

信頼度ルール

明示的なドキュメントと設定の主張は high としてマークします。
プロジェクト名、概要、少なくとも1つの機能が明確である場合、READMEの機能リストを最終計画生成の十分な証拠として扱います。
ルート名、コンポーネント名、パッケージメタデータ、明確なコード構造は medium としてマークします。
推測的な製品主張と推測されたアクションは low としてマークします。
重要な主張の信頼度が低い場合は、demo_plan.draft.json を生成し、不足している内容を説明し、最終的な動画計画を確実であると提示しないようにします。

README 解析

製品概要を抽出する際に、バッジ、シールド画像、装飾的な画像行、生URL、ライセンス/ステータスメタデータは無視します。
DEMO_GUIDE.md のピッチ、README の引用概要、README の概要/説明セクション、パッケージ説明の順に優先します。
絵文字や記号を含む装飾的な見出し（## Features など）は、見出しを正規化してからマッチングすることで認識します。
機能/能力/ハイライトの見出し下の箇条書きを高信頼度の機能として抽出します。
使用方法/チュートリアル/デモ/クイックスタートの見出し下の番号付きワークフローを中信頼度のデモフローヒントとして抽出します。
スクリプトを作成する前にナレーション入力をサニタイズします。Markdown のバッジ、画像構文、生URLを音声テキストに引き継がないようにします。

安全性

リポジトリ分析は読み取り専用に保ちます。
生成されたアーティファクトは、ターゲットリポジトリ内の新しいタイムスタンプ付き demoOutput-YYYY-MM-DD-HHMMSS/ フォルダにのみ書き込みます。
ファイルを再帰的に削除したり、破壊的なコマンドを実行したりしないでください。
デプロイコマンドを実行しないでください。
ユーザーがナレーション出力を要求したり、プロバイダ環境変数を設定した場合、外部 LLM/TTS 呼び出しは許可されます。サニタイズされたプロジェクト概要、デモ計画、ブラウザ観測結果、ナレーションスクリプトテキストのみを送信します。
生の .env ファイル、API キー、プライベートトークン、プライベートユーザーデータ、実際の認証情報、不要なソースファイルを外部 LLM/TTS プロバイダに送信しないでください。
機密情報、API キー、プライベートトークン、.env 値、プライベートユーザーデータ、実際の認証情報をナレーション、スクリーンショット、動画、ログ、生成されたアーティファクトに公開しないでください。
テストアカウントがドキュメント化されている場合、ユーザーが明示的に別の指示をしない限り、デモアカウントが使用されていることのみを記載します。

ブラウザと動画の動作

設定、DEMO_GUIDE.md、README、または --url 引数からのデプロイURL demoUrl を優先します。
Playwright が利用可能な場合は、これを使用して表示されている見出し、ボタン、リンク、フォームを検査し、スクリーンショットや録画をキャプチャします。
控えめな DOM ヒューリスティックを使用して、安全なサンプル入力を入力し、空でないセレクトオプションを選択し、「追加」「計算」「方法」「リソース」「新規」「作成」などの一般的なデモコントロールをクリックします。
各計画済みシーンを、ナレーションのペースに合わせて十分な時間画面に表示し、ヒューリスティックアクション後に短い間隔を置いて、録画が単なる高速クリックにならないようにします。
正規の .webm 録画パスを run_report.json に登録します。
実行手順が不明確な場合、ローカルプロジェクトの起動を強制しないでください。
Playwright、TTS、ffmpeg、またはアプリケーションランタイムが利用できない場合でも、作成されたアーティファクト、部分的なデリバラブル、demo_video.html、および手動録画ガイドを生成します。
最終的な MP4 は音声の長さに合わせて合成します。最短ストリームでの切り詰めは行いません。ブラウザ録画が音声より短い場合は、ffmpeg の tpad で最終ビデオフレームを延長し、延長時間を報告します。

プロフェッショナルスクリプト作成

決定論的なドラフトをフォールバックとして使用しますが、SCRIPT_PROVIDER=openai と OPENAI_API_KEY が設定されている場合は、OpenAI スクリプトライターを優先します。
最終スクリプトを作成する前に timing_plan.json を生成します。利用可能な機能、ブラウザシーン、設定された動画時間、ペーシング警告に基づいて生成します。
スクリプト作成と OpenAI TTS に同じ OPENAI_API_KEY を使用します。
製品デモ作成プロンプトは src/prompts/demoNarrationPrompt.ts で制御します。
OpenAI Responses API モデルは OPENAI_SCRIPT_MODEL で制御します。未設定の場合は OPENAI_MODEL にフォールバックし、さらに gpt-5.4-mini にフォールバックします。
テンプレートドラフト用に narration_script.draft.md、最終 LLM またはフォールバックスクリプト用に narration_script.md を作成します。
script_quality_report.json を作成し、プロバイダ、モデル、フォールバック理由、品質ゲート警告を含めます。
プロンプトでは、スクリプトライターにまず製品を理解させ、バッジや生のREADMEメタデータを避け、オーディエンス/問題/価値に焦点を当て、不確かな主張には控えめな表現を使用し、タイミングプランのシーン数とワード予算を尊重するように指示します。

デモビジュアルガイダンス

洗練されたブラウザ録画のために、アプリケーションのソースコードを編集するのではなく、Playwright を通じて一時的で永続的でないビジュアルガイダンスオーバーレイを注入します。

以下を使用します：

現在のナレーションビートに対する控えめなキャプション。
アクティブなUI要素または結果領域の周りにハイライトリング。
高い z-index、pointer-events: none、固定配置。
製品UIを覆い隠さないニュートラルなスタイル。

機能を偽造するためにオーバーレイを使用しないでください。視聴者の注意を実際のUI状態変化に導くためだけに使用します。オーバーレイは録画ブラウザセッション中のみ存在し、セッション終了時に消える必要があります。

音声

OPENAI_API_KEY が設定されている場合、フルモードではデフォルトで OpenAI TTS を使用します。
実際の音声を明示的に生成するには、TTS_PROVIDER=openai と OPENAI_API_KEY を設定します。
TTS_PROVIDER が未設定でも OPENAI_API_KEY が存在する場合は、OpenAI TTS を使用します。
ローカルモックモードを強制するには、TTS_PROVIDER=mock を設定します。
OPENAI_API_KEY はプロフェッショナルスクリプトライターで使用されるキーと同じでも構いません。
オプション変数：OPENAI_TTS_MODEL、OPENAI_TTS_VOICE、OPENAI_TTS_INSTRUCTIONS、TTS_VOICE。
実際の音声を現在の実行フォルダに書き込みます。例：demoOutput-2026-05-10-143012/voiceover.mp3
音声を作成するには、サニタイズされた voiceover_script.txt テキストを設定されたTTSプロバイダに送信する必要があります。
API キーを生成されたファイルに書き込まないでください。
デモを公開する際は、生成された音声がAI生成であることを開示します。

スキルの拡張

アーキテクチャをモジュール式に保ちます。GitHub URL のクローン、より深いUI操作、実際のTTSプロバイダ、キャプション、動画スタイル、ローカル起動、人間によるレビューなど、将来のサポートを追加するには、対応する src/*.ts モジュールを拡張し、CLIを1つの大きなスクリプトにしないでください。

レポジトリデモ動画スキル