hyperframes-read-first

HyperFrames — まずはこちらをお読みください

HyperFrames のタスクを始めるときは、まずこちらをご覧ください — 特に、プロジェクトエージェントの設定（CLAUDE.md / AGENTS.md / .cursorrules）がない場合にご利用ください。機能マップと動画ルーターを以下に示します。

機能マップ — 目的に応じたスキル

やりたいこと	参照先
動画を作成する（URL、概要、トピック、GitHub PR、既存の映像、またはアニメーション化する単一要素から）	下記の動画ルーティング（§ 動画ルーティング）
HTML コンポジションを作成／編集する — data-* コントラクト、クリップ、トラック、サブコンポジション、変数	/hyperframes-core
アニメーション化する — 基本的なモーションルール、シーンのブループリント、トランジション、ランタイムアダプター（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU）	/hyperframes-animation
クリエイティブディレクション — design.md、配色、タイポグラフィ、ナレーション、ビート計画、オーディオリアクティブ	/hyperframes-creative
メディアの前処理 — TTS ナレーション、BGM、文字起こし、背景除去、字幕	/hyperframes-media
CLI 開発ループ — 初期化、リント、検証、検査、プレビュー、レンダリング、公開、診断	/hyperframes-cli
レジストリのブロック／コンポーネントをインストールする（hyperframes add）	/hyperframes-registry

コンポジションの作成コントラクト（時間指定要素にはすべて data-start / data-duration / data-track-index が必要で、時間指定要素には class="clip" が必要です。GSAP タイムラインは一時停止し、window.__timelines に登録します。ロジックは決定的である必要があり、Date.now() / Math.random() / ネットワークは使用できません）はここでは重複して説明しません — /hyperframes-core に記載されています。コンポジションの HTML を記述する前に、そちらをお読みください。

HyperFrames でできないこと — 最初にご確認ください

HyperFrames は HTML のコンポジションを作成し、コードから MP4 にレンダリングします。この方式には、明確な適用範囲の限界があります。その範囲を超えるリクエストは、振り分け先を選ぶ問題ではなく、対象外です。そのため、ワークフローを試すのではなく、対応をお断りするか、適切なツールをご案内してください。以下は特定のリクエストだけでなく、アーキテクチャに由来する制約です。

• レンダリングは決定論的で、自己完結しています。 作成時にすべての値、アセット、テキストを埋め込みます。レンダリング時にネットワーク呼び出しやライブデータ／レンダリング時のデータ取得は行いません（基本ルール：Date.now() / Math.random() / ネットワークを使用しない）。「レンダリング時に数値をライブで更新する」ことは対象外です。作成時に一度データを取得して埋め込むか、対応をお断りしてください。
• 既存の動画にはオーバーレイを重ねるだけで、編集はしません。 HyperFrames はソースクリップの 上に フレームを合成します。/embedded-captions は字幕レイヤーを追加し、/graphic-overlays はデザイン済みのグラフィックカード（ローワーサード、データの吹き出し、タイトル）を追加します。クリップはその下で変更されずに再生されますが、どちらもエンコード済みの動画ストリームを後処理するものではありません。映像そのものの変更（タイミング、色、フレーミング、順序、音声）は NLE 形式の編集であり、対象外です。
• Remotion へのインポートは一方向です。 /remotion-to-hyperframes は Remotion フレームワーク のソースを HyperFrames に変換します。逆方向（HyperFrames → Remotion、または他のフレームワークへの変換）はできず、対象外です。また、Remotion 以外の React／ウェブアニメーションのソースには変換元となる Remotion ソースがありません。/general-video を使って再作成してください。
• 手元にない素材を入力として生成することはできません。 画面／セッションの録画、カメラ撮影、AI によるトーキングヘッド／リップシンクアバターの生成には対応していません。映像素材やアセットがまだ存在しない場合、HyperFrames で生成することはできません。まずユーザーに提供を依頼するか、適切なキャプチャツールを使用してください。

それ以外のリクエスト — URL、概要、トピック、PR、注釈を付ける映像素材、またはアニメーション化する単一の要素からの動画作成 — は対象範囲内です。以下に従って振り分けてください。

---

動画の振り分け

