faceless-explainer

プラグインのインストール： このスキルが HyperFrames プラグイン内にある場合は、セットアップまたは更新確認コマンドを実行する前に、プラグインの実行ルールに従ってください。単体でインストールしている場合は、以下の更新手順に従ってください。

まず、このスキルを最新の状態に保ってください。実行前にユーザーの確認を得てください： npx hyperframes skills update faceless-explainer。すべて最新であればすぐに何もせず終了します。そうでなければ、このスキルと、依存するコアドメインスキルを更新してから利用します。

media-use：音声／画像／ロゴの取得元を選ぶ前に、/media-use を呼び出し、BGM／画像は HeyGen カタログから、効果音は Openverse から、ブランドロゴは公式ソースから取得してください。既存のアセットを登録するには、最初に --adopt を実行してください。詳細は /media-use スキルを参照してください。ホストアプリが独自の音楽または効果音ツールを提供している場合は、音楽と効果音にはそれらを使用してください。

顔出しなしの解説動画を HyperFrames で作成

このスキルを使って、テキストから解説動画を作成します。デザインシステムを選び、教えるためのストーリーを組み立て、HyperFrames でフレームごとに制作します。顔出しなしとは、すべてのビジュアルを後続の工程で作成することを意味します。画面のキャプチャ工程はなく、実際のアセットの一覧もありません。

最初の窓口は /hyperframes です。 あなたはオーケストレーターです。各ステップを実行し、ゲートを検証してから次に進んでください。このスキルは、キャプチャする製品もウェブサイトもなく、テキストからトピックを解説する場合に使用します。それ以外の目的、単なる「動画を作って」という依頼、または少しでも不確かな場合は、まず /hyperframes を読んでください。インテントレイヤーがすべての経路判断を担います。また、BRIEF.md がない状態で新規作成の依頼がここに届いた場合も、Setup の冒頭ルールに従ってインテントレイヤーを経由します。

オーケストレーターとして、videos/<project>/ で作業します。手順どおりにステップを実行し、各ゲートを通過してから次に進んでください。ユーザーの確認が必要なステップは、Step 0、Step 3、Step 6 です。Step 0 の前に ../hyperframes/references/brief-contract.md を読み、ゲートの種類と、BRIEF.md の flow／storyboard から Step 3／4／6 のゲートを決めるモードを導き出す方法を確認してください。Step 5 ではフレームごとにサブエージェントを 1 つずつ起動し、それ以外のすべてのステップは自分で実行してください。ここにはデザインやモーションのルールを記載しないでください。これらのルールは、フレームワーカーのサブエージェント、このスキルのローカルな ../hyperframes-animation/rules/ と ../hyperframes-animation/blueprints/、および hyperframes-creative にあります。

ワークフロー：Step 0 セットアップ → hyperframes.json；Step 1 ブリーフ → capture/extracted/；Step 2 デザインシステム → frame.md；Step 3 ストーリーボード／スクリプト → STORYBOARD.md と SCRIPT.md；Step 3.1 音声 → audio_meta.json；Step 4 ビジュアルデザイン → 拡充した STORYBOARD.md；Step 5 フレーム → compositions/frames/NN-*.html と index.html；Step 6 最終レンダリング → renders/video.mp4。

---

ステップ 0：セットアップ

目的：確認済みのブリーフを用意し、HyperFrames プロジェクトを作成して、ブリーフを永続化します。

ブリーフの確認は、ここで質問して行うのではなく、インテントレイヤーで行います。 起動時のルールは次の順序で適用します。（1） BRIEF.md が存在する → それを読み、何も質問しません。ブリーフは確定済みで、flow／storyboard に基づいてモードが決まります（ブリーフの契約 § 1）。（2） BRIEF.md はないものの、プロジェクトが存在する（ディスク上に hyperframes.json／STORYBOARD.md がある） → ストーリーボードのフロントマターと記録済みの設定から再開します。作成途中のプロジェクトについて、決して質問し直さないでください。（3） どちらもない — ここに直接届いた新規作成リクエスト → /hyperframes を読み、インテントレイヤー（references/intent-interview.md）を実行します。レシピと記憶されたデフォルトを確認し、このルートの質問（../hyperframes/references/routes/faceless-explainer.md）を行って、確定したブリーフを返します。編集リクエストでは、この手順をすべて省略して編集に進みます。

