media-use: オーディオ/画像を取得する前に、/media-useを呼び出してHeyGenカタログからBGM/SFX/画像を解決してください。最初に--adoptを実行して既存アセットを登録します。詳細は/media-useスキルを参照してください。

general-video — 汎用動画ワークフロー

ルートを確定してから構築してください。 これはカスタムコンポジション作成のためのフォールバックです。入力が専門ワークフローに明確に適合する場合は、そちらを優先してください：製品マーケティング→/product-launch-video；一般的なウェブサイト→/general-video；トピック解説→/faceless-explainer；GitHub PR→/pr-to-video；既存映像→/embedded-captions·/talking-head-recut；短いナレーションなしモーショングラフィック→/motion-graphics；Remotion移植→/remotion-to-hyperframes。対象外：ライブ/レンダリング時データ、完成動画のNLEスタイル編集、HyperFramesでキャプチャできない映像の制作。不明な場合は、まず**/hyperframesを読んでください。**

依頼されたものを正確に構築してください。 タイトルカードはタイトルカードです — タイトルカード＋3つの補助シーン＋環境音楽＋キャプションではありません。追加のシーンや要素が実際に作品を向上させる場合は、それを_提案_してください。黙って追加しないでください。小さな編集（色の修正、1つの長さ調整、1つの要素追加）の場合は、計画ステップをスキップして直接構築に進んでください。

アプローチ

発見 — 曖昧なリクエストの場合のみ

漠然とした探索的なリクエスト（「ブランド向けに何か作って」「格好いいイントロを」）の場合 — 色を選ぶ前に意図を理解してください：

オーディエンス — 誰が見るのか？開発者 / 経営陣 / 一般消費者？
プラットフォーム — どこで再生されるのか？ソーシャル（15秒） / ウェブサイトヒーロー / 製品デモ / 社内？
優先事項 — 最も重要なのは？モーション品質 / コンテンツ正確性 / ブランド忠実度 / スピード？
バリエーション — 1つの最良案か、それとも2～3の意味的に異なるオプションか（異なるペース、エネルギー、構造 — 単なる色の変更ではない）？

具体的なリクエスト（「タイトルカードを追加」「シーン3のタイミングを修正」）の場合は、発見ステップをスキップしてください。

ステップ1 — デザインシステム → `hyperframes-creative`

まず視覚的アイデンティティを確立します。プロジェクトにデザイン仕様がある場合は、それを読んでください（優先順位は frame.md → design.md → DESIGN.md。ブランドの真実として扱います — 正確な色、フォント、制約）。

仕様がない場合は、色やフォントを選ぶ前に必ずhyperframes-creative/references/house-style.mdとhyperframes-creative/references/video-composition.mdの両方を読む必要があります。 house-style.mdは「プロンプトを解釈して実際のコンテンツを生成する」ための開始点、レイジーデフォルトリスト、レイヤーレシピを提供します。video-composition.mdは、映像メディアの密度/スケール/前景の詳細化（データバー、レジストレーションマーク、等幅メタデータ、「8～10要素、うち2つはユーザーが依頼していないもの」）に関するルールを提供し、これを読むことで「生成された」ではなく「制作された」見た目を実現します。片方だけを読むのが最も一般的なミスです — video-composition.mdはエージェントがスキップしがちなファイルであり、まさにこれがフラットで中央寄せのウェブページ風の出力を防ぐものです。パレットを自己発明してこれらをスキップしないでください。hyperframes-creativeへの移行はここでは必須であり、オプションの分岐ではありません。そこから、必要に応じて名前付きスタイル/ムード → references/visual-styles.md、またはインタラクティブピッカー → references/design-picker.md も取得してください。仕様/スタイルはブランドを定義しますが、コンポジションルールは定義しません。

方向性を見つける（曖昧なブリーフ、仕様なし）： 色を選ぶ前に、一文を書いてください — この名前/単語/トピックは何を喚起し、どのような視覚的_世界_（メタファー、設定、楽器、モチーフ）がそれを表現しますか？例：サイバーセキュリティツール → 金庫のドア / 境界線スキャンライン / ロックタンブラー；瞑想アプリ → 潮の満ち引き、息、ゆっくりとした光の広がり。主題の_意味_を読んでください。単なる文字通りの再スタイルではありません。文字通りの再スタイルではなく、具体的な方向性を選んでください。これは、シングルシーン作品（拡張が正しくスキップされる場合）に対するプロンプト拡張（ステップ2）の安価な代替手段であり、これがデザインされたコンセプトと、グラデーション上のジェネリックロゴとの違いです。

