dynamic-promo-video

動的なプロモーション動画（HTML シーン＋ナレーション＋音楽）

1280x720、約25～45秒の MP4 を生成します。1つの HTML ページにアニメーションシーンを作成し、Playwright でフレームごとにレンダリングして ffmpeg でエンコードします。ナレーションには TTS 音声（例：ElevenLabs）を使用し、バックグラウンド音楽は音量を下げて流します。

以下の SKILL_DIR は、このスキルのフォルダーを指します。作業フォルダーにコピーされるのはテンプレートのみです。スクリプトは SKILL_DIR/scripts/ から実行します（各スクリプトで --help を使用できます）。Node と Playwright/Chromium（クラウドセッションではプリインストール済みのため、再インストールしないでください）、ffmpeg/ffprobe、Python 3 と numpy が必要です。

手順	使用するもの
シーン	assets/template/index.html · 詳細：references/scene-engine.md
実際のページのスクリーンショット	references/screenshots.md
ナレーション	references/voiceover.md · scripts/tts_elevenlabs.py、scripts/timing.py
レンダリング＋エンコード	scripts/render.js
音楽、ミックス	scripts/music.py、scripts/mix.py · references/music-and-mix.md
チェック	scripts/verify.py

入力

フラグ	意味
--demo、--demo=default	実際のプロジェクトの代わりにデフォルトのデモを作成します。プレースホルダー動画を作成し、このスキルで動画を作る方法を説明します。詳細は以下のデモを参照してください。
--demo=self	スキル自体を説明するデモを作成します（概要、仕組み、インストール、使用方法）。
--voice	デフォルトの ElevenLabs 音声 TABZn6CDfjMNGrsnGzzD でナレーションを付けます。
--voice-elevenlabs=<voice-id>	指定した ElevenLabs 音声でナレーションを付けます。引数なしの --voice-elevenlabs は --voice と同じです。

• ナレーションには、次のいずれかの方法が利用できる場合に限り、ElevenLabs を使用します。確認順は以下のとおりです。
  1. ElevenLabs MCP コネクター（creative_generate_speech ツールは ToolSearch で読み込めます）、または
  2. API キー：ELEVENLABS_API_KEY が設定されているか、セッションのネットワークシークレットに api.elevenlabs.io 用のキーがある場合（その後、scripts/tts_elevenlabs.py を実行します）。
• 実際のプロジェクトで音声フラグが指定されていない場合、利用可能な方法があればデフォルトの音声でナレーションを付け、なければ音楽のみを使用します。
• --demo（すべてのバリエーション）で音声フラグが指定されていない場合は、音楽のみを使用します。--voice（またはデフォルトの音声 ID）を指定した場合は、そのバリエーションに同梱された音声クリップを使用します。ElevenLabs を利用できる方法は不要で、クレジットも消費しません。
• 音声フラグが指定されているのに利用できる方法がない場合は、その旨を伝え、コネクターの接続、キーの追加、または音声クリップの添付を提案します。音声を黙って省略しないでください。音声 ID を捏造したり、ナレーションを偽装したりしないでください。
• ユーザーが音声名を文章で指定した場合は、コネクターの音声リストで検索します。それ以外の場合は、指定された ID をそのまま使用します。

デモ（--demo[=default|self]）

調査、ストーリーボード作成、編集は不要です。各バリエーションは assets/demo/<variant>/ にあり、index.html、narration.txt（シーンごとに1行、「-」はなしを意味します）、および各シーンを共有の assets/demo/clips/ にある承認済みの録音（デフォルトの音声）に対応付ける clips.json が含まれています。

• default（48秒）：シーン1～6は汎用テンプレートで、視聴者自身の動画用のプレースホルダーです。シーン7～9では、プレースホルダーだったことを伝えるブリッジ、「sugatoray/aiskills」の3つのインストール方法、利用開始（音楽のみ）を紹介します。カバーには「Demo of Skill /dynamic-promo-video · sugatoray/aiskills」というタグが付いています。
• self（32秒）：スキル自身を説明します。カバー、課題、シーンエンジンのコード、3つのインストール方法、使い方、利用開始。 | リクエスト | 実行 | | --- | --- | | --demo / --demo=default | python3 SKILL_DIR/scripts/demo.py（音楽のみ） | | --demo=self | python3 SKILL_DIR/scripts/demo.py --variant self | | --voice（またはデフォルトの音声 ID）を追加 | --voice を追加します。バンドル済みのクリップを使うため、ElevenLabs 経由の手順やクレジットは不要です | | --voice-elevenlabs=<other id> と API キーを追加 | --voice-id <id> を追加します（クリップを生成します） | | --voice-elevenlabs=<other id> と MCP コネクターを追加 | バリエーションの narration.txt にある「-」以外の各行につき1つのクリップを生成し（references/voiceover.md を参照）、clips/vo<scene>.mp3 として保存して、--clips-dir clips/ を追加します |

--voice を使うと、実行ごとに同じ結果になります（フレームも音声も同じです）。出力先は promo-demo/demo_final.mp4 と thumbnail.png で、チェック済みです。ステップ5の手順で納品してください。スキルのアイコンは簡略化した図です。

0. 作成前