hyperframes.json がない場合に限り、初期化します。トピックをもとに <project> をケバブケースで付けます（例：compound-interest-explained）。ワークスペース名やタイムスタンプは決して使用しないでください。

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=faceless-explainer — init はインストール済みスキルを GitHub 上の最新版と照合し、古いものがあればグローバルセットを更新します。

初期化後、<PROJECT_ROOT> を videos/<project> とし、それ以降の相対パスを使うコマンドはすべて、このディレクトリを作業ディレクトリとして実行します。以下のコマンドでは、. は <PROJECT_ROOT> を意味します。呼び出し元のディレクトリに .media、capture、出力ファイルを作成しないでください。

初期化の直後に BRIEF.md を作成してください（init は空でないディレクトリを拒否するため、初期化より前には作成しないでください）。../hyperframes/references/brief-format.md に沿った形式で、インテントレイヤーが確定したブリーフを記録します。インストール済みの /media-use スキルディレクトリを <MEDIA_DIR> として解決します。次に、設定に基づく各回答を node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . で記録します（対象となる回答は brief-format.md に記載されています）。インテントレイヤーがレシピを採用した場合は、node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name> を実行します。レシピの frame.md がプロジェクトにコピーされ、ステップ 2 は省略され、ステップ 3 の下書きの土台となるスケルトンが返されます。レシピが補完するのは回答であり、承認ではありません。レビューゲートは引き続き実行します。

セットアップの先に進む前に、サインイン状況を表示してください — npx hyperframes auth status を実行し、その出力を一字一句そのまま伝えます。音声／BGM に HeyGen とローカルエンジンのどちらを使用するか、またサインアウト状態の場合はサインイン方法が表示されます。次のいずれかを適用します。

• 協調型： ユーザーがサインインするか、明示的に offline／go を選ぶまで待ちます。
• 自律型： 状況を伝え、利用可能なローカルエンジンで続行します。

オフラインプロバイダーが存在しない場合、必要な機能を黙って省略しないでください。阻害要因を明示してください。この判断を別の質問に含めたり、リポジトリごとの .env にキーを書き込んだりしないでください。認証情報の管理とオフライン時の代替手段については、/media-use の references/setup-providers.md § Providers を参照してください。

ゲート： hyperframes.json と BRIEF.md が存在し、設定に基づく回答が記録され（ブリーフの契約 § 2）、サインイン状況が表示されている（サインイン済み、またはオフラインで続行中）。

ステップ 1：ブリーフ（キャプチャなし）

目的：ユーザーのテキストを情報源としてプロジェクトに取り込みます。ウェブサイトのキャプチャも実際のアセットもありません — 顔出しなしの解説動画です。

ユーザーの入力全文をそのまま保存してから、合成キャプチャパッケージを手動で作成します。

• capture/extracted/visible-text.txt — 記事／メモ／トピック／ブリーフの全文をそのまま保存します。これは情報のソースであり、ストーリーのテンプレートではありません（ステップ 3 で再構成します）。
• capture/extracted/tokens.json — { "title": "", "description": "", "colors": [], "fonts": [] }。ブリーフから title／description を入力します。ユーザーがブランドカラーやフォントを明示的に指定していない限り、colors／fonts は空のままにします（デザインプリセットが完全なパレットを提供します）。

ユーザーがスクリプトを貼り付けた場合、または自身の表現をそのまま残したい場合は、user_script.txt としてそのまま保存します。VO_MODE（逐語または再構成）は BRIEF.md から取得します。インテントレイヤーでは、スクリプトが届いたときにこれを確認します。ブリーフにどうしても記載がない場合に限り、ここで一度だけ尋ね、回答をステップ 3 用に保存します。

