motion
Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation.使用 LazyMotion (4.6 KB) 或 useAnimate mini (2.3 KB) 优化包大小。 Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes.对于简单的列表动画，请使用自动动画技能（3.28 KB 与 34 KB）。 Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024).
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.
Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation.使用 LazyMotion (4.6 KB) 或 useAnimate mini (2.3 KB) 优化包大小。 Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes.对于简单的列表动画，请使用自动动画技能（3.28 KB 与 34 KB）。 Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024). 来源：joaquimcassano/ideas-marketplace。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/joaquimcassano/ideas-marketplace --skill motion- 分类
- </>开发工具
- 认证
- —
- 收录时间
- 2026-02-17
- 更新时间
- 2026-02-18
快速解答
什么是 motion？
Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation.使用 LazyMotion (4.6 KB) 或 useAnimate mini (2.3 KB) 优化包大小。 Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes.对于简单的列表动画，请使用自动动画技能（3.28 KB 与 34 KB）。 Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024). 来源：joaquimcassano/ideas-marketplace。
如何安装 motion？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/joaquimcassano/ideas-marketplace --skill motion 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/joaquimcassano/ideas-marketplace
详情
- 分类
- </>开发工具
- 来源
- user
- 收录时间
- 2026-02-17