motion

SKILL.md

Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

Production Tested: React 19, Next.js 16, Vite 7, Tailwind v4

Performance: Uses native ScrollTimeline API when available for hardware acceleration.

Motion (旧 Framer Motion) を使用して、宣言型アニメーション、ジェスチャー (ドラッグ、ホバー、タップ)、スクロール効果、スプリング物理学、レイアウト アニメーション、SVG 操作など、洗練された React アニメーションを構築します。 LazyMotion (4.6 KB) または Animate mini (2.3 KB) を使用してバンドル サイズを最適化します。 次の場合に使用します: ドラッグ アンド ドロップ インタラクションの追加、スクロール トリガー アニメーションの作成、トランジションのあるモーダル ダイアログの実装、勢いのあるカルーセルの構築、ページ/ルート トランジションのアニメーション化、パララックス ヒーロー セクションの作成、スムーズな展開/折りたたみによるアコーディオンの実装、またはアニメーション バンドル サイズの最適化。単純なリスト アニメーションの場合は、代わりに自動アニメーション スキルを使用してください (3.28 KB と 34 KB)。 トラブルシューティング: AnimatePresence の終了が機能しない、大きなリストのパフォーマンスの問題、Tailwind 遷移の競合、Next.js の「クライアントの使用」エラー、スクロール可能なコンテナーのレイアウトの問題、または Cloudflare Workers のビルド エラー (2024 年 12 月に解決)。 ソース: joaquimcassano/ideas-marketplace。

原文を見る