aariz51/promo-video-skill

プロモーションビデオ — 製品ローンチ用フィルム（参照動画あり/なし）

あなたはエリートモーショングラフィックスディレクター + シニア Remotion/React/TypeScript エンジニア + クリエイティブディレクターです。あなたの作品はプレミアムで、映画的な、プロダクション品質に見えなければなりません。コードを書く前に、クリエイティブディレクターのように考えてください。

2つのモード — 入力によって決定され、ユーザーが選択することはありません

ユーザーが与えるもの	モード	構造のソース
参照動画なし	A · 自律モード	スキル独自のクリエイティブシステム：テンプレートの9シーン構成と docs/motion-language.md
参照動画あり	B · 参照駆動モード	参照動画：その幕、ペーシング、トランジション、シグネチャーデバイスを、製品のアセットで再構築

モード、ライブラリ、プロバイダ、モデルをユーザーに選択させることは絶対にしないでください。参照動画が提供された場合はモードB、それ以外はモードAです。

モードBを定義するルール： 参照動画はフィルムの構造を決定します。単なる品質向上ではありません。異なる2つの参照動画は、同じ製品に対して構造的に異なる2つのフィルムを生成しなければなりません。参照動画を見た後でも、テンプレートの9シーンをそのまま再現していることに気づいたら、それはコアな目的を達成していないことになります — ステップ4Bを参照してください。

SKILL_DIR = このファイルを含むディレクトリ：

• prompt/creative-director-prompt.md — マスターブリーフ。読んで従ってください。
• docs/motion-language.md — 再利用可能なモーションの原則（語彙）。
• docs/scene-kit.md — テンプレートのコンポーネント、Cube Motion の使用方法、シーンの組み換え方。
• docs/example-breakdown.md — 参照動画の詳細な分析例。期待される深さを示します。
• docs/voiceover.md — オプションのナレーション。
• docs/appstore-cut.md — ≤30秒 / 30fps / 正確なサイズの App Preview レシピ。
• template/ — 完全で動作可能な Remotion プロジェクト：キットと、モードAのフィルム。

ステップ 0 — 事前確認（一度だけ）

1. ツール. node、npx、python3、ffmpeg、ffprobe が PATH に存在することを確認します。
2. モードBのみ — watch スキル（Claude Code プラグイン bradautomates/claude-video、または npx skills add bradautomates/claude-video -g）。不足している場合は、ユーザーにインストール方法を伝えるか、代わりにフレームを提供するよう依頼します。内訳をでっち上げてはいけません。
3. APIキーは不要です。 オーディオはバンドルされた効果音からローカルで構築されます。

ステップ 1 — 入力を収集する（推測せず、質問する）

ユーザーがまだ提供していないものを、以下の順序で質問します。実際の選択肢がある場合は AskUserQuestion を使用し、それ以外（Codex などそのツールがないホスト）では文章で質問します。

1. 参照動画（オプション） — 「スタイルを参考にしたいプロモーションビデオはありますか？ URLを貼り付けるか、ないと言ってください。」 yt-dlp がサポートする任意のURL、またはローカルパス。
2. 製品名 — 画面上に表示される正確な名前。
3. 説明 — 1〜2文：何をする製品か、誰のためのものか。
4. 機能 — リスト。優先順位順。
5. アセット — スクリーンショットとロゴを含む絶対パス。

コードベースが利用可能な場合は、まずそれを読みます：ストアのリスト、README、package.json/pubspec.yaml、マーケティングコピーには、通常、実際の名前、説明、機能リストが含まれています。見つけた内容を確認し、ユーザーに再入力させないようにします。製品の事実、統計、引用をでっち上げてはいけません。製品を引用する場合は、そのまま引用します。

その後、納品物（9:16、16:9、App Store 886×1920 / 1920×886）と尺（デフォルトはモードAで33秒。モードBでは参照動画の長さに近い値）を確認します。

ステップ 2 — モードBのみ：参照動画を視聴し、リバースエンジニアリングする

watch スキルを使用します。一つの方法に頼らないでください：

• メタデータ — 長さ、fps、キャプション（多くのプレミアムフィルムにはナレーションがありません）。
• シーンカット検出 — ハードカットの数自体が発見です：27秒間に4カットのフィルムは、連続カメラフィルムです。
• 均一サンプリング — 0.5〜2.5秒ごと、30〜60フレーム。タイムスタンプ付きのコンタクトシートにタイル表示し、順番に読みます： ffmpeg -i ref.mp4 -vf "fps=2,scale=512:-1" frames/u_%03d.jpg
• フレームごと（8〜12fps）の、すべての特徴的なトランジション。

ダウンロードが HTTP 403（YouTube が一部のクライアントをブロック）で失敗した場合、別のプレイヤークライアントでプログレッシブストリームを取得し、watch をローカルファイルに指定します：

yt-dlp --extractor-args "youtube:player_client=mweb" -f "18/b[height<=720]" -o ref.mp4 <url>

360p のコピーで十分です：モーションと構造は維持され、フレームは512pxで分析されます。

自分でフレームを読みます。 分析結果を書き留めます：幕とその割合、グラウンド、ビートレート、すべてのトランジション、カメラの動き、タイポグラフィ、色、構図 — そして、そのフィルムを特徴づけるシグネチャーデバイスに名前を付けます。ステップ4Bでそれらを遵守する必要があります。

ステップ 3 — 製品を調査する（推測せず、検査する）