npx hyperframes capture は実行しないでください（URL がありません）。asset-descriptions.md を作成したり、capture/assets/ にファイルを追加したりしないでください。顔出しなしのビジュアルはキャプチャするのではなく、ステップ 4～5 で作成します。例外は、ユーザーが実際の画像を提供した場合です。その場合は public/<basename> に配置し、ステップ 3 用にその旨を記録します。

確認事項： capture/extracted/visible-text.txt と capture/extracted/tokens.json が存在し、解説動画のトピックと対象視聴者を明確な一文で説明できます。

---

ステップ 2：デザインシステム

目的：提供されているフレームプリセットを 1 つ選びます。スクリプトがそれをこの動画の frame.md とキャプションスキンに変換します。

BRIEF.md に style_preset が記載されている場合は、それを使用します。インテントレイヤーのショーケースを見てユーザーが選んだものです。ブリーフに指定がない場合に限り、判断はあなたに委ねられます。次に、あなたが判断するのはプリセットの選定だけです。../hyperframes-creative/references/design-spec.md を読み、../hyperframes-creative/frame-presets/ を確認してください。トピック、トーン、対象視聴者に最も合う見た目のプリセットを選び、その後、次を実行します。

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

残りはスクリプトが決定論的に処理します。プリセットの FRAME.md を frame.md にコピーし、capture/extracted/tokens.json のブランドトークンに合わせてリミックスします（ブランドカラーは役割に応じてプリセットのカラーキーに割り当て、プリセットのディスプレイフォントと本文フォントはブランドのフォントに差し替えます）。プリセットのキャプションスキンを .hyperframes/caption-skin.html にコピーし、自己検証を実施します（マッピングに問題がある場合は終了コード 1 で終了）。終了コード 0 で終了したら、すぐに次へ進んでください。仕様を手作業で編集する必要はありません。

顔出しなしの解説動画には、通常ブランドカラーやフォントはありません（tokens.json の colors／fonts は空です）。その場合、スクリプトはプリセット独自のパレットを維持し、完全な状態のデザインを提供します。ユーザーがブランドカラーやフォントを指定した場合に限り、実行前に tokens.json に追加してください。マッピング上どうしても必要な場合に限り、その後、手作業で frame.md を調整します。

確認事項： build-frame.mjs が終了コード 0 で終了し、指定したプリセットから frame.md が作成されています。また、プリセットに含まれている場合は、キャプションスキンのソースとして .hyperframes/caption-skin.html が作成されています。選択したプリセットは、設定（--key style_preset --workflow <this workflow>、ブリーフの仕様 § 2）として記録されています。

---

ステップ 3：ストーリーボードとスクリプト

目標：テキストを、承認済みのフレーム単位の指導プランに変換します。

../hyperframes-creative/references/story-spine.md（フックの表現、証拠より先に価値を伝えること、提案としてのストーリーボード、出典を追跡できるビジュアル）、references/story-design.md、../hyperframes-animation/blueprints-index.md、../hyperframes/references/storyboard-format.md、../hyperframes/references/script-format.mdを読みます。これらを使ってSTORYBOARD.mdを作成し、ナレーションが必要な場合はSCRIPT.mdも作成します。フロントマターのduration:には、ブリーフのlengthを設定します。これは大まかな目安であり、組み立て後に実際のカットの長さとの差がレポートされます。

解説の構成（コンセプト／ハウツー／リスト形式／ストーリー）、フック戦略、明確さを高める手法、感情の起伏、型の列挙値へのマッピング、VO_MODEにはstory-design.mdを使います。動画の流れは入力テキストの段落順ではなく、ナラティブデザインから決まります。順序を入れ替えたり、統合したり、省略したり、簡潔にまとめたりしてください。あくまで参考として、../hyperframes-animation/blueprints-index.mdの役割→ブループリントのメニューを参照します。各ビートでは、候補となるブループリントが示す形式でボイスオーバーを書き、適合する候補があればそのblueprint: IDを付けます。どのビートを設けるかは、教える内容の正確さに基づいて決めます。ブループリントに合わせるためにビートを無理に作ったり、実績のある形式があるというだけでビートを新たに作ったりしてはいけません。人物を映さないビジュアルは後工程で考案するため、フレームにアセット一覧は含めません。ユーザーが実在するpublic/<basename>画像を提供した場合を除き、asset_candidatesは空のままにします。ストーリーボードとスクリプトのリファレンスで指定された必須フィールドを正確に使います。

