プラグインのインストール: セットアップやフレッシュネスコマンドを実行する前に、このスキルがHyperFramesプラグイン内にある場合は、プラグインインストールのルールに従ってください。スタンドアロンインストールの場合は、以下の更新手順を維持してください。
最初に、このスキルを最新の状態に保ってください — ユーザーに確認してから実行してください:
npx hyperframes skills update faceless-explainer。全てが最新の場合は迅速に何も起きません。それ以外の場合は、このスキルとそれに依存するコアドメインスキルを、それらに依存する前に更新します。
media-use: オーディオ/画像/ロゴを調達する前に、
/media-useを呼び出して、HeyGenカタログからBGM/SE/画像を解決し、公式ソースからブランドロゴを解決してください。既存のアセットを登録するには、最初に--adoptを実行します。/media-useスキルを参照してください。ホストアプリが独自の音楽や効果音ツールを提供する場合は、それらを音楽と効果音に使用してください。
Faceless Explainer から HyperFrames へ
このスキルを使用して、テキストを解説動画に変換します：デザインシステムを選択し、教育的なストーリーを計画し、HyperFramesでフレームごとに構築します。Faceless とは、すべてのビジュアルが後工程で発明されることを意味します — キャプチャステップはなく、実際のアセット在庫もありません。
正面玄関は
/hyperframesです。 あなたがオーケストレーターです。各ステップを実行し、そのゲートを確認し、それから続行します。このスキルは、製品やキャプチャするWebサイトがなく、テキストからトピックを説明するためのものです。他の意図、単なる「動画を作成」、または不確かな場合は、最初に/hyperframesを読んでください — インテントレイヤーがすべてのルート決定を所有し、BRIEF.mdなしでここに到着した新しい作成は、とにかくそれを通過します（Setupの開始ルール）。
あなたはオーケストレーターです。videos/<project>/ で作業します。ステップを順番に実行し、各ゲートを通過してから続行してください。ユーザーゲートのステップは、ステップ0、ステップ3、およびステップ6です。ステップ0の前に ../hyperframes/references/brief-contract.md を読んでください — ゲートタイプと、BRIEF.md の flow/storyboard がステップ3/4/6のゲートを管理するモードをどのように導出するかを定義しています。ステップ5を除き、すべてのステップを自分で実行してください。ステップ5では、フレームごとに1つのサブエージェントにディスパッチします。デザインやモーションのルールはここに配置しないでください。それらはフレームワーカーのサブエージェント、このスキルのローカルな ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/、および hyperframes-creative にあります。
ワークフロー: ステップ0 セットアップ → hyperframes.json; ステップ1 ブリーフ → capture/extracted/; ステップ2 デザインシステム → frame.md; ステップ3 ストーリーボード/スクリプト → STORYBOARD.md および SCRIPT.md; ステップ3.1 オーディオ → audio_meta.json; ステップ4 ビジュアルデザイン → 拡張された STORYBOARD.md; ステップ5 フレーム → compositions/frames/NN-*.html および index.html; ステップ6 最終レンダリング → renders/video.mp4。
ステップ 0: セットアップ
目標: 確認済みのブリーフを入力として受け取り、HyperFramesプロジェクトを作成し、ブリーフを永続化します。
ブリーフはインテントレイヤーによって確認され、ここでの質問によって確認されるわけではありません。 開始ルール、順に: (1) BRIEF.md が存在する → それを読み、何も質問しないでください — ブリーフは確定しており、その flow/storyboard がモードを導出します（brief contract § 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の最新版と比較し、いずれかが古い場合はグローバルセットを更新します。
init 後、<PROJECT_ROOT> を videos/<project> とし、後続のすべての相対パスコマンドをそのディレクトリを作業ディレクトリとして実行します。以下のコマンドでは、. は <PROJECT_ROOT> を意味します。.media、capture、または出力ファイルを呼び出し元のディレクトリに書き込まないでください。
init 直後に BRIEF.md を書き込みます（それより前ではありません — init は空でないディレクトリを拒否します）。インテントレイヤーのロックされたブリーフであり、形状は ../hyperframes/references/brief-format.md に従います。<MEDIA_DIR> をインストールされた /media-use スキルディレクトリとして解決します。次に、各プリファレンスバックアップされた回答を 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 が存在する。プリファレンスバックアップされた回答が記録された（brief contract § 2）。サインインステータスが表示された（サインイン済み、またはオフラインで続行）。
ステップ 1: ブリーフ（キャプチャなし）
目標: ユーザーのテキストを情報源としてプロジェクトに取り込みます。Webサイトのキャプチャや実際のアセットはありません — これはフェイスレス解説動画です。
ユーザーの完全な入力をそのまま保存し、その後、合成キャプチャパッケージを手動で作成します:
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 が存在する。解説者のトピックと対象読者を1つの明確な文で述べることができること。
ステップ 2: デザインシステム
目標: 出荷済みのフレームプリセットを1つ選択します。スクリプトがそれをこの動画の frame.md + キャプションスキンに変換します。
BRIEF.md が style_preset を指定している場合（ユーザーがインテントレイヤーのショーケースから目視で選択したもの）— それを使用します。判断はブリーフが沈黙している場合にのみあなたに委ねられます。その後、あなたが1つの呼び出しを行います — どのプリセットか: ../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>、brief contract § 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つの質問をします — 承認するか変更するか、そしてスケッチを先に（推奨）するかスキップするか。フィードバックはチャット返信として到着します。承認されるまでループします。これはチェックポイントゲートです（brief contract § 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_ 女性）を使用します。ユーザーが好みを表明しなかった場合、パイプラインデフォルトの前に、記憶された音声（brief contract § 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/ の下に配置し、audio_meta.json ファイルに "source": "host" とマークしてリストします: 音楽は 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: キューやホストオーディオなし。この組み合わせにより、プロジェクトはサイレントとしてマークされます — すべてのオーディオパスで、music: none + SCRIPT.md なしの STORYBOARD.md は、オーディオファイルを生成せず、audio_meta.json の生成でスキップします。
ゲート: オーディオパイプの開始、audio_meta.json への書き込み。このステップからステップ4へのバトン渡し — オーディオ処理の進行中に次のステップを開始します。
ステップ 4: ビジュアルデザイン
目標: ストーリーボードをフレームごとのビジュアルデザインで充実させます。
../hyperframes-animation/visual-design.md を読みます。各ストーリーボードフレームの visual: ブロックを、そのビートのブループリントが示唆するものと設計仕様のルールで充実させます。capture/extracted/tokens.json や設計プリセットからカラーとフォントを解決します。このフェーズではフレームごとの visual: ブロックを正しく設定します — これはフレーム構築のソースとして機能するからです。フェイスレスビジュアルはここで発明されます: ウェブサイトのスクリーンショット、実写映像、製品画像はありません。アクションはタイポグラフィ、抽象グラフィック、図、データ可視化、アニメーションです。効果音のキューを、オーディオ中に再生されるタイミングビートと照合します。各ビジュアルがストーリーのビートを強化することを確認します — 装飾だけではありません。
充実したストーリーボードを拡張 STORYBOARD.md として書き、STORYBOARD.md を上書きできるようにします。フレームごとの visual: ブロックは完全に記入されます。各フレームの transition: を設定または改良します。
ゲート: 拡張 STORYBOARD.md が存在し、各フレームに記入済みの visual: ブロックがある。オーディオパイプが完了した（audio_meta.json が存在する、またはサイレントプロジェクトが確認された）。
ステップ 5: フレーム
目標: 各ストーリーボードフレームをHTMLフレームファイルにレンダリングします。
フレームごとに1人のフレームワーカーサブエージェントにディスパッチします。このサブエージェントは、このスキルのルール（../hyperframes-animation/rules/）、ブループリント（../hyperframes-animation/blueprints/）、および hyperframes-creative を使用してHTMLフレームを構築します。フレームワーカーは、各フレームについて以下を実行します:
- ストーリーボードのフレームエントリを読み取ります。
- ブループリント（存在する場合）からブループリントHTMLテンプレートをロードします。
frame.mdの設計仕様を適用します。- フレームのビジュアルコンテンツ（テキスト、グラフィックなど）を生成します。
- フレームファイルを
compositions/frames/NN-*.htmlとして保存します。 index.htmlを作成/更新してすべてのフレームをリンクします。
フレームは自動的にレンダリングされます。ユーザーは各フレームデザインにフィードバックを提供します。フレームワーカーは指摘された事項を修正します。このプロセスは、すべてのフレームが承認されるまで続きます。
ゲート: すべてのフレームファイルが compositions/frames/ に存在し、index.html が存在する。各フレームがそのストーリーボードエントリと一致する。
ステップ 6: 最終レンダリング
目標: フレームを最終動画ファイルにレンダリングします。
npx hyperframes render . を実行して動画を生成します。出力ファイルは renders/video.mp4 です。
レンダリング後、動画をレビューのためにユーザーに提示します。承認を求めます。ユーザーが変更を要求した場合は、適切なステップに戻って修正し、再レンダリングします。これはユーザーゲートです（brief contract § 1）。
ゲート: renders/video.mp4 が存在する。動画がレビューされ、ユーザーによって承認された（自律: 完了を報告した）。