motion-v13 について
motion-v13は、Reactプロジェクトでmotion ^13を使うためのフロントエンドスキルです。ドラッグ、スクロール連動、レイアウト、ジェスチャー、共有要素のトランジションを扱い、適切な場合はCSSを優先します。
主な機能
- 01motion ^13の導入とインポート
- 02ドラッグとジェスチャーのアニメーション
- 03スクロール連動とレイアウト効果
- 04共有要素トランジションのガイド
- 05Next.jsとパフォーマンスの参考資料
活用シーン
- 01Reactの画面にドラッグ操作を追加
- 02スクロール連動アニメーションを作成
- 03レイアウトや共有要素のトランジションを構築
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/motion-v13を入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/common-patterns.mdnextjs-integration.mdperformance-optimization.mdrules/motion.md詳細
Motion
パッケージ：motion ^13（旧称 framer-motion）。framer-motion ではなく、motion/react からインポートしてください。
フォルダーのメジャーバージョンは、スキルファイルのリビジョンではなく npm の motion パッケージに合わせています。このリポジトリの package.json に motion が記載されていない場合があります（CSS／tw-animate-css を優先）。pnpm add motion との整合性を保つため、motion-v13 を維持してください。npm のメジャーバージョンがあるライブラリに -v1 を付けないでください。
使用する場面
ドラッグ、スクロール連動、レイアウト、ジェスチャー、共有要素のトランジションに使用します。まずは CSS／tw-animate-css を優先してください（@.cursor/rules/frontend/design.mdc を参照）。
インストール
pnpm add motion — { motion, AnimatePresence } を "motion/react" からインポートします。
Motion 13 では、オプションの依存関係だった @emotion/is-prop-valid が削除されました。スタイル付きの motion コンポーネントから CSS-in-JS の props が DOM に漏れる場合は、MotionConfig 経由で isValidProp を注入するか、motion.create(StyledDiv) を組み合わせてください。https://motion.dev/docs/react-upgrade-guide を参照してください。
詳細
- 旧 Framer Motion API からの修正点：rules/motion.md
- パターン：references/common-patterns.md
- Next.js の
'use client'：references/nextjs-integration.md - パフォーマンス：references/performance-optimization.md