mcpField
M
motion-director

motion-director

github.com/frankxaiデザイン・UI85140 回インストール2 週間前に更新
リポジトリ

motion-director について

Motion Directorは、インターフェース、ページ、動画、アニメーション素材の動きを計画・評価するよう実装エージェントを導くスキルです。適切なアニメーションスタックの選定に加え、演出、タイミング、アクセシビリティ対応、QAを整理します。

主な機能

  1. 01動きの出力先の特定
  2. 02アニメーションスタックの選定
  3. 03演出とタイミングの定義
  4. 04動きを減らす設定への対応
  5. 05動きの品質基準による評価

活用シーン

  1. 01プロダクトUIの動きの計画
  2. 02ランディングページのアニメーション設計
  3. 03SNS動画やGIFの準備
  4. 04埋め込みアニメーション素材の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/frankxai/awesome-motion-design-agent-skills --skill motion-director

インストール後、Claude Code で/motion-directorを入力して読み込まれたか確認します。

詳細

モーションディレクター

ワークフロー

  1. 出力先を特定します。プロダクト UI、ランディングページ、ソーシャル動画、GIF、デザインプロトタイプ、または埋め込みアニメーションアセットです。
  2. モーションの目的を定義します。注目を誘導する、状態を説明する、楽しさを生み出す、概念を教える、またはブランドを表現する、などです。
  3. スタックを選択します。
    • React UI の状態やレイアウトのトランジションには Motion。
    • タイムライン、スクロール、SVG、テキスト、細部まで制御する振り付けには GSAP。
    • インタラクティブなステートマシンアニメーションには Rive。
    • ポータブルなベクターループには Lottie。
    • レンダリングする動画や GIF には Remotion。
    • 空間的なシーンや 3D シーンには Three.js。
  4. タイミングトークン、イージング、スタッガールール、動きを減らす設定時の挙動を指定します。
  5. 実装エージェントにコードの修正を依頼します。
  6. 出力をキャプチャし、モーション品質ルーブリックで評価します。

出力形式

以下を返します。

  • モーションの目的
  • 推奨スタック
  • 振り付け
  • タイミング／イージングトークン
  • 動きを減らす設定時の代替動作
  • 実装メモ
  • QA チェックリスト

コメント

Markdown 対応