下書きの後、レビューループの計画レビューを実行します。../hyperframes/references/review-loop.md § 1に従って、計画を提案として提示し、2つの質問をします。承認するか変更するか、そして（推奨の）スケッチを先に作成するか、スキップするかです。フィードバックはチャットの返信で届きます。承認されるまで繰り返します。これはチェックポイントゲートです（ブリーフ契約 § 1）。自律モードでは質問する必要はありません。同じ概要を事前通知として投稿し、そのまま進めます。スケッチはビルドに統合され、最終プレビューと1つの質問はステップ6で提示されます。

ゲート：STORYBOARD.mdが存在し、すべてのフレームに必須のナラティブフィールドがあり、ナレーションが必要な場合はSCRIPT.mdも存在し、ユーザーがフレーム単位のプランを承認していること（自律モードでは、概要を事前通知として投稿していること）。

ステップ 3.1：音声

目標：承認済みのスクリプトから、ナレーション、単語ごとのタイミング、音楽、音声メタデータを生成します。

ステップ 3 の承認後に音声処理を開始します。バックグラウンドで実行し、その後ステップ 4 に進みます。（サインイン状況はステップ 0 ですでに表示されており、エンジンは自動的にフォールバックします。）

実行前に、ユーザーの依頼に基づいてナレーションの声を選びます。 依頼で声、性別、またはトーンが指定されていた場合は、合致する音声 ID を選び、--voice <id> を渡します。それ以外の場合、パイプラインのデフォルトは HeyGen では Marcia（女性）、Kokoro では am_michael です。そのため、「男性の声で」といった依頼は、フラグを渡さないと無視されます。音声 ID はプロバイダーごとに異なります。ステップ 0 のサインイン状況で選ばれたプロバイダーに応じて解決してください。HeyGen（サインイン済み）の場合は node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list（または GET /v3/voices?engine=starfish）を使用します。Kokoro（オフライン）の場合は <MEDIA_DIR>/audio/references/tts.md の音声一覧を使用します（am_／bm_ は男性、af_／bf_ は女性）。ユーザーが希望を示していない場合は、パイプラインのデフォルトより先に記憶されている音声（ブリーフ契約 § 2）を使用し、使用した音声を伝えます。どちらにも指定がない場合に限り、--voice を省略します。今回、ユーザーが明示的に音声を選んだ場合は、その設定を記録します（prefs.mjs record --key voice）。

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &

音声スクリプトは、ナレーション、単語ごとのタイミング、HeyGen の音楽ライブラリからの BGM 検索、タイミングメタデータを処理します。BGM のムードはストーリーボードの music: フィールドから取得します。これは生成ではなく取得に HeyGen Audio API を使用し、TTS と同じ ~/.heygen 認証情報を使います。プロバイダーの詳細については、../media-use/audio/references/tts.md を参照してください。ホストアプリ独自のツールで音楽または効果音を作成する場合は、ファイルを assets/ の下に置き、"source": "host" として audio_meta.json ファイルに記載します。音楽は bgm として { "path": "assets/…", "source": "host" } に記載し、ストーリーボードでは music: none にします。効果音は sfx エントリー { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <その長さ>, "source": "host" } として記載します。音声処理のたびにこれらの設定は保持され、ホスト音声があるフレームには検索されたキューが追加されません。

ナレーションがなく、SCRIPT.md もない場合は、音声生成をスキップします。ストーリーボードに音楽のムードが設定されていれば、BGM は引き続き処理できます。