ステップ2 — プロンプト拡張 → `hyperframes-creative`

複数シーンのすべてのコンポジションで実行します（シングルシーン作品と自明な編集ではスキップ）。デザイン仕様＋ハウススタイルに照らしてリクエストを展開し、下流の作業が一貫して同じ方法で読むことができる中間表現を作成します。hyperframes-creative/references/prompt-expansion.mdを参照してください。

ステップ3 — 計画

HTMLを記述する前に、ハイレベルで考えます：

何を — 視聴者体験：ナラティブアーク、キーモーメント、感情的なビート。
構造 — コンポジション数、サブコンポ vs インライン、どのトラックがビデオ/オーディオ/オーバーレイ/キャプションを運ぶか。モノリシック単一ファイル vs モジュラーサブコンポの判断については、hyperframes-core/references/composition-patterns.md § 2つのアーキテクチャ（経験則：ハードシーンカットが3つ以上、または再利用されるシーンがある場合 → モジュール化；短いシングルシーン作品は1ファイルに留める）を参照してください。
リズム — 実装する前にパターンに名前を付けます（例：fast-fast-SLOW-SHADER-hold）；hyperframes-creative/references/beat-direction.mdを参照してください。
タイミング — どのクリップが再生時間を決定するか、トランジションの位置、ペーシング。
レイアウト — 最初に最終状態を構築します（以下参照）。
アニメーション — その後、hyperframes-animationを介してモーションを追加します。

アニメーションの前にレイアウト

すべての要素を、最も目立つ瞬間に配置される位置 — 完全に入力され、正しく配置され、まだ終了していない状態 — に配置します。まず静的HTML＋CSSとして記述します。まだGSAPは使用しません。

理由： アニメーションの開始状態（画面外、スケール0、不透明度0）に要素を配置し、_思う_着地位置にトゥイーンする場合、最終レイアウトを推測していることになります — 重なりはレンダリングまで見えません。最初に最終状態を構築すれば、モーションを追加する前にレイアウトの問題を確認して修正できます。

各シーンのヒーローフレームを特定します — 最も多くの要素が同時に見える瞬間。それが構築するレイアウトです。
そのフレームの静的CSSを記述します。コンテンツコンテナは、絶対オフセットではなくパディングでシーンを埋める必要があります：

.scene-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 120px 160px; /* padding positions content; fills any scene size */
  gap: 24px;
  box-sizing: border-box;
}

コンテンツコンテナに position: absolute; top: Npx を決して使用しないでください — コンテンツがスペースより高い場合にオーバーフローします。絶対配置は装飾要素用に予約してください。

⚠ 上記のwidth/height: 100%は、すべての祖先が確定した高さを持っている場合にのみ機能します。 ルートの<div data-composition-id>と、それと.scene-contentの間のラッパーはサイズ設定されている必要があります（ルートにposition: relative; width: 1920px; height: 1080px — hyperframes-core → 「Root must be sized」を参照）。これをスキップすると、flexコンテナは約0に縮小し、コンテンツは左上隅に積み重なり、最初のグリフはx=0でクリップされます — その間lint/inspectは問題0を報告し続けます。そして、.scene-contentの**padding（≥80px）は常に保持**してください：これがタイトルセーフマージンです。これを単なるgapに置き換えないでください。

エントランスを追加 — gsap.from()を使用して、画面外/不可視からCSS位置へアニメーションします（サブコンポジションでは、開始状態を明示するためにgsap.fromTo()を推奨します。hyperframes-core/references/sub-compositions.md参照）。CSS位置が正解であり、トゥイーンはそこへの道のりです。
終了はトランジションで処理 — hyperframes-animation/transitions/のシーントランジションルールに従い、最終シーンのみが要素をアニメーションアウトします。シーン間ではトランジション自体が終了です。

時間を超えた共有スペース： 要素Aが要素Bが同じ領域に入る前に終了する場合でも、両方の要素はそれぞれのヒーローフレームに対して正しいCSS位置が必要です — タイムラインの順序付けにより共存は防がれ、レイアウトステップが偶発的な重なりをキャッチします。レイヤー化されたグロー/シャドウとzスタックの奥行きは_意図的な_重なりです。このステップは_意図しない_衝突（2つの見出しが重なる、コンテンツがフレームからはみ出す）をキャッチするためのものです。

構築 — ドメインスキルに委任

