motion
✓モーション (フレーマー モーション) - ジェスチャー (ドラッグ、ホバー、タップ)、スクロール効果、スプリング物理学、レイアウト アニメーション、SVG を使用して React アニメーションを構築します。バンドル: 2.3 KB (ミニ) ~ 34 KB (フル)。 ドラッグ アンド ドロップ、スクロール アニメーション、モーダル、カルーセル、パララックスなどの場合に使用します。トラブルシューティング: AnimatePresence の終了、リストのパフォーマンス、Tailwind の競合、Next.js の「クライアントの使用」。
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.2, Next.js 16.1, Vite 7.3, Tailwind v4
Performance: Uses native ScrollTimeline API when available for hardware acceleration.
モーション (フレーマー モーション) - ジェスチャー (ドラッグ、ホバー、タップ)、スクロール効果、スプリング物理学、レイアウト アニメーション、SVG を使用して React アニメーションを構築します。バンドル: 2.3 KB (ミニ) ~ 34 KB (フル)。 ドラッグ アンド ドロップ、スクロール アニメーション、モーダル、カルーセル、パララックスなどの場合に使用します。トラブルシューティング: AnimatePresence の終了、リストのパフォーマンス、Tailwind の競合、Next.js の「クライアントの使用」。 ソース: jezweb/claude-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/jezweb/claude-skills --skill motion- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
motion とは?
モーション (フレーマー モーション) - ジェスチャー (ドラッグ、ホバー、タップ)、スクロール効果、スプリング物理学、レイアウト アニメーション、SVG を使用して React アニメーションを構築します。バンドル: 2.3 KB (ミニ) ~ 34 KB (フル)。 ドラッグ アンド ドロップ、スクロール アニメーション、モーダル、カルーセル、パララックスなどの場合に使用します。トラブルシューティング: AnimatePresence の終了、リストのパフォーマンス、Tailwind の競合、Next.js の「クライアントの使用」。 ソース: jezweb/claude-skills。
motion のインストール方法は?
ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/jezweb/claude-skills --skill motion インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか?
https://github.com/jezweb/claude-skills
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01