このセクションで把握するのは、トップレベルのワークフローだけです。ワークフロー内部のフェーズ、ドメインスキル（hyperframes-* — 上記の機能マップを参照）、技術リファレンスは読み込みません。

判断表

INPUT の種類（意図）が主要な軸であり、OUTPUT の長さは上限にすぎず、振り分け条件ではありません。 該当する入力であれば、専用ワークフローは約3分までのものを扱います。どのワークフローに進むかは意図（入力の種類、テキストの場合は主題）で決まり、長さでは決まりません。長さが関係するのは上限付近だけです。実際に長いコンテンツ（3～5分のチュートリアル、5分以上の詳細解説）は表現形式が異なるため、/general-video に進みます。約3分以内の範囲では、テキスト入力の2つのワークフローを分ける第3の軸として、主題があります。つまり、_宣伝される_製品か、_解説される_トピックかです（下記のステップ3の判別ルールを参照）。

長さ / 入力	製品ローンチ（URL / 概要 / 台本）	一般的なウェブサイト / URL	GitHub PR / コード変更	トピック / 記事 / メモ（製品なし、URL なし）	既存動画（トークヘッド）†
約3分以内	/product-launch-video	/website-to-video	/pr-to-video	/faceless-explainer	/embedded-captions · /graphic-overlays †
3～5分のチュートリアル	/general-video	/general-video	/general-video	/general-video	/embedded-captions · /graphic-overlays †
5分以上の詳細解説	/general-video	/general-video	/general-video	/general-video	/embedded-captions · /graphic-overlays †
静止画 / ループ	/general-video	/general-video	/general-video	/general-video	/general-video

現在の対応範囲：約3分以内の範囲には、製品ローンチ / 一般的なウェブサイト / GitHub PR / トピックの入力に対応する専用ワークフローがあります（URL はまず種類、次に意図で振り分けます。ステップ3を参照）。また、既存動画の列は長さを問わず、意図に応じて /embedded-captions（キャプション / 字幕）または /graphic-overlays（デザインされたグラフィックオーバーレイ）で対応します（ステップ2を参照）。それ以外のすべてのセルは /general-video です。これは汎用的な HTML 構成の作成フローで、入力と長さを問いません。約3分より長いもの（3～5分 / 5分以上の行）と、あらゆる静止画 / ループ形式が対象です。作成可能な動画に対して、ルーターが行き詰まることはありません。「一般 / 該当なし」となるのは、HyperFrames 自体の範囲外のリクエストのみです（例：完成した動画ファイルを NLE のように編集すること。タイミング変更、色調変更、フレーミング変更、並べ替え、音声編集など）。

† 既存の映像は長さではなく意図で振り分けます。 キャプション / 字幕 → /embedded-captions、デザインされたグラフィックオーバーレイ / パッケージング（ローワーサード、データのコールアウト、タイトルカード、引用抜粋など）→ /graphic-overlays。どちらもクリップの上に重ねるもので、下のクリップは変更せずに再生されます。映像そのものを編集するものではありません。

ジャンルによる早期振り分け（表より優先）。 短い（約10秒未満）、ナレーションなしでデザイン主体のモーショングラフィックス（キネティックタイポグラフィ、統計値 / グラフの強調表示、ロゴの短い演出、ローワーサード / オーバーレイ、アニメーション付きのツイート / 見出し / キャプチャしたページのハイライトなど）は、入力に関係なく /motion-graphics に進みます。これは入力の種類ではなく OUTPUT のジャンルであるため、ナレーションなしでモーションが明確に主体となる依頼では、上記の入力種類別テーブルより優先されます（ステップ2を参照）。より長いもの、またはナレーション付きのものは、入力の種類に応じて振り分けるか、/general-video に進みます。

既存のコンポジションの移行（特殊なケース）

上の表は、入力から動画を作成する場合のものです。この表に当てはまらないワークフローが1つあります。ユーザーが既存の Remotion（React）コンポジションを HyperFrames に移植／変換／移行するよう明示的に依頼した場合は、/remotion-to-hyperframes にルーティングします。これは入力からの作成ではなく、ソースの変換であるため、INPUT × LENGTH のセルはありません。「Remotion プロジェクトを移植して」「この Remotion コンポジションを変換して」「これを HyperFrames として書き直して」のように、移行を明示する表現がある場合にのみ、ここへルーティングしてください。Remotion に軽く言及しただけではトリガーになりません。デフォルトでは作成の表、または /hyperframes-core にルーティングしてください。

