mcpField
M
motion-v13

motion-v13

github.com/blockmatic设计与 UI1242 次安装4 周前更新
代码仓库

关于 motion-v13

motion-v13 是面向 React 项目的前端技能，介绍 motion ^13 的用法。内容涵盖拖动、滚动联动、布局、手势和共享元素过渡，并建议适用时优先使用 CSS。

主要功能

  1. 01motion ^13 安装与导入
  2. 02拖动和手势动画指导
  3. 03滚动联动与布局效果
  4. 04共享元素过渡指导
  5. 05Next.js 与性能参考

适用场景

  1. 01为 React 界面添加拖动交互
  2. 02制作滚动联动动画
  3. 03构建布局或共享元素过渡

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/blockmatic/basilic-skills --skill motion-v13

安装后在 Claude Code 中输入/motion-v13确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
common-patterns.md
nextjs-integration.md
performance-optimization.md
rules/
motion.md

详细介绍

Motion

Package：motion ^13（原名为 framer-motion）。从 motion/react 导入，而不是 framer-motion。

文件夹主版本跟随 npm motion 包，而不是 skill 文件的修订版本。本仓库的 package.json 中可能未列出 motion（优先使用 CSS/tw-animate-css）；保留 motion-v13，以确保 pnpm add motion 保持一致。对于有 npm 主版本号的库，不要自行添加 -v1。

适用场景

用于拖拽、滚动关联、布局、手势和共享元素过渡。优先使用 CSS/tw-animate-css（参见 @.cursor/rules/frontend/design.mdc）。

安装

pnpm add motion — 从 "motion/react" 导入 { motion, AnimatePresence }。

Motion 13 移除了 @emotion/is-prop-valid 这一可选依赖。如果带样式的 motion 组件将 CSS-in-JS 属性泄漏到 DOM 中，请通过 MotionConfig 注入 isValidProp，或组合使用 motion.create(StyledDiv)。参见 https://motion.dev/docs/react-upgrade-guide

深入了解

评论

支持 Markdown