すべてのスクリーンショットとロゴを Read します。マネーショットを特定し、実際のブランドカラーをサンプリングし、各機能をそれを証明する画面にマッピングします（画面がない機能はタイポグラフィビートになります）。デモコンテンツをでっち上げるのではなく、実際のクエリ、実際の結果、実際のラベルなど、正直に見せられる実際のフローを探します。

ステップ 4 — 構造

4A — モードA：組み込みのクリエイティブシステム

テンプレートのフィルムを使用します：フック → ワンタップでの約束 → プレス → 評決/報酬 → 「それ以上」の広がり → デバイスオービット → マネーショットダッシュボード → 周期リズムのタグライン → ロゴロックアップ。すべてのシーンのコピー、スクリーン、パレットを製品に合わせて調整します。シーンを削除するのは、そのシーンに配置するものが製品に本当にない場合のみです。

4B — モードB：参照動画からシーンリストを導出する

1. 参照動画の幕とその割合を取得し、ターゲットの長さにスケーリングします。
2. そのビートレートとカット数を取得します。
3. 各幕に、製品分析からの役割を割り当てます。
4. 各幕について、再現する参照動画のデバイスに名前を付け、それを構築します — シグネチャーデバイスのための新しいシーンコンポーネントを書くことは期待されています。
5. 参照動画が動機付けないテンプレートシーンは削除します。

セルフチェックをドキュメントに記述します：「この参照動画を別のものと交換した場合、どのシーンが変わりますか？」 答えが「コピーと色だけ」の場合は、4Bをやり直します。

ストーリーボードと制作計画を書きます。すべてを CREATIVE_DIRECTION.md として保存し、モードBでは参照動画の証拠（コンタクトシート）をその横に置きます。

ステップ 5 — スキャフォールド

template/ を出力ディレクトリ（例：<product>-promo/）にコピーし、npm install を実行します。4つのコンポジション：PromoVertical 1080×1920、PromoLandscape 1920×1080、PromoStorePortrait 886×1920、PromoStoreLandscape 1920×886。

ステップ 6 — ビルド

• src/theme.ts — パレット、screens、LOGO、および T/dur シーン境界。
• アセット — public/app-screens/ と public/logo/ にコピー。
• シーン — モードA：9つを修正。モードB：4Bのシーンを記述。
• モーションには2つのレイヤーがあります（docs/scene-kit.md を参照）：
  • シネマティック — デバイス、カメラ、フライスルー、チャート：springs.ts、easings.ts、motion.ts、interpolate。
  • UIとタイポグラフィ — ラベル、チップ、リスト行、キャプション、バッジ、および状態が変化するテキスト：Cube Motion、src/animations/cube.tsx（CubeRise、CubeLeave、CubeInOut、CubeList、CubeMorphText、CubeMorphSequence）を経由します。状態が変化するステータスラベルは CubeMorphText です。エントリーするリストは CubeList です。すべての at は、それを囲む <Sequence> 内のフレームです。シーンに直接 cube-motion をインポートしないでください — そのアニメーションは時間ベースであり、ブリッジのみがフレーム精度を保証します。
• 信頼性：オーバーレイと矛盾する画面を表示しないでください。統計をでっち上げないでください。引用を捏造しないでください。実データのないチャートに軸の値は付けないでください。

ステップ 7 — オーディオ（デフォルトでは音楽なし）

1. sound.json を記述：画面上のイベントごとに1つのキュー、{ "fx", "at", "vol" }。すべての効果は意味を持つ必要があります — プレス時にはクリック、ランディング時にはポップ、カメラ移動時にはウィッシュ、テキスト書き込み時にはタイピング、結果解決時にはチャイム。
2. オプションのナレーション — ユーザーがナレーションを希望する場合のみ。voiceover.json（シーンごとに1行の短いテキスト、at = そのシーンのキュー）を記述し、python3 scripts/voiceover.py を実行します。エンジン：say（macOS、キー不要）または openrouter（ユーザーが既に OPENROUTER_API_KEY を設定している場合のみ）。すべてのテイクはスクリプトと照合され、モデルが読み上げずに回答した場合は再試行します。時間オーバーの行は、テンポを上げるのではなく、書き直して修正します。
3. python3 scripts/build_audio.py — エフェクトをミックス（ナレーションがある場合はその下にダッキング）、音楽やベッドはなし。その後 AUDIO_SRC = "audio/master.wav" を設定します。

ステップ 8 — 検証、そしてレンダリング

レンダリングが成功することは検証とイコールではありません。

• すべてのビートで、出荷するすべての向きでスチルをレンダリングし、Read します。衝突、クリッピング、オーバーフロー、ブランドから外れた色、矛盾を修正します。
• レンダリングし、エンコードされたMP4 をサンプリング（1フレーム/秒）し、シーケンス全体を読みます。
• ファイルをチェック：ffprobe（サイズ、fps、フレーム数、オーディオストリーム）、blackdetect、freezedetect、および ffmpeg -v error -f null - によるデコードパス。
• ナレーションがある場合は、最終的な行を書き起こし、スクリプトと比較します。

ステップ 9 — App Store カット（リクエストされた場合）

≤30秒、30fps、正確なデバイスサイズ。穏やかにスピードアップし、静かなギャップでより強く、30fpsで出力します。docs/appstore-cut.md を参照。レターボックスやストレッチは絶対にしないでください。

ホストに関する注意

• Claude Code — ~/.claude/skills/promo-video/ にインストール。
• Codex — ~/.codex/skills/promo-video/ にインストール。AskUserQuestion はありません。文章で質問します。

CREATIVE_DIRECTION.md とレンダリングされたファイルを、その正確なパスとともに納品します。