ルーティング手順

1. 入力タイプと目標尺を特定します。 ルーティングでは、動画が何についてのものか、つまりテーマと入力を把握する必要があります。テーマ自体が指定されていない場合（たとえば、URL、製品名、トピック、素材のいずれも示さずに「うちのものについて動画を作って」と依頼された場合）、または入力タイプが不明な場合は、ワークフローに入る前に質問してください。まず確認し、ワークフロー Skill を呼び出してから質問してはいけません。ワークフローを選ぶこと自体がルーティングの判断だからです。確認質問は最大2つまでです。
   • 「入力は何ですか？ 製品（URL または概要）、一般的なウェブサイト／URL、GitHub PR／コード変更、解説するトピックや記事、字幕を付ける既存のトークヘッド動画のどれですか？」
   • 「目標尺はどのくらいですか？ 約3分以内ですか、それともそれより長め（3〜5分のチュートリアル／5分以上の詳細解説）ですか？」
   • 仕様のデフォルト値は質問せず、伝えてください（ルートには影響しないため、これを理由にルーティングを保留してはいけません）：アスペクト比は16:9（エンジンは縦型の9:16にも対応しています。ユーザーがTikTok／Reels／Shortsなど縦型の配信先を指定した場合にのみ切り替えます）。ナレーション／字幕の言語はユーザーの言語です。ユーザーから異議があった場合にのみ確認します。選択したワークフローでは、ステップ0で固有の詳細を再確認します。
2. まず入力タイプ（意図）で選びます。尺は上限の判断材料であり、条件ではありません。
   • 短いデザイン主導のモーショングラフィック（入力テーブルに先行するジャンルの短絡ルート） — 動きそのものがメッセージです。キネティックタイポグラフィ、統計値／数値のカウントアップ、チャートの強調表示、ロゴの短い演出、ローワーサード／オーバーレイ、アニメーション付きツイート／見出し／キャプチャしたページのハイライトなどが該当します。通常は約10秒未満で、ナレーション／ボイスオーバーはありません → /motion-graphics。これは入力タイプではなく、出力ジャンルです。短く、ナレーションなしのデザイン主導のモーション作品であることが明確な依頼は、入力にかかわらずここにルーティングします。同じ素材でも、長尺またはナレーション付きの構成は該当しません（入力タイプに応じてルーティングするか、/general-video を使用します）。
   • 既存のトークヘッド動画（ユーザーがクリップを持っていて、その上に何かを追加したい場合）→ 尺を問わず、意図で分けます（尺より入力タイプを優先）：キャプション／字幕（話し言葉を読みやすいテキストにしたもの）→ /embedded-captions、デザインされたグラフィックオーバーレイ — ローワーサード、データの注釈、タイトル付き情報カード、引用文、グラフィックを組み込んだ編集 → /graphic-overlays。（映像自体の編集 — タイミングの変更、色調補正、フレームの再構成、並べ替え、音声編集 — はNLE形式の作業であり、対象外です。§ HyperFramesではできないことを参照してください。）
   • GitHub PR／コード変更（github.com/<owner>/<repo>/pull/<N> リンク、owner/repo#N の参照、または「このPR」）→ /pr-to-video（約3分まで）。
   • それ以外（製品のURL／概要／トピックのテキスト）：ステップ3で意図に応じてワークフローを選び、約3分までに対応します。短い15〜30秒のプロモーションも約100秒の解説も、尺ではなく意図に基づいてルーティングします。目標尺が明らかに約3分を超える場合（3〜5分のチュートリアル、5分以上の詳細解説）に限り、尺にかかわらないフォールバックの /general-video（ステップ4を参照）にルーティングします。本当に長尺の作品を、無理に約3分以下のワークフローに当てはめてはいけません。該当範囲内では意図に応じて選び、それ以外は /general-video が対応します。