完全な無音を示す標準マーカー（この音声モデルを再利用するワークフロー間で共通）：STORYBOARD.md の先頭の YAML ブロックに music: none があり、SCRIPT.md がなく、かつ sfx: キューもホスト音声もないこと。この組み合わせは、プロジェクトが無音であることを示します。ナレーション、BGM、SFX はありません。audio.mjs はこれを認識して何も生成せず（古い audio_meta.json があれば削除します。audio_meta.json が存在しない場合、assemble は無音として処理します）、このステップは問題なくスキップされます。ナレーションがなくても、sfx: キューまたはホスト音声がある場合、その映像は無音ではありません。audio.mjs は、fetch-sfx が埋める audio_meta.json ファイルを書き出します。ナレーションがある状態で music: none を指定すると、TTS は維持され、BGM のみオフになります。この表記を正確に使用してください。他のマーカーを独自に作らないでください。

ゲート： 音声ジョブが開始されている、またはプロジェクトが無音としてマークされている（music: none、SCRIPT.md なし、sfx: キューもホスト音声もなし）。

---

Step 4: ビジュアルデザインを決める

目標：各ストーリーボードフレームに、ビジュアルの方向性、レイアウトの意図、モーションの選択を加えます。

まずストーリーボードシートのスケッチを作成します（共同作業の場合のみ）。 計画が承認されたらすぐにスケッチ工程を実行します。../hyperframes/references/review-loop.md § 2 に従います（静止画ではタイミングを使わないため、Step 3.1 を待つ必要はありません）。すべてのフレームをそれぞれの構図に自分で配置し、予定された開始位置で各フレームを index.html に配置して、1 回の実行ですべての静止画をスナップショットし、ボード boards/storyboard.html（../hyperframes-creative/references/storyboard-recipe.md）を作成します。各フレームを built にし、すべてのフレームが built になったら、レイアウトに関する質問を 1 つだけして作業を一時停止し、ボードが確定するまで指定されたフレームだけを修正します。その後に初めて、確定したレイアウトに以下のビジュアルデザインを書き込みます。自律モードの場合、またはユーザーが Step 3 でスケッチを省略することを選んだ場合は、この工程を省略します。フレームは Step 5 で outline から animated に直接進みます。

STORYBOARD.md をその場で編集してください。別のストーリーボードは作成しないでください。色、書体、レイアウトの雰囲気、スタイルについては、frame.md を信頼できる情報源として使用してください。

references/visual-design.md、../hyperframes-animation/blueprints-index.md、references/motion-language.md、../hyperframes-animation/rules-index.md を読んでください。手法（タイムコード付きショットシーケンス、インラインの Layout 用語、創作ビジュアルの扱い）と、必須の ## Video direction ブロックには visual-design.md を使用します。各フレームのショット形状の選定には ../hyperframes-animation/blueprints-index.md を使用します。モーションには motion-language.md（モーション用語とモーションの原則）および ../hyperframes-animation/rules-index.md（有効なルール名）を使用してください。モーション名を独自に作らないでください。

名前付きのルックを考案する前に、最新のカタログを検索してください。 顔のない解説動画ではすべてのビジュアルを考案するため、既存のブロックを手作業で再構築してしまう可能性が最も高くなります。ブリーフで名前が挙げられたルック、エフェクト、処理、トランジション（「CRT scanlines」、「glitch」、「film grain」、「shimmer sweep」、「confetti burst」など）ごとに、npx hyperframes catalog --query "<the look, in plain English>" --json を実行し、STORYBOARD.md にそのルックを書き込む前に上位の結果を確認してください。検索にインストールは一切不要です。プロジェクト、事前の add、アカウントはいずれも必要ありません。どのディレクトリからでも、ホストされているレジストリ全体（約 400 個のブロックとコンポーネント）を対象に検索し、順位付けします。すでに目的を果たすブロックがあれば、それをフレームの focal に指定してここに記載してください。Step 5 ではディスパッチ前にそのブロックを一度だけ事前インストールし、担当ワーカーがカスタマイズします。検索して適合するものがなかった場合に限り、ビジュアルを考案してください。

