mcpField

motion

fellipeutakaデザイン・UI47 回インストール

motion について

Motion（Framer Motion）を使って React のアニメーションを構築します。ジェスチャー（ドラッグ、ホバー、タップ）、スクロール効果、バネ物理、レイアウトアニメーション、SVG に対応。バンドルサイズ: 2.3 KB（mini）から 34 KB（full）。使用場面: ドラッグ＆ドロップ、スクロールアニメーション、モーダル、カーセル、パララックス。トラブルシューティング: AnimatePresence の終了処理、リストのパフォーマンス、Tailwind との競合、Next.js の「use client」。

インストール

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

$npx skills add https://fellipeutaka/leon --skill motion

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
.claude-plugin/
plugin.json
agents/
openai.yaml
references/
common-patterns.md
motion-vs-auto-animate.md
nextjs-integration.md
performance-optimization.md
rules/
motion.md
scripts/
init-motion.sh
optimize-bundle.sh
templates/
layout-transitions.tsx
motion-nextjs-client.tsx
motion-vite-basic.tsx
scroll-parallax.tsx
ui-components.tsx

コメント

Markdown 対応