3. 約3分以下のURL／テキスト入力を明確にします（意図による振り分け）。 振り分けは2種類です。
   • URLの種類と意図 — URLだからといって自動的にPLVに決まるわけではありません。まずURLの_種類_を判定し、次に_意図_で決めます。GitHub PRのリンク（.../pull/<N>、owner/repo#N、「このPR」）→ /pr-to-video。それ以外のウェブサイトURLは意図で分けます。特定の製品やSaaSのマーケティング／ローンチ／宣伝 → /product-launch-video、一般的なサイトから動画を作る（サイト紹介、ポートフォリオ／ブログ／ランディングページの紹介、サイト独自のビジュアルを使ったSNS向けクリップ、または単に「このサイトを動画にして」）→ /website-to-video。どちらもヘッドレスChromeでクロールします。PRのURLは gh で読み取ります。サイトURLが製品ローンチ向けか、一般的なサイト紹介向けか本当に判断できない場合は、質問を1つしてください。
   • 製品かトピックか（URLなしのテキスト）— 判断の決め手は入力形式ではなく、動画のテーマです。
     • 特定の製品／企業／SaaS／アプリ／ウェブサイトをマーケティング、ローンチ、宣伝する → /product-launch-video。
     • 製品もURLもなく、概念／トピック／記事／仕組みを解説する → /faceless-explainer。
     • 判断の補助：「宣伝する／ローンチする／販売する／自社製品」といった表現があればPLV。「解説する／教える／Xの仕組み／Xとは何か」といった表現があり、製品がなければfacelessです。facelessで提供されるスタイルは常に pin-and-paper です。
     • URLを貼っていなくても、サイト名が示されていればPLVです。 スクリプト内で製品やそのウェブサイトに触れている場合（「自社サイトは acme.io です」「を宣伝して」など）は、クリックできるリンクがなくてもPLVにルーティングします。PLVではウェブ検索を行い、ブランド素材の取得に向けてサイトをクロールできます（ユーザーがオプトアウトした場合は、キャプチャなしのプリセットモードを使用します）。URLを貼らなかったからといって、faceless／キャプチャなしの依頼になるわけではありません。提供されたスクリプトを原文どおりに使うか、構成し直すかはPLV内部の判断であり、ルートは変わりません。
     • 手がかりが矛盾する場合は、推測せず質問してください。 提供されたソースが製品独自のマーケティング素材（ランディングページや、そのプラットフォームについて書かれた宣伝ブログなど）でありながら、ユーザーが宣伝要素を取り除き、基盤となる概念を中立的に解説するよう明示している場合（広告ではない内容）、本当に曖昧なケースとして扱います（動画のテーマはその製品か、それとも一般的な概念か）。「中立」という手がかりだけでfacelessと判断せず、質問を1つしてください。これとは対照的に、一般的なトピックに製品が付随的に出てくるだけで、ユーザーがそれを_除外_するよう伝えている場合（「OAuthの仕組みを解説してください。認証製品を販売していますが、触れないでください」）、明確にfacelessです。質問する必要はありません。
   • 依頼を読んでも判断できない場合は、次の質問を正確に1つしてください。「特定の製品を宣伝する動画、一般的なウェブサイトから作る動画、トピック／概念の解説、GitHub PRの紹介、既存の動画への字幕追加のどれをお望みですか？」
4. /general-video にフォールバックします。 上記の専用ワークフローのどれにも該当しない場合は、一般的なHTML構成のオーサリングフロー（元の hyperframes フロー：デザインシステム → 計画 → アニメーションより先にレイアウトを作成 → ビルド → 検証）である /general-video にルーティングします。これは入力と尺を問いません。専用ワークフローに無理にルーティングしてはいけません（チュートリアルをPLVに当てはめないでください）。「一般的な」依頼に適した選択肢は /general-video であり、近そうなものを選ぶことではありません。「ワークフローなし／一般」に該当するのは、HyperFrames自体の範囲外の依頼のみです。たとえば、完成した動画ファイルをNLE形式でカット／編集する依頼が該当します（トークヘッド動画クリップへの字幕追加は /embedded-captions、デザインされたグラフィックのオーバーレイは /graphic-overlays です）。

ワークフローの説明（判別用）

/product-launch-video