各フレームについて、visual-design.md の手法に従い、タイムコード付きショットシーケンスを STORYBOARD.md に記述してください。フレームのブループリントを選択する（または構成する）とともに、このフレームの創作コンテンツを使って具体化し、各 Scene の展開をナレーションに合わせて調整します。フレーム全体の長さにわたって展開するようにし、最初に要素を出し切って、その後静止する構成にはしないでください。顔のない解説動画なので、focal／roles には創作するビジュアル要素（主役となる単語、図のノード、データビジュアライゼーションの系列など）を指定します。これらは既存素材から選ぶのではなく、設計するものです。各 Scene 内にレイアウトとモーションを記述してください（用語は visual-design.md と motion-language.md を参照）。動画全体に適用する ## Video direction ブロックを 1 つ追加してください。

ストーリー、スクリプト、transition_in、ソーステキストは変更しないでください。このステップでは、スケッチ工程で配置するポーズを除き、HTML を書かないでください。アセットのステージング工程はありません。顔のないビジュアルは Step 5 でワーカーが作成します。ユーザーから実際の public/<basename> 画像が提供されている場合は、該当するフレームの focal／roles でパスを参照してください。それ以外はステージングするものはありません。

確認条件： すべてのフレームに、ナレーションに合わせて展開が調整されたタイムコード付きショットシーケンスがあり（最初に出し切らないこと）、各フレームで創作する focal および／または roles が指定されていること。## Video direction が存在すること。共同作業の場合：スケッチシートが確認済みであること。

ステップ 5：フレームを構築する

目標：ストーリーボードの各フレームを HTML のコンポジションとして構築し、再生可能な動画に組み立てます。

音声を開始していた場合は、ステップ 3.1 の音声が完了するまで待ちます。その後、尺を同期して効果音を取得します。無音の場合は、どちらもスキップします。

node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md

node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .

尺の同期は機械的に行います。実際の音声の長さを優先し、無音フレームは推定値のままにします。同期後の尺を手動で編集してはいけません。

ディスパッチ前に、STORYBOARD.md 内で指定されているレジストリブロックを一度だけ事前インストールします。こうすることで、並列ワーカー間でレジストリをめぐる競合を防げます。

for b in <each registry block named in the storyboard>; do npx hyperframes add "$b"; done

ディスパッチ前に、../hyperframes/references/subagent-dispatch.md を読みます。フレームごとのパケットとワーカーの役割ペイロードを作成します。

node <SKILL_DIR>/scripts/frame-packets.mjs --project "$PROJECT_DIR" --storyboard "$PROJECT_DIR/STORYBOARD.md"

ビルダーは、.hyperframes/frame-packets/ の下にフレームごとの範囲限定パケット（フレームのストーリーボードの該当ブロック全体＋ブループリント本文＋引用されているすべてのルールレシピをインライン化したもの）と _role.md（../hyperframes/references/frame-worker-core.md と、このスキルの sub-agents/frame-worker.md を原文のまま連結したもの。つまり、ワーカーの役割全体）を書き出します。フレームごとにサブエージェントを 1 つ割り当て、可能であれば並列で、そうでなければ段階的にワーカーを実行します。各ワーカーが受け持つフレームは 1 つだけです。プロンプトには _role.md と、そのフレームのパケットを渡します。両方を全文貼り付けるか、先に読み込むようワーカーに 2 つのファイルパスを渡します（どちらも同等です。いずれの場合も、ワーカーはその 2 つのドキュメントだけを起点に作業を開始します）。さらに、PROJECT_DIR、frame_id、ディスク上に確定済みスケッチがあるかどうか（ある場合、ワーカーは描き直すのではなく、そのレイアウトに装飾を加えます。frame-worker core § When a confirmed sketch exists を参照）、キャンバスサイズ、キャプションの状態と、キャプションが有効な場合はキャプション禁止帯を含むディスパッチコンテキストも渡します。

各ワーカーが参照するのは、自分のパケットと frame.md のみです。ワーカーは STORYBOARD.md やスキルのドキュメントを開きません（上流で選択された内容はパケットにインライン化されています）。各ワーカーが書き込むのは compositions/frames/NN-*.html のみです。ワーカーは STORYBOARD.md を編集してはいけません。

