media-use: オーディオ/画像を取得する前に、
/media-useを呼び出してHeyGenカタログからBGM/SFX/画像を解決します。既存のアセットを登録するには--adoptを実行します。詳細は/media-useスキルを参照してください。
製品ローンチからHyperFramesへ
このスキルを使用して、製品を理解し、そのブランドを把握し、ローンチ動画を計画し、HyperFramesでフレームごとに構築します。
ステップ0の前にルートを確認してください。 あなたはオーケストレーターです。各ステップを実行し、そのゲートを確認してから、次のステップに進みます。このスキルはマーケティング、ローンチ、プロモーション、公開される製品を対象としており、「サイトのプロモーション」などのリクエストもプロモーション目的の場合は含まれます。他の意図は別のルートに振り分けてください:一般的な(ローンチではない)ウェブサイトツアー ->
/general-video;製品を含まないトピック解説 ->/faceless-explainer;GitHub PR ->/pr-to-video;既存映像へのキャプション ->/embedded-captions;短いナレーションなしモーショングラフィック ->/motion-graphics。ユーザーが「動画を作って」とだけ言った場合、またはルートが不明確な場合は、最初に/hyperframesを読んでください。
あなたはオーケストレーターです。videos/<project>/ で作業します。ステップを順番に実行し、各ゲートを通過してから続行します。ユーザーゲートとなるステップは、ステップ0、ステップ3、ステップ6です。ステップ5を除き、すべてのステップを自分で実行します。ステップ5では、フレームごとに1つのサブエージェントをディスパッチします。デザインやモーションのルールはここには記載しないでください。それらはフレームワーカーサブエージェント、このスキルのローカル ../hyperframes-animation/rules/ と ../hyperframes-animation/blueprints/、および hyperframes-creative にあります。
ワークフロー:ステップ0 セットアップ -> hyperframes.json;ステップ1 キャプチャ -> capture/;ステップ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プロジェクトを作成します。
hyperframes.json がない場合のみ初期化します。<project> にはブランド名またはドメインをケバブケースで指定します(例:acme-promo)。ワークスペース名やタイムスタンプは使用しないでください。
npx hyperframes init "videos/<project>" --non-interactive --example=blank — init はインストールされたスキルをGitHub上の最新版と比較し、古いものがあればグローバルセットを更新します。
概要の前にサインイン状況を表示 — npx hyperframes auth status を実行し、その出力をそのまま中継します(言い換えたり書き換えたりしないでください)。 これにより、音声/BGMがHeyGenを使用するかローカルエンジンを使用するかが報告され、サインインしていない場合はその方法も示されます。サインインしていない場合は、STOPしてユーザーが選択するのを待ちます — サインインするか、ローカルエンジンで続行するために「go」/「offline」と言う — その前に概要やその他の質問をしないでください。 これは単なる注意書きではなく、実際の決定ポイントとして扱います。選択を概要の質問に組み込んだり、キーをリポジトリごとの .env に書き込んだりしないでください。(自律モードでは、ステータスを記録してオフラインで続行します。)../hyperframes-media → Preflight の正規のガイダンスを参照してください。
ゲート: hyperframes.json が存在し、アングル、長さ、アスペクト比、言語が確定していること。サインイン状況が表示されていること(サインイン済み、またはオフラインで続行)。
ステップ1:アセットのキャプチャ
目標:動画のためのソース素材、ブランドシグナル、および使用可能なアセットを収集します。
入力を分類し、パスを選択します。明示的なURL -> それをキャプチャし、サイトをナレーションとアセットに使用します。貼り付けられたスクリプト/概要 -> そのまま user_script.txt として保存し、「そのまま使用するか、再構成するか」を一度だけ尋ね、答えを VO_MODE に保存し、キャプチャターゲットを解決します:テキスト内のURL -> それを使用します;ブランド名のみ -> WebSearch、一行でURLを確認してからクロールします;URL/サイトなし -> キャプチャなしパス。
キャプチャを実行:npx hyperframes capture "<URL>" -o ./capture
GEMINI_API_KEY、GOOGLE_API_KEY、またはOpenRouterキーが存在する場合、キャプチャは自動的にアセットを capture/extracted/asset-descriptions.md にキャプション付けします。これはレビューゲートではありません。ビジョンキーがない場合は、DOMコンテキストを使用して続行します。
キャプチャなしパス:手動で capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md、および capture/assets/ を作成します。tokens.json は { "title": "", "description": "", "colors": [], "fonts": [] } とします。可能な場合はタイトル/説明を概要から入力します。visible-text.txt には完全な概要またはスクリプトを含めます。asset-descriptions.md には、ユーザーがアセットのメモを提供していない限り、アセットがキャプチャされなかったことを記載します。
ゲート: capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md、および capture/assets/ が存在すること。ブランドを明確な一文で述べられること。asset-descriptions.md を主要なアセットインベントリとして扱います。実際のキャプチャ後にこれがない場合は、停止してキャプチャが不完全であることを報告します。capture/BLOCKED.md が存在する場合は、それに従います。
ステップ2:デザインシステム
目標:出荷済みのフレームプリセットを1つ選択します。スクリプトがそれをこの動画の frame.md + キャプションスキンに変換します。
あなたは1つの判断を下します — どのプリセットを使用するか。../hyperframes-creative/references/design-spec.md を読み、ブランドと概要に最も合うルックのプリセットを選択します。次に実行します:
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(例:キャプチャなし)の場合 -> スクリプトはプリセット独自のパレットを保持し、完全に出荷可能なデザインになります。概要にキャプチャが見逃したブランドカラー/フォントが記載されている場合は、実行前に capture/extracted/tokens.json に追加します(またはユーザーの design.md を使用してそれを入力します);マッピングが本当に必要な場合にのみ、後で手動で frame.md を調整します。
ゲート: build-frame.mjs が終了コード0で終了したこと — 名前付きプリセットから frame.md が存在し、(プリセットが出荷する場合).hyperframes/caption-skin.html がキャプションスキンソースとして存在すること。
ステップ3:ストーリーボードとスクリプト
目標:概要とキャプチャされた素材を、承認されたフレームごとのストーリー計画に変換します。
references/story-design.md、../hyperframes-animation/blueprints-index.md、../hyperframes-core/references/storyboard-format.md、および ../hyperframes-core/references/script-format.md を読みます。これらを使用して STORYBOARD.md を作成し、ナレーションが必要な場合は SCRIPT.md を作成します。
ストーリーブループリント、フック、説得ロジック、ビート、VO_MODE、アセット選択には story-design.md を使用します。ソフトガイドとして、../hyperframes-animation/blueprints-index.md の役割→ブループリントメニューを参照します:各ビートについて、該当する場合は候補ブループリントIDをメモします。どのビートが存在するかはストーリーの真実が決定します — ブループリントに合わせるためにビートを強制したり、証明された形状が利用可能だからといってビートをでっち上げたりしないでください。各ビジュアルフレームの asset_candidates を capture/extracted/asset-descriptions.md(正規のインベントリ)から選択します — 生の capture/assets/ を閲覧しないでください。そのインベントリがないか使用できない場合を除き、ユーザーにアセットを選択させないでください。ストーリーボードとスクリプトのリファレンスから必要なフィールドを正確に使用します。
草案後、フレームごとの概要を表示します。同じメッセージで、ユーザーに2つのことを尋ねます:(a) 承認するか変更をリクエストするか、(b) ストーリーボードのスキャフォールドのライブプレビュー(npx hyperframes preview)を希望するか — 「はい」の場合のみ開きます。承認されるまで反復し、プレビューの選択をステップ6に引き継ぎます。
ゲート: STORYBOARD.md が存在し、すべてのビジュアルフレームに asset_candidates があり、ナレーションが必要な場合は SCRIPT.md が存在し、ユーザーがフレームごとの計画を承認したこと。
ステップ3.1:オーディオ
目標:承認されたスクリプトから、ナレーション、ワードタイミング、音楽、およびオーディオメタデータを生成します。
ステップ3の承認後にオーディオを開始します。バックグラウンドで実行し、その後ステップ4に進みます。
node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json &
オーディオスクリプトは、ナレーション、ワードタイミング、HeyGenの音楽ライブラリからのBGMルックアップ、およびタイミングメタデータを処理します。BGMのムードはストーリーボードの music: フィールドから取得します。これは生成ではなく取得にHeyGen Audio APIを使用し、TTSと同じ ~/.heygen 認証情報を使用します。プロバイダの詳細については、../hyperframes-media/references/tts.md を読んでください。
ナレーションがなく、SCRIPT.md もない場合は、音声生成をスキップします。ストーリーボードに音楽ムードがある場合は、BGMが実行される可能性があります。
ゲート: オーディオジョブが開始されたか、プロジェクトが無音としてマークされていること。
ステップ4:フレームのビジュアルデザイン
目標:各ストーリーボードフレームにビジュアルディレクション、レイアウトの意図、およびモーションの選択を追加します。
STORYBOARD.md をその場で編集します。別のストーリーボードは作成しません。色、タイポグラフィ、レイアウトの雰囲気、スタイルについては frame.md を信頼できる情報源として使用します。
references/visual-design.md、../hyperframes-animation/blueprints-index.md、references/motion-language.md、および ../hyperframes-animation/rules-index.md を読みます。visual-design.md を方法(時間コード化されたショットシーケンス、インラインのレイアウト語彙、および必須の ## Video direction ブロック)に使用します。../hyperframes-animation/blueprints-index.md を使用して各フレームのショット形状を選択します。motion-language.md(モーション語彙 + モーション原則)および ../hyperframes-animation/rules-index.md(有効なルール名)をモーションに使用します — モーション名を発明しないでください。
すべてのビジュアルフレームについて、visual-design.md の方法に従って、時間コード化されたショットシーケンス を STORYBOARD.md に記述します:フレームのブループリントを選択するか、構成し、この製品のコンテンツでインスタンス化し、ナレーションに合わせて各シーンのリビールをペーシングし、フレームが最初に詰め込んでフリーズするのではなく、全期間にわたって展開するようにします。シーンごとにレイアウトとモーションをインラインで記述します(語彙は visual-design.md と motion-language.md にあります)。動画全体に1つの ## Video direction ブロックを追加します。
ストーリー、スクリプト、アセットの選択、asset_candidates、transition_in、またはキャプチャされたソース素材は変更しないでください。このステップではHTMLを作成しないでください。
ビジュアルデザインが確定した後、名前付きアセットをステージングします:
node <SKILL_DIR>/scripts/stage-assets.mjs --storyboard ./STORYBOARD.md --hyperframes .
ゲート: すべてのビジュアルフレームに、リビールがナレーションに合わせてペーシングされた時間コード化されたショットシーケンスがあること(先詰めなし);## Video direction が存在すること;assets/ に名前付きアセットが含まれていること。
ステップ5:フレームの構築
目標:すべてのストーリーボードフレームをHTMLコンポジションとして構築し、再生可能な動画を組み立てます。
オーディオが開始された場合は、ステップ3.1のオーディオが終了するのを待ちます。その後、継続時間を同期し、SFXを取得します。無音プロジェクトの場合は両方をスキップします。
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 .
継続時間の同期は機械的に行われます:実際の音声の継続時間が優先されます。無音フレームは推定値を維持します。同期された継続時間を手動で編集しないでください。
ディスパッチの前に、sub-agents/frame-worker.md と ../hyperframes-core/references/subagent-dispatch.md を読みます。フレームごとに1つのサブエージェントを、可能であれば並列でディスパッチします。そうでなければ、ワーカーをウェーブで実行します。各ワーカーは正確に1つのフレームを取得します。
各ワーカーコンテキストには、PROJECT_DIR、frame_id、キャンバスサイズ、キャプションが有効な場合のキャプションステータスとキープアウトバンド、およびこのスキルの ../hyperframes-animation/rules/ への絶対パスとしての RULES_DIR を含める必要があります。各ワーカーは frame.md、STORYBOARD.md からの自身の ## Frame N ブロック、引用された各モーションのローカルルールレシピ(../hyperframes-animation/rules/<id>.md)、およびフレームのブループリントテンプレート(../hyperframes-animation/blueprints/<id>.md)を読みます。各ワーカーは compositions/frames/NN-*.html のみを書き込みます。ワーカーは STORYBOARD.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 としてマークされ、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 validate
npx hyperframes inspect
npx hyperframes snapshot --at <frame-midpoints>
snapshot はキャプチャされたフレームを1つのコンタクトシート(snapshots/contact-sheet.jpg)に結合します。ざっと見て、明らかに壊れているものがなければ先に進みます — ここで長居しないでください。
コマンドが失敗した場合は、stderrを表示して停止します — 回復コマンドを積み重ねないでください。自分で修正します:compositions/frames/NN-*.html への最も安価で安全な編集を行い、失敗したチェックを再実行します。
チェックが通過した後、ユーザーレビューのために一時停止します。動画はアセンブルされ、Studioで表示および編集可能です。プレビューはステップ3とステップ6で一度だけ管理します:ユーザーが以前に要求した場合は開き、以前に断った場合は提供し、すでにStudioでレビューしている場合は再度尋ねません。
プレビュー:npx hyperframes preview
最終MP4をレンダリングします:
npx hyperframes render --out ./renders/video.mp4
レンダリング後、renders/ と最終的な STORYBOARD.md を提示し、ユーザーの承認を得ます。
ゲート: ユーザーが最終動画を承認したこと。
トラブルシューティングとフォールバック
- 汎用ハンドラーコマンドはありません。 各ステップは1つのことを行います。すべてのコマンドはスキルと一緒にインストールされます。
- 動画全体の再構築:
rm -rf compositionsを実行し、ステップ5から再開します。 - 特定のフレームの再構築:そのフレームの
compositions/frames/NN-*.htmlを削除し、そのフレームのワーカーを再実行します。 - キャプションの再構築:
caption_groups.jsonを削除し、ステップ5のキャプションコマンドを再実行します。 - オーディオの再生成:
audio_meta.jsonを削除し、ステップ3.1を再実行します。 - トランジションの再注入:
index.htmlを削除し、ステップ5のトランジションコマンドを再実行します。 - スタジオレンダリングの失敗:
--devフラグを追加します。 - アセットがキャプチャされなかった:すべての利用可能なソースを確認し、代替としてプレースホルダーを使用します。
capture/BLOCKED.md:含まれている指示に従います。- タイムアウトまたはレート制限:指数バックオフで再試行し、進行状況をユーザーに通知します。
core.md v1.0