TheAngryPit/TheAngrySkills - モーション・グラフィックス

プラグインインストール: セットアップやfreshnessコマンドの前に、このスキルが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つのグループに分かれます。その後、特定のカテゴリが選択されます — 検索駆動の場合は、検索が返すコンテンツのタイプによって決まります。各カテゴリは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。

オプションのキー（未設定の場合はローカルフォールバック）— メディアユース経由でアセットをソース/生成するカテゴリでのみ必要：

キー	使用目的	フォールバック
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 内にもう1つ 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）。以下のことを行う必要があります：

1. 決定：検索は必要か？（最初の分岐）
   • いいえ → フォームカテゴリ（kinetic-type / stat / charts / logo-reveal / lower-thirds）を選択。コンテンツはユーザーが提供。asset_needs: []。
   • はい → 検索計画を asset_needs[] に出力（news / web / tweet / image; 二極クエリ）。具体的な 検索駆動カテゴリ（webpage / news / tweet / asset-fusion）は、ステップ2で返されるコンテンツタイプによって確認され、ステップ3で確定されます。
2. ドラフト 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 をラップ。検索駆動カテゴリはnews/web/tweet/image検索を使用）を参照。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 --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フロー: 分析 → 検索 → レビュー → 構成）。ツイート/ニュース/ウェブページ/画像という結果型により、再利用可能なビルディングブロックが決まります。
• 分類の順序: 検索の決定は、ユーザーが内容を提供したのか、作品が外部ソースを参照しているのかを区別します。フォームカテゴリは、キーボードがあればすぐに作成できます。
• スコーリング: 検索が必要な場合、スコーリングは検索によって行われます（agents/director.md を参照）。強制力のあるスロットルはありませんが、設定には注意してください。
• ダイジェティック・フュージョン (asset-fusion): 特定の画像の背後にある生のレイアウト構造（被写体のポーズ/形状、色の間隔、重要な線）がチャートやタイポグラフィの基礎となります。コンテンツとコンテナの比喩を壊します。design は、ショットが構築される前に内部的にテストすることが最適です。
• マルチショット/ナレーション: /hyperframes から /general-video へのルートが存在します。ここでは、特定のカテゴリのバリエーション（例：ローワーサード + ロゴ）以外の複数ショットのエピソードは扱いません。
• 理由のないモーション: 一分の隙もなく、ランダムなバウンスや遊び心のあるアニメーションは作らないでください。各動きには説得力のある理由が必要です。
• リージョンについて: すべてのUIコピーはアメリカ英語。日付/数値は en-US ロケール（user-following ではありません — 大規模なリリース後に対処する地域化のバケットとしてマークされています）。
• gsap.registerEffect の使用: motion-vocabulary のルールで。レジストリスロットは HF ブロックの構成/カスタマイズ時に設定可能です。
• タイムラインの命名規則: 常に camelCase で __timelines（tl ではありません）。理由は builder-contract を参照。
• 制限事項: 3D カメラ / パーティクル / 物理エンジンはまだサポートされていません。カスタムエフェクトは AnimationEffect を通じてのみ。
• スキル間の依存関係の更新: このスキルが「更新」を実行すると、hyperframes.json の $schema と、このスキルが依存するコアスキル（hyperframes-animation および hyperframes-cli）を更新します。これらの依存関係を直接更新しないでください。npx hyperframes skills update motion-graphics がそれを行います。