全面背景は #root ではなく、class="clip" のレイヤーに配置します。 フレームの背景（カラー領域／グラデーション／グリッド）は、フレーム全体の時間にわたる独立した背景クリップにします。#root／data-composition-id 要素に設定された background はフレームの表示区間に限定されるため、背景として頼ることはできません。そのため、暗いコンテンツが黒いホスト側の body 上に表示され、見えなくなる可能性があります。動画の基本背景は、アセンブラーが frame.md の canvas の色をインデックスの #root に塗ることで設定します。（ルール全体とセルフチェックについては ../hyperframes/references/frame-worker-core.md を参照してください。）

ワーカーから結果が返るたびに、オーケストレーターはそのフレームを STORYBOARD.md で animated としてマークします。

音声のタイミングが確定したら、キャプションをバックグラウンドで構築し、インデックスを組み立てます。

node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &

node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .

captions.mjs は、キャプションの見た目にプロジェクトの .hyperframes/caption-skin.html（ステップ 2 でコピー済み）を使用し、frame.md のブランドトークンを挿入します。スキンがない場合は、組み込みのデフォルトのピル型デザインを描画します。captions: skipped (<reason>) は有効な状態です。明示的にスキップされている場合は、キャプションなしで続行します。

完了条件： すべてのフレームが animated としてマークされている（共同作業の場合、スケッチシートはステップ 4 で確認済み）、index.html が存在する、かつキャプションが構築済み、または明示的にスキップされていること。

ステップ 6：仕上げ

目標：組み立てた動画を検証し、ユーザーの承認を得て、最終 MP4 をレンダリングします。

トランジションを挿入し、チェックを実行して、レビューのために一時停止した後、レンダリングします。

node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .

node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html

npx hyperframes lint

npx hyperframes check

npx hyperframes snapshot --at <frame-midpoints>

snapshot はキャプチャしたフレームを 1 枚のコンタクトシート（.hyperframes/artifacts/snapshots/<id>/contact-sheet.jpg。パスはコマンドの出力に表示されます）にまとめます。ざっと目を通し、明らかな問題がなければ次に進みます。ここに時間をかけすぎないでください。

コマンドが失敗した場合は、標準エラー出力を提示して停止してください。復旧コマンドを次々と実行しないでください。自分で修正します。compositions/frames/NN-*.html を安全かつ最小限に編集し、失敗したチェックを再実行してください。

既知の誤検出 — 対応不要です。 check は、キャプションのハイライト語句（セレクター #caption-word-*／.caption-line）で、約 1～4px の text_box_overflow をいくつか報告することがあります。キャプションのピルでは、意図的にタイトな line-height（scripts/captions.mjs で一度だけ設定）を使っており、overflow:hidden はありません。そのため、太いディスプレイ書体の字形が数 px だけピル自体のパディングにはみ出しますが、実際にクリップされているわけではありません。これらは想定内として、そのまま進めてください。キャプションの line-height を大きくしないでください（ピルが膨らみ、かえって悪化します）。text_box_overflow への対応が必要なのは、キャプションの語句ではなくフレーム要素（#el-NN-*）が示されている場合だけです。

チェックに合格したら、ユーザーレビューのために一時停止します。レビュー手順の最終確認（../hyperframes/references/review-loop.md § 4）に従い、最終 Studio プレビューを見ながら、レンダリングするか、どのような変更が必要かを尋ねてください。（自律実行の場合も、質問は同じくこの 1 つだけです。ユーザーから依頼されていなくてもプレビューを開いてください。）その後、コンタクトシートとフレーム ID を添えて MP4 を納品します。これにより、修正対象を特定のフレームに絞れます。

プレビュー：npx hyperframes preview --background

レンダリングはユーザーの承認後にのみ実行します（自律実行モードでは、レンダリングするか変更するかを尋ねた後に実行します）。

