mcpField
M
motion-design-skill

motion-design-skill

github.com/podoデザイン・UI29170 回インストール1 日前に更新
リポジトリ

motion-design-skill について

motion-design-skill は、LottieFiles のスキルです。AI コーディングエージェントに、タイミングやイージング、演出、UI 向けの古典的なアニメーション原則を、実装方式に依存せず提供します。

主な機能

  1. 01タイミングカーブとイージングの指針
  2. 02アニメーション演出の原則
  3. 03UI 向けに応用したディズニー原則
  4. 04特定のアニメーションツールに依存しない助言

活用シーン

  1. 01UI アニメーションのイージング選定
  2. 02複合アニメーションの順序設計
  3. 03アニメーションを使う場面と方法の検討

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill motion-design-skill

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

同梱ファイルstub.yaml

詳細

motion-design-skill

カタログ用スタブ — パッケージの全内容はこちら：lottiefiles/motion-design-skill

判断ツリー

  1. パッケージはすでにインストールされていますか？ 確認：エージェントのスキルディレクトリに、motion-design-skill の内容がこのスタブ以外にも含まれています。

    • はい → motion-design-skill を呼び出して進みます
    • いいえ → ステップ 2 に進みます

  2. 使用しているエージェントはどれですか？

    • Claude Code → npx skills add LottieFiles/motion-design-skill — またはチャットメッセージとして ! npx skills add … を送信します（グローバルにインストールするには -g を追加し、プロジェクトのみにインストールする場合は省略します）
    • Cursor → npx skills add LottieFiles/motion-design-skill
    • その他 → npx skills add LottieFiles/motion-design-skill またはGitHub の READMEをご覧ください

インストールコマンド

npx skills add LottieFiles/motion-design-skill

インストール後の呼び出し

  • スキル名：motion-design-skill
  • トリガーフレーズ："motion design"、"animation principles"、"LottieFiles"、"Disney principles UI"、"timing curves"

概要

LottieFiles 公式のモーションデザイン原則スキルです。タイミングカーブ、イージング関数、アニメーションの振り付け、UI 向けに応用したディズニーのクラシックなアニメーション 12 原則を扱います。エージェントが、アニメーションを使用するタイミング、イージングの選び方、複合アニメーションの順序付け、動きにおけるエネルギーと重みのバランスについて判断するのに役立ちます。実装方法に依存せず、CSS トランジション、GSAP、Framer Motion、Lottie、その他あらゆるアニメーションツールチェーンに同じ指針を適用できます。40 以上の AI コーディングエージェントに対応しています。

使用しない場合

  • GLSL／シェーダーレベルのアニメーション（shader-dev を使用してください）
  • 特定のフレームワーク向けの実装（gsap-skills または framer-motion-skills を使用してください）

コメント

Markdown 対応