• 入力： マーケティング対象の製品。次のいずれかの形式で提供されます。（a）製品の URL → ヘッドレス Chrome でクロールし、素材、ブランドトークン、ページ構造を取得します。（b）製品サイトが記載されたスクリプト／概要（リンクが貼られていなくても可）→ PLV がウェブ検索でサイトを特定し、ブランドトークンと素材を取得するためにクロールします。ただし、ユーザーが検索を希望しない場合は除きます。（c）特定可能なサイトがないスクリプト／概要（または明示的に「スクレイピングしない」と指定された場合）→ キャプチャなしモードとなり、パレットとデザインシステムを備えたスタイルプリセットを選択します（テキスト／タイポグラフィのシーンを使用し、スクレイピングした素材は使いません）。提供されたスクリプトはナレーションとしてそのまま使用することも、シーンごとに力強いナレーションになるよう再構成することもできます。PLV がどちらにするか確認します。
• 出力： HyperFrames のコンポジションとして作成し、MP4 にレンダリングした製品ローンチ動画／SaaS の解説動画／プロモーション動画。長さは最大約 3 分（最適な長さは約 30～90 秒です。スクリプトをそのまま使う場合は長くなることもあり、長さはスクリプトに従います）
• 該当する依頼： 「X のローンチ動画を作って」「ウェブサイトのプロモーション動画」「SaaS を 1 分で説明して」「X.com の新機能紹介」「自社製品のマーケティング動画」「スクリプトがあるので 60 秒のプロモーション動画にして」「 のローンチ用スクリプトです。サイトは です」「スクリプトを一語一句そのままナレーションに使って」「ウェブサイトは使わず、スクレイピングもしないテキストだけのローンチ動画を作って」
• 使用しないケース： 製品を含まないトピック／概念のみのテキスト解説（→ /faceless-explainer）。ただし、製品名またはそのサイトが記載されたスクリプトは、URL が貼られていなくても、顔出しなしの解説ではなく PLV の対象です。製品のマーケティングを主目的としない一般的なウェブサイトから動画への変換（サイトツアー／ショーケース／ソーシャルクリップ → /website-to-video）。GitHub の PR／コード変更の解説（→ /pr-to-video）。既存動画への字幕追加（→ /embedded-captions）。約 3 分を明らかに超えるもの（チュートリアル、詳細解説 → /general-video）。顧客インタビュー、製品と無関係なモーショングラフィックス、静的なブランド素材（短い製品プロモーションは 15～30 秒でも PLV の対象です。判断基準は長さではなく、製品を訴求する意図です）。

/website-to-video

• 入力： 動画にしたい一般的なウェブサイト／URL。目的が製品ローンチではなく、サイト自体を動画にすること、またはサイトから動画を作ることの場合に該当します。ヘッドレス Chrome でキャプチャし、実際のスクリーンショットとブランド素材を取得します。（マーケティング／ローンチ／プロモーション対象の製品は、URL からの依頼でも /product-launch-video が対象です。）
• 出力： キャプチャしたサイトから作成する動画。サイトツアー、ポートフォリオ／ブログ／ランディングページのショーケース、またはサイト内のビジュアルで構成したソーシャルクリップなどを、HyperFrames のコンポジションとして作成し、MP4 にレンダリングします。
• 該当する依頼： 「このウェブサイトを動画にして」「このサイトをキャプチャして動画を作って」「自分のサイトから動画を作って」「 のサイトツアー／ショーケース」「ホームページからソーシャルクリップを作って」「URL しかありません。何か作って」
• 使用しないケース： マーケティング／ローンチ／プロモーション対象の製品（ローンチ／プロモーション／機能紹介／「自社製品を売り込む」ことが目的の場合 → /product-launch-video。URL からの依頼でも同様です）。サイトを含まないトピック／概念の解説（→ /faceless-explainer）。GitHub の PR（→ /pr-to-video）。既存の動画ファイルへの字幕追加（→ /embedded-captions）。キャプチャしたページを目立たせたりアニメーションにしたりするだけの、ナレーションなしの短いモーショングラフィック（→ /motion-graphics。ナレーション付きの複数シーンからなるサイト動画ではなく、ページを手短に強調する単一のショットが対象です）。サイト URL が製品ローンチ動画と一般的なサイト動画のどちらに該当するか本当に判断できない場合は、質問を 1 つしてください。

/faceless-explainer