npx hyperframes render --skill=faceless-explainer --quality high --output renders/video.mp4

ユーザーから依頼がない限り、レンダリング後に lint、check、snapshot を再実行しないでください。

ゲート： レンダリング前に lint と check に合格し、スナップショットを確認済みであること。レビュー時にユーザーが承認済みであること（自律実行の場合は、チェックに合格し、コンタクトシートを含めて納品すること）。renders/video.mp4 が存在すること。最終回答には MP4 のパスと最終的な長さを記載します。

---

クイックリファレンス

フォーマット： 横向きは 1920x1080、縦向きは 1080x1920、正方形は 1080x1080 — 出力先に基づいて決まります（brief contract § 2）。フォーマットはストーリーボードのフロントマターで一度だけ設定します。

キャプチャしたアセットを使うワークフローとの、顔出しなし動画の相違点： ステップ 1 でのキャプチャなし（合成の tokens.json ＋ visible-text.txt）。asset-descriptions.md と capture/assets/ なし。ステップ 4 でのアセットのステージングなし。デフォルトでは asset_candidates は空。すべてのビジュアルはステップ 5 のワーカーが作成します（タイポグラフィ／抽象グラフィック／図解／データビジュアライゼーション）。ユーザーが提供する public/<basename> の画像のみ、実アセットとして使用できます。

バックグラウンドスクリプト： ワークフローに含まれる scripts/ 配下のスクリプトは次のものだけです。フレームプリセットを採用してブランドに合わせてリミックスし、frame.md（＋キャプションスキン）に反映する build-frame、TTS、文字起こし、BGM、SFX、長さの同期を行う audio、captions、挿入と検証を行う transitions、および assemble-index です。それ以外はすべて hyperframes CLI です。

再利用可能で、特定のドメインに依存しないショットの構成パターンは ../hyperframes-animation/blueprints/ にあります（../hyperframes-animation/blueprints-index.md にインデックスされています）。

参照	使用するタイミング
[../hyperframes/references/brief-contract.md](../hyperframes/references/brief-contract.md)	ゲートの種類、BRIEF.md からのモード導出、フィールドの意味。
[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)	ステップ 3：ストーリーの原則 — フックの表現、根拠より先に価値を示すこと、提案の形、出典を追跡できるビジュアル。
[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)	ステップ 2：フレームプリセットを選んで採用する。
[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)	ステップ 2：ブランドトークンを正しく適用する。
[references/story-design.md](references/story-design.md)	ステップ 3：解説ストーリーを計画する。
[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)	ステップ 3：役割→ブループリントの選択肢。ステップ 4：ショットの形を選ぶ。
[../hyperframes/references/storyboard-format.md](../hyperframes/references/storyboard-format.md)	ステップ 3：STORYBOARD.md を作成する。
[../hyperframes/references/script-format.md](../hyperframes/references/script-format.md)	ステップ 3：SCRIPT.md を作成する。
[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)	ステップ 3.1：TTS プロバイダーと音声を選ぶ、または理解する。
[references/visual-design.md](references/visual-design.md)	ステップ 4：フレームのショットシーケンスを作成する（＋レイアウト用語）。
[references/motion-language.md](references/motion-language.md)	ステップ 4：モーション用語とモーションの原則。
[references/cut-catalog.md](references/cut-catalog.md)	ステップ 4～5：カットカタログ（ワーカーがフレーム内の継ぎ目を構築します）。
[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md) + [../hyperframes-animation/rules/](../hyperframes-animation/rules/)	ステップ 5：引用したモーションに対応するローカルルールのレシピ本文。
[../hyperframes/references/frame-worker-core.md](../hyperframes/references/frame-worker-core.md)	ステップ 5：共有ワーカー契約（パケットビルダーが差分の前に追加します）。
[sub-agents/frame-worker.md](sub-agents/frame-worker.md)	ステップ 5：ワークフローのフレームワーカー差分。
[../hyperframes/references/subagent-dispatch.md](../hyperframes/references/subagent-dispatch.md)	ステップ 5：サブエージェントを安全にディスパッチする。