以下は、このスキルの全表面（description参照）をそのリファレンスにマッピングします — 網羅的ではありません。意図がリストにない場合は、hyperframes-creative（ルック/コンセプト）、hyperframes-animation（モーション）、hyperframes-core（規約）、hyperframes-media（オーディオ/キャプション）を経由してください。最初の行は付加的です — あなたの意図行と併せて読んでください。どちらか一方だけではありません。

構築するもの…	最初に読むもの（順序順）
常に — すべての非自明な作品で、以下の意図行に加えて	`hyperframes-creative/references/house-style.md` + `references/video-composition.md`（ステップ1 / HARD-GATEでもゲートされています。「生成された」ではなく「制作された」外観のための前景詳細化）
キネティックタイポグラフィ / テキスト重視	`hyperframes-animation/techniques.md`（キネティックタイプ） + `adapters/gsap-easing-and-stagger.md` + `rules/kinetic-beat-slam.md`
タイトルカード / ローワーサード / オーバーレイ / PiP / テキスト背景透過	`hyperframes-creative/references/composition-patterns.md` +（中央揃え/サイズ調整フレーム用）`hyperframes-core` → 「Root must be sized」
ロゴ / ブランドマークリビール	`hyperframes-animation/rules/svg-path-draw.md`（ドローオン） + `rules/3d-text-depth-layers.md` + `rules/scale-swap-transition.md`
データ / 統計 / 数字	`hyperframes-animation/rules/counting-dynamic-scale.md` + `rules/stat-bars-and-fills.md` + `hyperframes-creative/references/data-in-motion.md`
製品 / アプリ / UI デモ	`hyperframes-animation/rules/3d-page-scroll.md` + `rules/cursor-click-ripple.md` + `rules/press-release-spring.md`
オーディオリアクティブ / 音楽駆動	`hyperframes-creative/references/audio-reactive.md`（事前抽出バンド、モーションにマッピング）
ナレーション / 音声 / 音楽 / SFX / キャプション	`hyperframes-media` → 共有オーディオエンジン `scripts/audio.mjs`（1回の呼び出し = TTS + BGM + SFX → `audio_meta.json`）；`hyperframes-core`を介したキャプション作成＋アセット配置。以下のオーディオを参照してください。
マルチシーン / トランジション	`hyperframes-animation/transitions/overview.md` 次に`transitions/catalog.md`（概要だけでは終わりません — GSAPレシピはカタログにあります）
モジュラー / サブコンポジション	`hyperframes-core/references/composition-patterns.md` + `references/sub-compositions.md`

オーディオ：1つのエンジン（TTS · BGM · SFX）

作品で必要な場合のみ（「依頼されたものを正確に構築する」に従い — タイトルカードに環境音楽は不要）。TTSを手作りしたり、コピーをベンダー調達したりしないでください。中立的なaudio_request.jsonを書き、hyperframes-mediaの共有エンジンを呼び出します。1つのスイッチで自動的に劣化します — HeyGenクレデンシャルあり → HeyGen TTS + 音楽/SFX取得；なし → ElevenLabs/Kokoro TTS、Lyria/MusicGen BGM生成、およびバンドルされたSFXライブラリ。完全なフラグリスト＋リクエスト/メタスキーマ：hyperframes-media/scripts/audio.mjsのヘッダーコメントを参照してください。

// audio_request.json — ナレーションセグメントごとに1行。`id`はユーザーが指定します（audio_metaに結合されます）
{
  "lines": [
    { "id": "s1", "text": "あなたのオープニングラインです。", "sfx": ["whoosh"] },
    { "id": "s2", "text": "次のビート。" },
  ],
  "bgm": { "query": "calm cinematic underscore" }, // "mode"を省略 → 自動（HeyGenなら取得、それ以外は生成）。無効にするには"none"
}

# <MEDIA_DIR> = インストールされたhyperframes-mediaスキルディレクトリ（このスキルの兄弟）
node <MEDIA_DIR>/scripts/audio.mjs --request ./audio_request.json --hyperframes . --out ./audio_meta.json

その後、audio_meta.jsonを読みます。各voices[].path +（bgm.path、sfx[]）を<audio>トラックとしてマウントし、voices[].wordsをキャプションに使用します。すべてhyperframes-core（オーディオトラック＋キャプション作成）に従ってください。BGMが生成パスを取った場合（bgm_pending: true）、最終レンダリングの前にhyperframes-media/scripts/wait-bgm.mjsを実行してください。

出力チェックリスト → `hyperframes-cli`

…

[翻訳のため一部省略]

EvovexAI/EvoFlow - 汎用動画ワークフロー

EvoFlow - 汎用動画ワークフローとは？

お気に入りのAIに質問する

ドキュメント