プラグインのインストール: セットアップまたは更新コマンドの前に、このスキルがHyperFramesプラグイン内にある場合は、プラグイン実行ルールに従ってください。スタンドアロンインストールの場合は、以下の更新手順を維持してください。
まず、このスキルを最新の状態に保ってください — 実行前にユーザーに確認してください:
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/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 — メディア使用解決 (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つのグループに分割します。その後、特定のカテゴリが選択されます — 検索駆動型の場合は、検索が返すコンテンツのタイプによって決定されます。各カテゴリは 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。
オプションのキー（設定されていない場合はローカルフォールバック）— メディア使用を介してアセットをソーシング/生成するカテゴリにのみ必要:
| キー | 使用目的 | フォールバック |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | 画像生成 (メディア使用解決) | 生成をスキップ / 検索のみ |
| (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: メディア使用、条件付き)
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 + 解決された assets/index.md (ステップ2が実行された場合) を含むディスパッチコンテキスト + 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> + その場でカスタマイズ。ギャップ + アセットフュージョンアフォーダンスのみ手動で作成。出力 compositions/index.html はHFコントラクトを尊重 (一時停止されたGSAPタイムライン on 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 --background)
明示的なレンダリングの回答があった場合のみレンダリング:
(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フロー: 分析 → 検索 → レビュー → c
…
[翻訳のため切り詰められました]