Communitygithub.com

nikisge/claude-motion-kit

モーショングラフィックス作品(ローンチフィルム、解説アニメーション、YouTube差し込み、ホワイトボードグラフィック、ソーシャル/縦型クリップ、ショーリール、ワンショットショーケース)の制作や改訂時、およびシーンコードを書く前に使用します。また、モーション作品がスライドやウェブサイト、一般的なAI出力のように見えたり、静的または遅く感じられる場合にも使用します。トリガーワード:モーショングラフィックス、アニメーション、ローンチビデオ、解説ビデオ、差し込み、ショーケース、スタイル、「モーションデザイナーとして」

claude-motion-kit とは?

このスキルは、AIエージェント(Claude Codeなど)を本格的なモーションデザイナーのように動作させるための包括的なワークフローを提供します。単なるアニメーション生成を超え、リファレンス分析(`ref_metrics.py`を使用)、スタイルカードの選択、ムードボード作成、ストーリーボードとアニマティックの作成、独立した批評(`motion_check.py`を使用)による品質チェックを備えた、8ステップの標準プロセスを実装しています。HyperFrames(HTML+GSAP+Three.js→MP4)をデフォルトのレンダリングエンジンとして使用し、本格的な3Dには`motion-3d`、オーディオには`motion-sound`といった他のスキルと連携します。このスキルの核となるのは、AIによる画一性を防ぐための「意図的なスタイル選択」と「少なくとも1つの独自アイデア」の原則と、各ショットに「動きの理由」を持たせるという設計哲学です。シンプルな修正のための簡易パスと、完全なクリエイティブコントロールを可能にするワンショット/ショーケースモードも含まれています。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/nikisge/claude-motion-kit/tree/HEAD/motion-kit/skills/motion-director

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

モーションディレクター:モーションデザイナーのように働く

モデルはアニメーションを作成できます。しかし不足しているのは センス、具体的な手本、そしてチェックを伴うワークフロー です。このスキルはそれを提供します。エンジンは交換可能です(標準:HyperFrames、HTML + GSAP + Three.js → MP4)。

基本姿勢:

  • 各作品ごとに 独自 のコンポーネントと 独自 のデザインを構築します。カタログ(HyperFramesレジストリ、レシピ)は情報源であり、組み立てキットではありません。
  • リファレンスは 文法(テンポ、トランジション、カメラ、タイポグラフィの振る舞い)を提供し、内容は提供しません。
  • AIの画一性に対抗するため:作品ごとに 1つの意識的なスタイル選択 と 少なくとも1つの独自アイデア。
  • 「ゼロから始める」ことは禁止:具体的なリファレンスなしではモデルは推測し、結果はどのAIビデオのようにも見えます。

ツールは motion-inspo スキル内にあります(scripts/refs.py、sheet.py、ref_metrics.py、motion_check.py、beats.py)。プロジェクトは作業ディレクトリ内の projects/<name>/ に配置されます。

最初に依頼を読み、その後で方法を選択する

依頼方法references/formats.md のフォーマット部分
新作(ローンチ、解説、ショーリール)標準プロセスローンチフィルム / 解説アニメーション / ショーリール
YouTube差し込み、ホワイトボードグラフィック標準プロセス、簡易版(音楽の代わりにワードタイミング)YouTube差し込み
ソーシャル / 縦型標準プロセス、Hookが最初ソーシャル縦型
「ワンショット」、「ショーケース」、「あなたの能力を見せて」、質問なしのテストワンショットモードショーケース
小規模な依頼(1シーンの変更、ロゴスティング、数値のアニメーション、フィードバック後の修正)簡易パス–

簡易パス: 目的を一文で、該当するストーリーボードのカットを調整し(存在する場合)、構築、motion_check を該当部分に対して(--from/--to)、静止画を確認、提示。新しいブリーフや批評は不要。