• まず対象を調査します。README、パッケージページ、マーケットプレイスの掲載情報、インストールコマンドを確認してください。実際の名称、コマンド、バージョンを使用します。機能を創作しないでください。
• プロジェクトの実際のブランディング（バナー、アイコン、色、フォント）と、可能であればドキュメントにある実際のスクリーンショットを使用します。何かを描く前に、リポジトリ内のドキュメント画像を確認してください。
• サンドボックスで許可されているネットワークは制限されています。npm レジストリ、マーケットプレイス、github.com のウェブページは通常、シェルからアクセスできません。公開リポジトリの Git クローンは多くの場合利用できます（add_repo ツールを使ってからクローンしてください）。リポジトリ独自の CLAUDE.md にドキュメントを先に読むよう記載されていて、タスクがリポジトリの編集ではない場合は、ドキュメントの確認を省略することを伝えてください。
• タスクリストを作成します。最後のタスクはフレームと音声の確認、その後の納品にします。

1. ストーリーボード（先にナレーションを書く）

一般的な構成は6シーンです。（1）カバー／タイトル、（2）課題、（3）製品の動作、（4）インストールコマンド、（5）エディター／拡張機能の使い方、（6）コマンドとリンクを含むエンドカードです。テンプレートには、これらのシーンがちょうど6つ含まれています。 シーンごとにナレーションを1行ずつ書きます（1秒あたり約2.5～3語）。シーンの長さはナレーションによって決まり、その逆ではありません。

2. シーンを作成する

SKILL_DIR/assets/template/index.html を作業フォルダーにコピーして編集します。ブランドの CSS 変数、シーンのテキスト、実際のスクリーンショット、カメラのキーフレームを調整してください。特に重要なルール：

• すべての要素は window.setT(t) を通じた t の関数として制御します。CSS アニメーションやタイマーは使いません。
• フレーム0は完成したカバーにします（ソーシャルプラットフォームではプレビューとして使用されます）。シーン1ではフェードアウトのみ行います。
• アイコンは公式ロゴではなく簡略化した図です。公式ファイルが提供されていない場合は、その旨を伝えてください。
• スクリプトが querySelectorAll で参照するクラス名を再利用しないでください。

3. プレビューしてから音声を作成し、タイミングを調整する

node SKILL_DIR/scripts/render.js index.html --preview 0,6,12,17,23,29 --thumbnail thumbnail.png

先にプレビューのフレームを確認してください。その後、Inputs の音声を使って音声クリップを作成します（詳細は references/voiceover.md を参照。シーンごとに1回生成し、有料の生成を再実行しないでください）。API キーがある場合：

python3 SKILL_DIR/scripts/tts_elevenlabs.py --script narration.txt --voice <voice-id> --dry-run   # check the plan first
python3 SKILL_DIR/scripts/tts_elevenlabs.py --script narration.txt --voice <voice-id>

MCP コネクターを使う場合は、シーンごとに creative_generate_speech をその voice_id で1回呼び出します。ナレーションのないシーンには - を指定します（クリップは作成されません。timing.py に - を渡してください）。音声で名前が正しく発音されない場合は、聞こえるとおりに綴り、名前だけをテストし（約15クレジット）、行全体を再生成するのではなく、承認済みのサンプルをクリップに挿入します（references/voiceover.md）。その後、タイミングを調整します：

python3 SKILL_DIR/scripts/timing.py --authored 0,4,9,15,21,26,31 --clips vo0.mp3 vo1.mp3 vo2.mp3 vo3.mp3 vo4.mp3 vo5.mp3

新しい const NB = [...] をページに書き込むには --write-html index.html を追加します（または、出力された行を貼り付けます）。シーンは音声に合わせて長さが調整され、音声が早送りされることはありません。

4. レンダリング、音楽、ミックス

node SKILL_DIR/scripts/render.js index.html --encode promo_silent.mp4
python3 SKILL_DIR/scripts/music.py --style energetic --duration <total> --out music.wav
python3 SKILL_DIR/scripts/mix.py --video promo_silent.mp4 --music music.wav --voice 0.3:vo0.mp3 ... --out promo_final.mp4

ユーザーから音楽が提供された場合は music.py の代わりにライセンス済みのトラックを使います。合成した場合は、シンプルな合成音楽であることを伝えてください。timing.py の出力から --voice 引数をコピーします。後から映像だけを変更する場合は、再レンダリングし、mix.py --audio-from <previous final> を実行します。

5. 確認して納品する

python3 SKILL_DIR/scripts/verify.py promo_final.mp4 --frames <one time per scene>

• 両方のストリームがほぼ同じ長さであることを報告する必要があります。秒ごとの dB の行を確認してください（音声がある間、音楽の音量が下がっていること）。
• check/ で、フレーム0、各シーンにつき1フレーム、最後のフレームを確認します。重なりやテキストの切れがないことを確かめてください。
• 音声が入っているファイルを明確に伝えます。_silent / _final の名前は維持してください。
• SendUserFile（レンダリング結果を表示）と thumbnail.png を送信します。数行で要約し、各シーンに何が映っているか、実写か描画か、確認できなかったこと（音声を聴いていないこと）を説明してください。
• 求められた場合に限り、LinkedIn／ソーシャルメディア投稿用のメモを提案します。主張は README に記載された内容（たとえば「初期開発段階」）にとどめてください。