• 入力： 説明する任意のテキストです。トピックの一文、記事、メモ、概要などが対象で、宣伝する製品も、キャプチャするサイトもありません。（テキストに製品名やそのサイトが記載されている場合は、URL が貼り付けられていなくても、サイトを解決してクロールできる /product-launch-video を使います。）/product-launch-video からフォークされました。入力フェーズではウェブサイトのスクレイピングは不要です（入力にヘッドレス Chrome は使いません）。
• 出力： HyperFrames のコンポジションとして作成し、MP4 にレンダリングする、顔出しなしの解説動画です。最長約 3 分（最適な長さは約 30～90 秒）です。すべてのビジュアルは各シーンに合わせて LLM が生成します（タイポグラフィ／抽象グラフィック／図解／データビジュアライゼーション）。pin-and-paper スタイルプリセットが付属します。
• トリガー：「X について顔出しなしの解説動画を作って」「DNS の仕組みを動画で説明して」「この記事を解説動画にして」「［概念］を説明する動画、製品なし」「トピック → 短い教育動画」「メモから解説動画を作って」
• 使用しないケース： 特定の製品／企業の宣伝が中心の場合や、URL が貼り付けられていなくても、スクリプトで製品のサイト名が挙がっている場合（→ウェブ検索とクロールを行う /product-launch-video）。URL が指定されている依頼の場合：製品サイト（→/product-launch-video）、動画にする一般的なウェブサイト（→/website-to-video）、または GitHub PR（→/pr-to-video）。既存の動画へのキャプション追加（→/embedded-captions）。約 3 分を明らかに超える内容（チュートリアル、詳細な解説 → /general-video）。製品広告／プロモーション形式（→/product-launch-video）。事前収録された音声、ユーザー提供のナレーション、またはビジュアルを合わせるその他のメディアがある場合。faceless はすべてのビジュアルを生成し、独自のナレーション（TTS）を生成するため、提供された音声には同期しません（→/general-video）。実際のスクリーンショットやスクレイピングしたブランド素材が必要な動画。短い解説動画は、30 秒未満であっても faceless が対象です。長さではなく、トピックを説明する意図で判断します。

/embedded-captions

• 入力： ユーザーがキャプションを付けたい、既存のトーキングヘッド／単一被写体の動画（MP4）です。URL やテキストの概要ではなく、実際の映像が必要です。ローカルで文字起こし（Whisper、API キー不要）し、マット処理（RVM）を行って、被写体がキャプションの手前に表示されるようにします。ウェブサイトのスクレイピングやヘッドレス Chrome は使いません。
• 出力： 元の映像には手を加えず、キャプションレイヤーを追加します。Standard（デフォルト）：文字起こしをそのまま表示する下部 3 分の 1 のレールに、盛り上がりのピークで被写体の背後に合成されるクライマックスを追加します。または Cinematic：キャプションをすべて被写体の背後でシーンに合成する、純粋な埋め込み形式です。長さは問いません。短いリールから長い解説動画まで対応します。
• トリガー：「この動画にキャプション／字幕を付けて」「シーンにキャプションを埋め込んで」「被写体の後ろにキャプションを表示して」「このクリップにシネマティック／埋め込みキャプションを付けて」「この動画に字幕を付けて」
• 使用しないケース： URL（→/product-launch-video／/website-to-video）、トピック／テキスト（→/faceless-explainer）、GitHub PR（→/pr-to-video）から動画を生成する場合。明確な単一の被写体がいないクリップ（マット処理には単一の被写体が必要です）。映像そのものの編集（タイミング変更、色変更、フレーミング変更、並べ替え、音声の差し替えなど。NLE 編集のため対象外です）。まだ存在しない映像（HyperFrames では録画できません。ユーザーに映像の提供を依頼してください）。クリップ内の話し言葉を読み取れるテキストにするのではなく、デザインされたグラフィックオーバーレイ（下部 3 分の 1 のテロップ、データコールアウト、タイトル付き情報カード）を追加する場合（→/graphic-overlays）。

/graphic-overlays

