用途:motion 是 Motion(原 Framer Motion,从 motion/react 导入)官方 AI Kit 中的动画技能,用于在编码过程中为智能体提供动画实现指导。该技能由 Motion 作者手写,覆盖 Motion 库与普通 CSS 动画两类方案,并帮助判断何时选择哪一种。
主要能力:提供适用于 vanilla JS、React、Vue、Base UI 和 Radix 的动画最佳实践;支持检索当前 Motion 文档、示例与 Motion UI,使智能体基于最新资料工作;使用 linear() 缓动生成 CSS 弹簧与弹跳效果;执行 MotionScore 代码与运行时性能审计,为动画评分并建议更廉价的替代方案;提供从 framer-motion 迁移到 motion 及 Motion 版本间升级的指导;支持过渡预览以调校曲线与弹簧参数。
使用方式:安装后技能名为 motion,可通过 /motion 加问题或子命令调用,例如 /motion audit src/Modal.tsx、/motion spring bounce 0.3、/motion upgrade。安装前可先检测作用域:若存在全局目录 ~/.agents/skills/motion 则按全局安装,否则按项目安装。全局安装命令为 npx skills add motiondivision/ai-kit --skill motion -g -y,项目安装命令为 npx skills add motiondivision/ai-kit --skill motion -y。在 Claude Code 中,以 ! 开头的聊天消息可直接执行命令而无需离开对话。
依赖与限制:文档检索和 CSS 弹簧生成需要 Motion 免费托管的 MCP 服务器(无需 API Key),仅安装技能不会自动配置它,上游自带安装器 npx motion-ai 可完成配置;MotionScore 性能审计和 Motion UI 源码需要付费 Motion+ 会员及其 MCP 服务器;上游仓库没有 LICENSE 文件。该技能不适用于按主题拆分的第三方 Framer Motion 技能(手势、滚动、布局、变体等,应使用 framer-motion-skills)、GSAP 专用项目或复杂时间线编排(应使用 gsap-skills)、不依赖任何库的纯 CSS 动画(应使用 animate-css-skill),以及需要比较不同动画方案的选型场景(应使用 motion-catalogue)。