最初に、このスキルを最新に保つ — サイレントに実行し、確認を求めない:
npx hyperframes skills update motion-graphics。すべてが最新の場合は高速なno-op。そうでない場合は、このスキルとそれに依存するコアドメインスキルを、それらに依存する前に更新します。
figma ソース: 構築元のロゴ/アセット/アニメーションが figma.com URL から来る場合は、最初に
/figmaを実行 — アセットエクスポート、ブランドトークン、およびグラフィックが Figma Motion インポートの場合は Motion→GSAP 変換 — そしてその出力から構築します。生の MCP ツールを介して Figma を直接操作しないでください。それは SVG のサニタイズ、.media/manifest.jsonlの来歴、およびブランドトークンのvar()バインディングをスキップするため、後のブランド変更が完全な再インポートなしでは伝播できなくなります。
motion-graphics — ディスパッチエントリ
玄関は
/hyperframesです。 このスキルは短く、デザイン主導で、ナレーションのないモーショングラフィック（動きがメッセージ。約10秒未満、ナレーションなし）を作成します。それを超える長さ、ナレーション、マルチシーン、または不確かなもの → 最初に/hyperframesを読んでください：意図レイヤーがすべてのルート決定を所有します。
このワークフローは自律的に設計されています — 最大で1つの確認質問（agents/director.md）、その後は中間レビューなしで検証まで構築します。意図レイヤー（/hyperframes → references/intent-interview.md）は、実行形状の質問なしにここに直接ルーティングします。このように短い作品には、ストーリーボードやコンパニオンセッションはほとんど追加価値をもたらしません。レンダリングは引き続きユーザーゲート付きです：チェックとプルーフスナップショットが成功した後、../hyperframes-core/references/brief-contract.md から標準の「プレビューする、それともレンダリングする？」質問をします。BRIEF.md が存在する場合は、ディレクターの質問の前にそれを読んでください。
短いデザイン主導のモーショングラフィック。アセットファースト：ショットをデザインする前にアセット戦略を決定し実際の素材を入手し、次に入手したものに合わせてショットをデザインし、カタログ機能を再利用して構成します。すべての成果物は PROJECT_DIR = videos/<project-name>/（ステップ0で作成）に保存されます。以下のすべてのパスはこれに対する相対パスです。
| フェーズ | 実行 | 主要成果物 | 詳細フロー |
|---|---|---|---|
| init | Bash | hyperframes.json | ステップ0 |
| plan | サブエージェント — 検索の要否を決定? + 分類 + アセット戦略 | shot-plan.json（ドラフト: カテゴリ、asset_needs クエリ、ブリーフ） | agents/director.md（パート1） |
| source ◇ | Bash — media-use resolve（asset_needs が空ならスキップ） | assets/ + assets/index.md | phases/source/guide.md |
| design | サブエージェント — 解決済みアセットに基づくショットデザイン | shot-plan.json（確定: ブロック + レイアウト + モーション + 位置） | agents/director.md（パート2） |
| build | サブエージェント — 再利用優先の構成 | compositions/index.html | agents/builder.md |
| verify | Bash — lint、check、プルーフスナップショット；失敗時は修復 | snapshots/contact-sheet.jpg | ステップ5 |
| approve | プレビューかレンダリングかを尋ね、回答を待つ | 明示的なレンダリング承認 | ステップ6 |
| render | Bash — hyperframes render（MP4、オーバーレイの場合は --format webm/mov） | renders/video.mp4 または透明オーバーレイ | ステップ6 |
◇ source は、選択されたカテゴリがアセットを宣言している場合にのみ実行されます。純粋なコード/テキストカテゴリ（例：kinetic-type、ほとんどの charts/stat）は asset_needs: [] を持ち、計画からデザインに直接スキップします。
カテゴリ — 検索決定で分割
plan の最初の決定は：これには検索が必要か？ この分岐はカテゴリを2つのグループに分割します。その後、特定のカテゴリが選択されます — 検索駆動型の場合は、検索が返すコンテンツの種類によって。各カテゴリは1つの categories/<id>/module.md（計画と構築ルール）です。共有モーションボキャブラリーは references/motion-vocabulary.md（→ hyperframes-animation ルール/ブループリント + レジストリブロック）にあります。
フォームカテゴリ — 検索なし; ユーザーがコンテンツを提供：
| カテゴリ | 意図 | 依存先 |
|---|---|---|
kinetic-type | パンチの効いた行 / 引用 / タイトル、モーションファーストテキスト | caption-* ブロック + アニメーションルール |
stat | 単一のヒーロー数字 / カウントアップ + リング | apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills} |
charts | データからの棒 / 折れ線 / 円 / レース / % グラフ | data-chart ブロック |
logo-reveal | ロゴスティング / ブランドロックアップ（ユーザーロゴ） | logo-outro / rules/svg-path-draw |
lower-thirds | 名前 / タイトルバー、コールアウト、ソーシャルオーバーレイ | caption-* + レジストリオーバーレイブロック |
maps | 地理モーション — 地域のハイライト、場所の接続、位置へのズーム（ベクターまたはベイクドベースマップレーン） | us-map / world-map ファミリー + bake-basemap.mjs |
検索駆動型カテゴリ — 最初に検索し、次にコンテンツタイプでアニメーション化（RWA パス）：
| 返されるコンテンツ | カテゴリ | アニメーション |
|---|---|---|
| ウェブページ / リンク | webpage | ウェブページ / UI アニメーション（スクロール、リビール、カーソル、コールアウト） |
| ニュース記事 | news | 見出しリビール + ソースカード + キーファクトコールアウト |
| ツイート | tweet | アニメーションツイートカード |
| 画像 / エンティティ | asset-fusion | アセットの形状が チャートに変わる（RWA ダイジェティックフュージョン） |
ビルド順序: 一度に1つ、カバレッジ優先（ラフで問題ありません）。kinetic-type はプロトタイプから移植済み。残りはこれに続きます。
前提条件
macOS Apple Silicon または Linux x64。システムツール: brew install node ffmpeg。npx hyperframes doctor を一度実行。macOS GPU レンダリング: export PRODUCER_BROWSER_GPU_MODE=hardware。
オプションのキー（設定されていない場合のローカルフォールバック）— media-use を介してアセットをソース/生成するカテゴリにのみ必要：
| キー | 用途 | フォールバック |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | 画像生成（media-use 解決） | 生成をスキップ / 検索のみ |
| (asset_scout / 検索プロバイダ) | webpage/news/tweet + asset-fusion 実アセット検索 | カテゴリはアセットフリーに劣化 |
フロー
ステップ 0 — 初期化
cwd はエージェントワークスペースルート。すべての成果物を PROJECT_DIR = videos/<project-name>/ の下に書き込みます。<project-name>: ユーザーが指定したディレクトリを使用し、そうでない場合は意図から短いケバブケース名（<subject>-motion）を使用します。ワークスペースのベース名やタイムスタンプは使用しません。
$PROJECT_DIR/hyperframes.json が存在しない場合のみ：
PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
init はインストールされたスキルを GitHub 上の最新と比較し、古いものがあればグローバルセットを更新します。
制約: ワークスペースルートで hyperframes init を決して実行しないでください。PROJECT_DIR 内に別の hyperframes/ を決してネストしないでください。すべての Bash コマンド（マスター + サブエージェント）は (cd "$PROJECT_DIR" && ...) サブシェルです — 裸の cd は決して使用しないでください。
ステップ 1 — 計画（サブエージェント: ディレクターパート1）
1つのサブエージェントをディスパッチします。プロンプト = 完全な agents/director.md + ## Dispatch context（SKILL_DIR / PROJECT_DIR / ユーザーのリクエスト / Schema: <SKILL_DIR>/references/shot-plan-ir.md）。その内容:
- 決定: これには検索が必要か？（最初の分岐）
- いいえ → フォームカテゴリ（kinetic-type / stat / charts / logo-reveal / lower-thirds）を選択; コンテンツはユーザー提供;
asset_needs: []。 - はい → 検索計画を
asset_needs[]に出力（ニュース / ウェブ / ツイート / 画像; 二極クエリ）。特定の検索駆動型カテゴリ（webpage / news / tweet / asset-fusion）はステップ2で返されるコンテンツタイプによって確定され、ステップ3で最終化されます。
- いいえ → フォームカテゴリ（kinetic-type / stat / charts / logo-reveal / lower-thirds）を選択; コンテンツはユーザー提供;
- ドラフト
shot-plan.json（エンベロープ + 選択されたフォームカテゴリ または 検索意図 +asset_needs+ 1パラグラフのショットブリーフ）を書き込みます。スキーマ:references/shot-plan-ir.md。
検証: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing。
ステップ 2 — ソース ◇（Bash: media-use、条件付き）
shot-plan.json.asset_needs が空でない場合、アセットを解決します（検索 / 生成 / フェッチ → プロジェクトローカルパス + 台帳に固定）。phases/source/guide.md（media-use resolve をラップ; 検索駆動型カテゴリはニュース/ウェブ/ツイート/画像検索を使用）を参照。asset_needs が空の場合は、ステップ3にスキップ。
# 説明用 — phases/source/guide.md を参照
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
優雅に劣化: 検索/プロバイダが利用できない場合、カテゴリはアセットフリーにフォールバックします（context.log に記録）。
ステップ 3 — デザイン（サブエージェント: ディレクターパート2）
サブエージェントをディスパッチします（プロンプト = agents/director.md パート2 + ディスパッチコンテキスト（ステップ2が実行された場合は解決済みの assets/index.md を含む）+ catalog-map.md）。利用可能なアセットに基づいてショットをデザインします: カタログブロック + hyperframes-animation ルール/ブループリント、レイアウト、モーション、ビート、および（asset-fusion の場合）element_positions + スポイトパレットを選択します。shot-plan.json（content.block + content.customize + カテゴリ別コンテンツ）を最終化します。
ステップ 4 — 構築（サブエージェント: ビルダー、再利用優先）
サブエージェントをディスパッチします。プロンプト = 完全な agents/builder.md + ディスパッチコンテキスト（shot-plan.json、catalog-map.md、カテゴリの module.md、references/motion-vocabulary.md、references/builder-contract.md）。再利用優先: npx hyperframes add <block> + その場でカスタマイズ; ギャップとアセットフュージョンアフォーダンスのみを手動で作成。HF コントラクトに従って compositions/index.html を出力（一時停止された GSAP タイムラインが window.__timelines にある、class="clip" + 安定した ID、tl.seek(0)、決定論的）。
ステップ 5 — 検証（Bash → 失敗時に修復サブエージェント）
(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)
開始状態、シグネチャムーブ、最終ホールドを示すプルーフタイムを選択します。続行する前に、生成されたコンタクトシートまたはスナップショットシートを検査します。lint、check、またはスナップショットの失敗時には、修復サブエージェント（agents/finalize.md）を1回のインプレース修正パスのためにディスパッチし、その後失敗したゲートを再実行します。欠陥を隠すためだけに固定期間を変更しないでください。
ステップ 6 — 承認とレンダリング（Bash）
1つの質問をします: 「プレビューを先に見ますか、それともレンダリングしますか？」ユーザーがプレビューを選択した場合、Studioを開き、改訂後に同じ承認ゲートに戻ります：
(cd "$PROJECT_DIR" && npx hyperframes preview)
明示的なレンダリング回答があった場合のみレンダリング：
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# 透明オーバーレイバリアント: --format webm (または mov)
出力が存在し、空でなく、意図した長さであることを確認します。最終ハンドオフでは、アーティファクト名、実際の長さ、構成またはフレーム ID、プルーフタイム、および検査されたコンタクトシートまたはスナップショットシートを指定します。フラグは /hyperframes-cli → references/preview-render.md にあります。
再開テーブル
| 状態 | 続行する場所 |
|---|---|
shot-plan.json がない | ステップ1（計画） |
shot-plan.json に asset_needs があるが assets/ がない | ステップ2（ソース） |
shot-plan.json は最終版だが compositions/index.html がない | ステップ3/4（デザイン+構築） |
compositions/index.html が存在するが、プルーフスナップショットがない | ステップ5（検証） |
| チェックとプルーフスナップショットが成功しているが、承認されたレンダリングがない | ステップ6（承認） |
| 承認されたレンダリングが存在する | 出力を確認してから報告 |
設計ノート（メンテナー向け — 実行時はこれを読まない）
- アセットファーストの根拠: ソーシングは前倒しされ、ショットデザインに情報を提供します（RWAフロー: 分析 → 検索 → レビュー → 構成）。検索駆動型カテゴリ（
webpage/news/tweet）とasset-fusionはどちらも media-use 検索（ニュース/ウェブ/ツイート/画像）に依存しており、これは media-use の文書化された RWA の流れです。 - 再利用優先: エコシステム内での LLM 生成テンプレートの類似物は、「カタログブロックから構成し、
npx hyperframes addで取り込み、ギャップのみを手動作成する」ことです。 asset-fusionの理由: RWA の「JSON をクエリに変換 → 検索 → アセットを分析してチャートに変換」パターンに従います。bake-basemap.mjsも同様の理由を持っています。- 検索駆動型カテゴリの確認プロンプト: ユーザーは、検索が適切なコンテンツを見つけたことを確認するよう求められます。
asset-fusionの場合、画像が適切であること。 asset-fusionのスポイト: デザインパート2は、画像から3～5色のパレットを抽出するために、hyperframes-animationの Eyedropper ルールに依存します。- snapshot times の選択: 「ショットのデザイン講評」ビデオを考えてください。ほとんどは開始状態、最大の動きの瞬間、および最終ホールドを知りたいのです。
- 複製/派生:
/general-videoワークフローは、motion-graphicsの複数ショットバージョンとして派生しました —shot-plan.jsonスキーマは共通部分を共有していますが、motion-graphics はblocksの代わりにblockを使用します。