/ ディレクトリ / プレイグラウンド / Motion.dev Animations Skill
● コミュニティ 199-biotechnologies ⚡ 即起動

Motion.dev Animations Skill

作者 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill

必要なモーションを説明してください。 スプリング物理学、削減モーションのサポート、レイアウト シフトなしで 60fps 以上で実行される Motion.dev コードを入手します。

motion-dev-animations-skill は、Motion.dev (旧 Framer Motion) を使用してプロダクション グレードのアニメーションを作成するクロード コード スキルです。 アニメーション、スクロール効果、Motion.dev、スプリング物理学などに言及すると自動的にアクティブになり、60fps 以上、バンドルの影響が 50KB 未満、完全なアクセシビリティ (モーションの削減を優先)、およびゼロ CLS をターゲットとするコードを出力します。 入口アニメーション、スクロール効果、ジェスチャーインタラクション、マイクロインタラクション、レイアウトアニメーションをカバーします。

なぜ使うのか

主な機能

ライブデモ

実際の動作

motion-dev-animations-skill.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "motion-dev-animations-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "motion-dev-animations-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
          "~/.claude/skills/motion-dev-animations"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: Motion.dev Animations Skill

スタッガー付きのヒーローフェードアップ入口を追加

👤 フロントエンド開発者によるランディング ページの調整 ⏱ ~15 min beginner

使うタイミング: ヒーローが静止しているように感じられるため、洗練されたロード アニメーションが必要です。

前提条件
  • React + Motion.dev — npm i モーション
  • スキルがインストールされています — ~/.claude/skills/ に git clone します
フロー
  1. 効果を説明する
    ヒーローの H1、小見出し、および CTA に千鳥状のフェードアップ入り口を追加します。 60msのスタッガー。✓ コピーしました
    → motion.div を使用した Motion.dev コード、トランジション スプリング、スタッガーによる遅延
  2. モーションを減らしたフォールバック
    prefers-reduced-motion がアニメーションをきれいにスキップしていることを確認してください。✓ コピーしました
    → useReducedMotion フックまたは CSS メディア クエリが適用されました

結果: アクセシビリティを犠牲にすることなく、生きていると感じられるヒーロー。

注意点
  • レイアウトをトリガーするアニメーションプロパティ (幅、上) — 代わりに変換 (変換/スケール) を使用します — GPU アクセラレーション、CLS なし
組み合わせ: magic-ui-mcp

スクロールトリガーによるリビールと視差を構築する

👤 デザイン先進的なフロントエンド開発者 ⏱ ~25 min intermediate

使うタイミング: 長い形式のランディング ページには、スクロールすると展開されるセクションが必要です。

フロー
  1. スクロールで表示
    各セクションがビューポートに入るときにアニメーション化します (1 回、30% のしきい値)。✓ コピーしました
    → useInView を 1 回 + 金額で使用
  2. 視差前景
    装飾的な前景 SVG に微妙な視差オフセットを追加します。✓ コピーしました
    → useScroll + useTransform による、scrollYProgress から y へのマッピング

結果: 気を散らすことなく深みを加えるスクロールエクスペリエンス。

注意点
  • 乗り物酔いの原因となる視差 — オフセットを小さく保ち、prefers-reduced-motion の下では完全にスキップします

ホバーリフトを備えたドラッグ可能な磁気カードを作成する

👤 インタラクションデザイナー / フロントエンド開発者 ⏱ ~20 min intermediate

使うタイミング: 製品カードにはマイクロインタラクションの磨きが必要です。

フロー
  1. ホバーリフト
    ホバー時: 4 ピクセルを持ち上げ、微妙なシャドウ スケール。 休暇から春に戻る。✓ コピーしました
    → その間スプリングでホバリングします。 GPU に適した変換
  2. 磁気抵抗
    弾性境界を使用してドラッグ可能にします。dragElastic 0.15 を使用します。✓ コピーしました
    → ドラッグ + ドラッグConstraints + ドラッグElastic を適切に設定

結果: パフォーマンスコストのない楽しいカードインタラクション。

レイアウトを使用してリストの並べ替えをアニメーション化する

👤 タスクボード/ギャラリーを構築するフロントエンド開発者 ⏱ ~25 min intermediate

使うタイミング: リストの並べ替えは不快に感じます。 スムーズな移行が必要です。

フロー
  1. アイテムのレイアウトを有効にする
    レイアウト アニメーションをリスト項目に追加します。 アニメーションの出入りも可能です。✓ コピーしました
    → <motion.li レイアウト> + AnimatePresence
  2. 動作の軽減
    prefers-reduced-motion でレイアウト アニメーションを無効にします。✓ コピーしました
    → 条件が適用されます。 リクエストしたユーザーのインスタント再注文

結果: 物理的な再注文ですが、ユーザーの好みを尊重します。

組み合わせ

他のMCPと組み合わせて10倍の力を

motion-dev-animations-skill + magic-ui-mcp

事前に構築されたコンポーネントには Magic UI、カスタム ビットには motion.dev

ロゴには Magic UI のマーキーを使用します。 以下のカスタムスクロール視差のmotion.dev。✓ コピーしました
motion-dev-animations-skill + claude-design-auditor-skill

モーションを監査してモーションを軽減するサポート

アニメーションを追加した後、scope=motion を指定して監査し、モーションの減少による回帰を検出します。✓ コピーしました
motion-dev-animations-skill + claude-code-design-skills

Figma からコードへ + アニメーションを 1 つのフローで実行

Figma フレームを変換します。 次に、指定されたホバーアニメーションと入口アニメーションを追加します。✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
motion-dev (SKILL) describe the animation (element + intent + constraints) アニメーションコードが必要なときはいつでも。 アクセシビリティとパフォーマンスの制約付き 0

コストと制限

運用コスト

APIクォータ
なし
呼び出しあたりのトークン
コードとしては小さい。 複雑なコンポーネントをダンプする場合にのみ大きくなります
金額
無料
ヒント
アニメーションの意図をしっかりと説明してください。「60 ミリ秒のスタッガー、200 ミリ秒の継続時間によるフェードアップ」が「美しくする」よりも優れています。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: なし
データ送信先: スキルによるものはありません。 ネットワークは関係ありません

トラブルシューティング

よくあるエラーと対処法

スクロール上のジャンク

レイアウトの小道具 (幅/上部) ではなく、変換をアニメーション化していることを確認してください。 will-change は慎重に使用してください。

確認: Chrome DevTools → Performance → layout shift count
モーションを減らすとアニメーションが無視される

useReducedMotion でラップし、アニメーション バリアントを短縮します。

確認: System → Motion preferences → reduce motion; reload
モーション追加後の大きなバンドル

「motion/react」から必要なものだけをインポートします。 すべてを再エクスポートすることは避けてください。

確認: Bundle analyzer on the chunks

代替案

Motion.dev Animations Skill 他との比較

代替案代わりに使う場面トレードオフ
magic-ui-mcpカスタム モーションではなく、事前に構築されたアニメーション コンポーネントが必要な場合カスタムが減り、導入が早くなる
cc-frontend-skill特に Motion.dev ではなく、一般的なフロントエンドのガイダンスが必要な場合アニメーション中心ではない
excalidraw-skillWeb アニメーションではなく図が必要です別の問題

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る