標準プロセス(新作)

  1. ブリーフ(references/brief.md):約束、アイデア、目標の感情、フォーマット、ブランド、トーンの役割。
  2. スタイル + 目標リファレンス:
    • references/styles/README.md からスタイルカードを選択、組み合わせるか、独自に派生させる。
    • 1つの目標リファレンス を検索(motion-inspo、whatships.com)、計測(ref_metrics.py)、ショットごとに分解。計測値はブリーフ内の目標となる(references/inspiration.md)。
    • さらに2~5つのリファレンスは文法としてのみ使用。独自アイデアを記録する。
  3. インスピレーション + ムードボードをユーザーと共に: リファレンスの瞬間を画像シーケンスとして表示し、2~3のストーリー方向性を提案。ユーザーは説明ではなく実際の画像で決定する。ゲート。
  4. 目標ツールで3つのスタイルフレーム(references/style-frames.md)。ゲート:ユーザーが承認。
  5. ビートグリッド上のストーリーボード + アニマティック(references/storyboard.md、beats.py)。ゲート。
  6. 構築、カットごと。最も難しいカットから最初に。
  7. チェック:
    • motion_check.py render.mp4 をスタイルの閾値で(references/rules.md)、
    • ref_metrics.py render.mp4 --ref ziel.mp4 --out check/metrics、
    • 4フレーム/秒のコンタクトシートを自身で確認、
    • 次に 独立した批評(references/critic.md)、画像と数値のみを見てコードは見ない。
  8. 音声 は motion-sound スキルで処理(キューリスト、ミックスを -14 LUFS に)。
  9. 完成: 書き出し(10ビット + バンディング防止の微細グレイン)、コンタクトシート、短いレポート。

変更は常に最初にストーリーボードに、次にコードに反映。

初稿後の批評ラウンドは最大2回、その後最良のバージョンを納品し、弱点を正直に伝える。無限の改善ループは時間を浪費し、各回で得られるポイントはわずか。

ワンショット / ショーケースモード

質問なし、承認待ちなし、全力投球。視聴者は驚嘆し、あなたが彼らのために何を構築できるかを理解する(references/formats.md → ショーケース)。

  1. アイデアラウンド(brief.md):5つのストーリーアイデアをそれぞれ一文で。最初に思いついたアイデアと、主人公が業界のツール(キーフレーム、タイムライン、イージングカーブ、カーソル)であるアイデアは除外。語り継げるものを選ぶ。
  2. ブリーフ、スタイル、目標リファレンス(計測+分解)、独自アイデア:自身で決定し、理由を説明。
  3. 少なくとも2つの「驚き」のカット を計画(技術、秒数、理由)、構築が難しいもの。それらを最初に構築する。
  4. 自分自身のためのスタイルフレーム + ストーリーボード + アニマティック。
  5. アニメーション作成前の批評(サブエージェント、強力モデル、新しいコンテキスト)。承認後でのみアニメーションを作成。
  6. 構築、チェック、音声。
  7. 完成レンダリングに対する最終批評。ショーケースの基準を下回る場合:最初に最も弱い部分を修正、「驚き」が低い場合は細部を磨くのではなく「驚き」のカットを強化する。

ツールの選択

条件ツール
UI、タイポグラフィ、2.5Dカメラ、SVG、図HyperFrames(HeyGenのスキル:npx hyperframes skills)
本格的な3D(製品、金属、ガラス、被写界深度)motion-3d スキル(HyperFrames内のThree.js、オプションでBlender)
現実世界、人物、場所ビデオモデル(Kling、Seedance、Veo …)、クレジット消費;編集時に各AIカットをコードによるカメラ移動で活性化
音声motion-sound スキル

すべてを決定づけるフレーズ

  • 各カットは何かを行う画像であり、イラスト付きの文ではない。テキストはせいぜいオブジェクトに付ける1単語。
  • 各トランジションはオブジェクトである(ディスプレイがUIになり、チップがページになる)。クロスフェードは最終手段。
  • 理由なく静止するものはない: 読みのための静寂は次の目標へのゆっくりとした移動であり、フリーズではない。
  • カットごとに1つの派手な要素。 すべてを同時にアニメーション化すると、何もアニメーション化されない。
  • スライドやウェブサイト的なカード(タイトル+テキスト、フィーチャータイル、アイコングリッド、番号01/02/03)や 典型的なAIエンドカード(空白スペースにロゴ+キャッチコピー+URL)は禁止。エンディングは何かを行う画像か、ロゴになるオブジェクト。
  • 最も強い画像は最初の2秒に属する。 作品は動きの途中で始まり、決して黒からのフェードインで始まらない。

テストで最も効果があったこと

  1. 作品ごとに1つの計測された目標リファレンス。 体感的な密度は通常、カットではなくカメラ移動から生まれる。計測はそれを示すが、目だけではわからない。
  2. 独立した批評者。 構築した本人は平均して自分を過大評価し、新しい視点がコンタクトシートで即座に見つける画像の欠陥を見逃す。
  3. 「ツールを主人公にしない」アイデアラウンド。 作品は技術よりもストーリーで失敗することが多い。
  4. センスをデータとして: ユーザーが良いと感じるリファレンスと、アンチリファレンス(「スロップ」)を文書化する。

リファレンス

brief.md · inspiration.md · style-frames.md · storyboard.md · rules.md(数値、チェック閾値) · critic.md · formats.md · styles/(スタイルカード)

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

関連スキル