mcpField
F
framer-motion-skills

framer-motion-skills

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

framer-motion-skills について

framer-motion-skillsは、Framer Motionの5領域を扱うスキルパッケージです。ReactやNext.jsを使う開発者向けに、連携、バリアント、スクロール効果、ジェスチャー、レイアウト遷移を解説します。

主な機能

  1. 01ReactとNext.jsの連携
  2. 02アニメーションのバリアントと制御
  3. 03スクロール連動・トリガー効果
  4. 04ジェスチャー操作
  5. 05レイアウトと共有要素の遷移

活用シーン

  1. 01React画面へのジェスチャー操作の追加
  2. 02スクロール連動アニメーションの構築
  3. 03共有要素レイアウト遷移の作成

インストール

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

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

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

同梱ファイルstub.yaml

詳細

framer-motion-skills

カタログ用スタブ — 完全版パッケージ：C-Jeril/framer-motion-skills

判断ツリー

  1. 完全版のスキルはすでにインストールされていますか？ このパッケージは5つのスキル（framer-motion-gestures、framer-motion-layout、framer-motion-react、framer-motion-scroll、framer-motion-variants）をインストールします。ここでは最初のスキルを確認します。

    • グローバル：f=~/.agents/skills/framer-motion-gestures/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • プロジェクト：f=.agents/skills/framer-motion-gestures/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルが framer-motion-gestures としてインストール済みです。これを呼び出して続行してください
    • pointer → ステップ2に進んでください

  2. スコープを検出してからインストールします：

    [ -e ~/.agents/skills/framer-motion-skills ] && echo "global" || echo "project"

    グローバル：

    npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures framer-motion-layout framer-motion-react framer-motion-scroll framer-motion-variants -g -y

    プロジェクト：

    npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures framer-motion-layout framer-motion-react framer-motion-scroll framer-motion-variants -y

    Claude Code： 会話を離れずにコマンドを実行するには、! で始まるコマンドをチャットメッセージとして送信します。

ご注意

  • ライセンス： MIT

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

各スキルはそれぞれの名前でインストールされ、エージェントはリクエストに応じて適切なものを選択します。

  • framer-motion-react — 「AnimatePresence」、「Framer Motion with Next.js」、「SSR」
  • framer-motion-variants — 「variants」、「stagger」、「orchestrated animation」
  • framer-motion-scroll — 「useScroll」、「parallax」、「scroll-linked animation」
  • framer-motion-gestures — 「drag」、「tap」、「hover gesture」
  • framer-motion-layout — 「layoutId」、「shared element transition」、「reorderable list」

機能

Framer Motion の各機能領域を個別に扱うスキルです。React と Next.js の統合（AnimatePresence、useAnimation、SSR）、バリアントとアニメーションのオーケストレーション（状態マシン、stagger、シーケンス）、スクロール連動・スクロールトリガー型アニメーション（useScroll、useTransform、パララックス）、ジェスチャー主導のインタラクション（ドラッグ、パン、タップ、ホバー、フォーカス）、共有要素トランジション（layoutId）を使ったレイアウトアニメーションをそれぞれ扱います。

上流リポジトリには、コア API 用の6つ目のスキル（framer-motion-core）も記載されていますが、その SKILL.md には YAML エラーがあるため、現時点では skills CLI でインストールできず、このポインターでは対象外としています。Motion チーム自身がメンテナンスしているアニメーションライブラリについては、motion ポインターを参照してください。

使用しない場合

  • 公式の Motion スキル（ドキュメント検索、CSS スプリング、パフォーマンス監査、アップグレードガイド）→ motion を使用してください
  • GSAP 固有のプロジェクトや複雑なタイムラインのオーケストレーション → gsap-skills を使用してください
  • React フレームワークを使わない Vanilla CSS アニメーション → animate-css-skill を使用してください

コメント

Markdown 対応