LottieFiles/motion-design-skill

これは何？

主な機能

• 01実装前にタイミング、イージング、振り付け、感情的な意図を検討できる
• 02Disneyのアニメーション12原則をUI制作向けに応用
• 03登場・退場、状態フィードバック、環境的なモーション、複数要素の段階表示用レシピを収録
• 04時間とイージングの参照表、品質チェックリストを提供
• 05特定のライブラリに依存せず、CSS、Framer Motion、GSAP、Lottie、スプリング物理で利用可能

ユースケース

• Webアプリのカードやリストコンポーネントに登場アニメーションを追加する
• フォーム送信ボタンのローディング・成功・エラー遷移を設計する
• ダッシュボードのウィジェットを表示する順序を振り付ける
• 既存のアニメーションコードをモーションデザインの原則に照らしてレビューする

クイックスタート

1. 1

   エージェントにスキルをインストールする

   npx skills add LottieFiles/motion-design-skill

使う前に知っておきたいこと

• !skills.sh経由で40以上のエージェントに対応していますが、READMEにはインストールコマンド以外のセットアップ手順が記載されていません。

トピック

よくある質問

motion-design-skill とは？

あらゆるアニメーションライブラリで使える、UIアニメーションの原則をAIコーディングエージェントに教えるスキル。 Motion Design Skillは、アニメーションコードを書く前に、AIエージェントがモーションデザイナーの視点で考えられるようにする一連の指示です。特定のライブラリ向けのコードを生成するだけでなく、タイミング、イージング、振り付け、モーションに込める感情的な意図の選び方を扱います。

motion-design-skill は無料で使えますか？ライセンスは？

motion-design-skill は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

motion-design-skill は今もメンテナンスされていますか？

半年以内に更新あり。motion-design-skill の最終コミットは 2026年5月18日 です。

motion-design-skill は何に使えますか？

Webアプリのカードやリストコンポーネントに登場アニメーションを追加する フォーム送信ボタンのローディング・成功・エラー遷移を設計する ダッシュボードのウィジェットを表示する順序を振り付ける 既存のアニメーションコードをモーションデザインの原則に照らしてレビューする

motion-design-skill のインストール方法は？

エージェントにスキルをインストールする: npx skills add LottieFiles/motion-design-skill

motion-design-skill はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/LottieFiles/motion-design-skill