• 入力： デザインされた画面上のグラフィックを追加して仕上げたい、既存のトークヘッド／インタビュー／ポッドキャスト動画（MP4）です。実際の映像が必要で、URLや概要ではありません。文字起こしはローカルで実行します（Whisper）。クリップは全編を通して下地で再生されます。カット、タイミングの変更、色の変更は行いません。
• 出力： 同じ映像の上や横に、タイミングを合わせたグラフィックオーバーレイカードを重ねたものです。キネティックタイトル、ローワーサード、データコールアウト、引用、サイドパネル、ピクチャーインピクチャーなどを、文字起こしに同期させて表示します。デザインシステムは10種類のスタイル × 4種類のレイアウト × 3種類のフレームで構成されます。長さは問いません。（削除された /footage-recut の情報カードオーバーレイのワークフローに代わるものです。）
• 利用のきっかけ： 「この動画をパッケージ化して／仕上げて」「グラフィックオーバーレイ／画面上のグラフィックを追加して」「トークにローワーサード／データコールアウト／キネティックタイトル／情報カードを追加して」「このインタビューをグラフィックで仕上げた編集にして」「話している内容に同期したカードを重ねて」
• 次の場合は使用しないでください： 読みやすい字幕／キャプションのみの場合（話した言葉をテキスト化するもの → /embedded-captions）。短いナレーションなしのモーション要素が1つだけの場合（ローワーサード1つやロゴのスティンガーなど → /motion-graphics。このスキルは、多数のカードを同期させてナレーション付きクリップ全体をパッケージ化します）。映像そのものの編集（タイミングの変更、色調整、リフレーミング、並べ替え、音声編集など。NLE 編集は対象外です）。URL／トピック／プレスリリースから動画を作成する場合（→ 作成ワークフロー）。まだ存在しない映像の場合。

/pr-to-video

• 入力： GitHub プルリクエストです。コード変更を、PR URL（github.com/<owner>/<repo>/pull/<N>）、owner/repo#N 形式の参照、またはチェックアウト済みリポジトリ内の「この PR」として指定します。URLではありますが、gh CLI で読み取るPR のリンクであり、スクレイピングするマーケティングサイトではありません。
• 出力： コード変更の解説動画です。最長約3分（最適な長さは約30～90秒）で、変更履歴／機能紹介／修正内容の解説／リファクタリングの解説などに対応します。差分のハイライト、変更前後、ファイルツリー、影響範囲のシーンを含みます。
• 利用のきっかけ： 「この PR について動画を作って」「PR #1187 を変更履歴の動画にして」「このプルリクエストの内容を動画で説明して」「github.com/org/repo/pull/123 からリリースノート動画を作って」「この PR を動画にして」
• 次の場合は使用しないでください： 製品／マーケティングサイトの URL の場合（→ /product-launch-video）、一般的なウェブサイトを動画にする場合（→ /website-to-video）。PR がないトピック／記事／テキストの場合（→ /faceless-explainer）。既存の動画にキャプションを追加する場合（→ /embedded-captions）。リポジトリ全体の紹介や複数の PR をまとめたリリースの場合（ワークフローはまだありません → /general-video）。

/remotion-to-hyperframes

• 入力： 既存のRemotion（React）動画コンポジションのソースです。ユーザーが HyperFrames への移植／変換／移行／書き換えを明示的に依頼している場合に使用します。変換方向は一方向（Remotion → HyperFrames）で、対象は Remotion フレームワーク に限られます。入力から動画を作成するワークフローではありません。
• 出力： Remotion のソースを変換した HyperFrames HTML コンポジションです。SSIM 評価ハーネスと段階的なテストコーパスを使って、Remotion のレンダリング結果と比較評価します。
• 利用のきっかけ： 「Remotion プロジェクトを HyperFrames に移植して」「この Remotion のコンポジションを変換して」「Remotion から移行して」「これを HyperFrames HTML として書き換えて」
• 次の場合は使用しないでください： 新しいコンポジションを作成する場合（Remotion 動画を A/B テスト中の場合も含む）、Remotion に言及しているだけの場合、または明示的な移行依頼なしに「Remotion のものと同じ動画」を求めている場合（→ 作成ワークフロー／/hyperframes-core）。逆方向の変換、つまり HyperFrames を Remotion や他のフレームワークにエクスポートする場合（対象外。「HyperFrames でできないこと」を参照）。Remotion 以外の React／ウェブアニメーションのソースの場合（変換対象の Remotion ソースがないため、/general-video で再作成してください）。

/motion-graphics

