ビデオディレクター
できること
AIによるビデオ制作の指揮者です。エージェントは各ビートに必要なものを判断し、適切なレンダリングエンジンにルーティングし、すべてを1つのHyperFramesコンポジションにまとめ、frame.mdを介してブランド一貫性を強制し、自己検証を行い、MP4にレンダリングします。
このスキルは、マルチエンジンビデオ合成のためのルーター兼作業リファレンスです。該当するエンジンを使用する場合のみ、そのリファレンスファイルを読み込んでください。
たった一つのルール（すべてを決める）
HyperFramesは、各フレームを ヘッドレスChromeでシーク → FFmpegでエンコード します（frameIndex = floor(t·fps)、同じ入力 → 同じ出力）。したがって、すべてのビジュアルは次の2種類のいずれかです。
| パターン | 実行タイミング | エンジン | ルール |
|---|---|---|---|
| ライブシーク可能アダプター | レンダリング内部で、フレームごとに時刻tで駆動 | GSAP、Lottie（window.__hfLottie）、Three.js、GSAPプロキシonUpdateで駆動されるCanvas | クロック駆動であること — Date.now()、Math.random()（Multi32でシードを固定）、setTimeout、.play() は不可 |
| プリレンダリングアセット | オフラインで実行、ファイルを出力し、クリップとしてインポート | ManimCE（Python→MP4/アルファ）、TTS音声、背景除去 | 最初にレンダリングし、その後<video>/アセットクリップとして配置 |
シークできるならアダプター、できないならプリレンダリング。 Manimは常にプリレンダリングクリップです — Pythonで動作し、ライブアダプターにはなりません。
各ビートをエンジンにルーティング
「Xをティーザー/プロモとして説明（高速、パンチ）」 → references/teaser-explainer.md
「概念/数学/アルゴリズム/アニメーションを説明」 → ManimCE （プリレンダリングクリップ）
「ブランドモーション：ロゴスティング、統計表示、アイコン出現」 → Lottie （ライブ、lottie-web）
「キネティックキャプション、タイトル、情報表示、データコールアウト」 → GSAP （ライブ）← デフォルト
「3D / 空間」 → Three.js （ライブ）
音声 → キャプション → 文字起こし + 承認Webアプリ
音声ナレーションなし → TTS（Kokoro: `npx hyperframes tts`）
ブランドカラー/フォント/モチーフ → frame.md （最初に読み込み）
GSAPはテキスト/モーションの信頼できるデフォルトです。デザインされたブランドグラフィックにはLottie、アイデアをアニメーションで説明するにはManimを使用します。
ワークフロー
- ビートを計画する。 ナラティブアーク + 各ビートに必要なエンジンを決定。16:9 または 9:16 を選択。
- ブランドを設定する。 プロジェクトルートに
FRAME.mdがあることを確認。すべてのカラー/フォント/モチーフはそこから取得 — 新しく作成しない。すべてのビデオには3つのブランドアンカーが必要：リビール時のロゴ + エンドカード、1つの特徴的なLottieアニメーション、リンク付きエンドカード（ロゴ + CTA + URL）。 - 最初にアセットビートをプリレンダリングする（クリップとして存在させるため）：
- Manim →
py -m manim render -qh --fps 30 scene.py SceneName、MP4をassets/にコピー。 - キャプション/TTS → 文字起こし → 承認Webアプリ → 同期、その後
npx hyperframes tts。
- Manim →
- スキャフォールド + コンポーズ。
npx hyperframes init <slug> --non-interactive。index.htmlを作成。以下を使用：- シーク可能なアニメーションバックグラウンド（GSAPプロキシで駆動されるCanvas）
- ブランドモーショングラフィックス用のLottie
- Manimレンダリングを
<video class="clip" muted playsinline>ボディクリップとして - シーンごとのGSAPエントランス、各境界でフラッシュトランジション、最終シーンのみフェードアウト
- ティーザー/ソーシャルペーシング（速いカット、キネティックなワードスラム、フックモンタージュ）の場合は、スライドショーではなくプロデューサーとしてカット
- 自己検証（ゲート）：
npx hyperframes lint（エラー0）→validate（コンソールエラー0、WCAG AA）→ レンダリング → タイムライン全体から5フレームをスポットチェック。修正 → 再実行。 - レンダリング。
npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4。縦長の場合は1080×1920のレイアウトでクローン。
前提条件（最初に確認、グレースフルに低下）
Node 22+、FFmpeg、Python 3.11+ with pip（Manim/キャプション）が必要。ManimCEはpy -m pip install manimでインストール（Tex/MathTex()ではなくText()/MarkupText()を使用する場合はLaTeX不要）。Manimが利用できない場合 → 数学ビートをスキップするか、インストールを提案、ビデオ全体をハードフェイルさせない。
関連スキル
video-edit（文字起こし + 承認Webアプリ）、page-load-animations（Spring/Framer Motionパターン）、marketing-video（Remotion代替パイプライン）。
リソース
- references/teaser-explainer.md — シネマティックティーザー・エクスプレイナーの公式
- references/composition-pattern.md — フルマルチエンジン
index.htmlパターン - references/manim.md — ManimCEシーン作成ガイド
- references/lottie.md — HyperFrames向けLottie統合
- references/editing.md — ソーシャルペーシングとカットのルール
- references/cinematic.md — 心理的/FOMOカット、クリフハンガー構造
出典: https://github.com/hoodini/ai-agents-skills yuv-video-director (MITライセンス) — ショットルーティングロジックとエンジン決定マトリックスを抽出・汎用化。すべての個人ブランド参照（YUV.AI、Neon Phoenix、Yuval Avidani）を削除。