• 入力： 動きそのものがメッセージとなる、短くデザイン主導のモーショングラフィックの依頼です。通常は約10秒未満（最長で約30秒）で、ナレーション／ボイスオーバーはありません。出力ジャンルは9種類です。キネティックタイポグラフィ、統計値／数値のカウントアップ、チャート／データビジュアライゼーションの演出、ロゴの短いアニメーション／ブランドロックアップ、ローワーサード／コールアウト／ソーシャルオーバーレイ、または検索を活用したウェブページ／ニュース／ツイート／アセット融合ショット（必要に応じて hyperframes capture でページをキャプチャしたり、画像／見出しを取得したりできます）。出力ジャンルによるショートサーキットです。入力形式をまたいで該当するため、依頼が明確にモーション優先かつナレーションなしの場合は、入力形式の表より先に適用します。
• 出力： HyperFrames のコンポジションとして制作する短いモーショングラフィックです。MP4、またはローワーサード／コールアウト用の透明オーバーレイ（アルファ付き WebM／MOV）としてレンダリングします。
• トリガー： 「8秒のロゴアニメーション」、「この統計値／数値をアニメーション化して」、「キネティックタイポグラフィのイントロ」、「短い統計値／チャートの演出」、「この見出しやツイートをモーショングラフィックにして」、「モーションポスター」、「透明なローワーサード／コールアウトのオーバーレイ」
• 使用しないケース： 長尺、複数シーン、またはナレーション付きの作品、ブランドリール、約10～15秒を超えるカスタムコンポジション（→ /general-video）；ウェブサイトを紹介するナレーション付き動画／サイトツアー（→ /website-to-video。モーショングラフィックのウェブページジャンルは、ナレーション付きのサイト紹介動画ではなく、ページの要点を短く示す単一ショットです）；トピックを説明するナレーション付き動画（→ /faceless-explainer）；製品のローンチ／プロモーション（→ /product-launch-video）；GitHub PR（→ /pr-to-video）；既存の映像への字幕追加（→ /embedded-captions）

/general-video

• 入力： 上記で扱われないすべてのものです。クリエイティブブリーフ、アニメーション化する単一要素、制作中のコンポジションの編集などが該当します。入力形式や長さは問いません。
• 出力： 元の hyperframes フローに沿って制作する HyperFrames の HTML コンポジション（長さ／形式は自由）です。デザインシステム → プロンプトの展開 → 計画 → アニメーション前のレイアウト → ビルド（hyperframes-* ドメインスキルに委譲）→ 検証の順で進めます。
• トリガー： 「タイトルカードを作って」、「これをアニメーション化して」、「長めのブランドリール／シズルリール」、「複数シーンのコンポジション」、「長めの静止ループ／ポスター」、または上記のワークフローに当てはまらない「動画を作って」という依頼。（短く、ナレーションがなく、単一ショットのモーショングラフィック――ロゴの短いアニメーション、キネティックタイポグラフィの演出、統計値／チャートのポップ、ローワーサード／オーバーレイなど――は /general-video ではなく /motion-graphics です。）
• 使用しないケース： 販売促進する製品（→ /product-launch-video）；一般的なウェブサイトから動画への変換（→ /website-to-video）；トピック／概念の解説（→ /faceless-explainer）；GitHub PR（→ /pr-to-video）；既存動画への字幕追加（→ /embedded-captions）；Remotion の移植（→ /remotion-to-hyperframes）；短く、ナレーションがなく、デザイン主導のモーショングラフィック――ロゴの短いアニメーション、キネティックタイポグラフィの演出、統計値／チャートのポップ、ローワーサード／オーバーレイ、アニメーション付きツイート／見出し／ページの要点表示など（→ /motion-graphics）；完成済み動画の NLE スタイル編集（対象外）。

動画のルーティング対象外

• ドメインスキル（/hyperframes-core、/hyperframes-animation、/hyperframes-cli、/hyperframes-creative、/hyperframes-media、/hyperframes-registry）――これらはここではルーティングしませんが、このスキル上部の機能マップには含まれています。ワークフローのビルドフェーズでは、技術リファレンスとして読み込まれます。
• ワークフロー内部のフェーズ――各フェーズはそれぞれのワークフローのフォルダー内にあり、このルーターではなく、そのワークフローのオーケストレーターによってディスパッチされます。