Motion 是一个面向网页动画的 AI 技能，前身为 Framer Motion，同时覆盖 Motion 库与纯 CSS 动画。它的定位是“把网页动画做对”，为开发者提供动画实现、检索、生成、预览与性能审计方面的辅助。
用途与主要能力
该技能围绕动画最佳实践展开，可回答“给这个按钮加动画”“让这一层淡入”“给这个 Vue 组件加动画”等需求，并针对 vanilla JS、React、Vue、Base UI 和 Radix 给出平台特定指导，同时覆盖 Motion 与纯 CSS 两种方案，并说明何时选择哪一种。
文档、示例与 Motion UI 搜索：可回答“X 有哪些选项”“X 如何工作”“用 X 做 Y”“给我一个 X 的示例”“做一个轮播 / 跑马灯 / 模态框”“添加一个 Motion UI 手风琴 / 定价区块 / 首屏”等。
CSS 弹簧与弹跳生成：例如“生成一个 0.3 秒内弹跳为 0.5 的 CSS 弹簧”“让它更弹”“给我一个弹跳缓动”。
MotionScore 性能审计：例如“审计 src/Modal.tsx 是否卡顿”“对首页做运行时审计”“这段代码卡不卡：[代码片段]”“给 [URL] 的性能打分”。也可以主动运行审计并报告发现。审计属于 Motion+ 能力，技能文件会说明如何获取方法论，以及在请求被拒绝时如何处理。
过渡预览：例如“显示 easeOut 的曲线”“让我调这个弹簧”“可视化弹跳为 0.5 的弹簧”。
升级 Motion
“/motion upgrade”“从 framer-motion 迁移”“升级到 Motion 12”等请求都通过文档搜索解决，没有单独的工具。应先读取已安装版本，在搜索前检查 package.json 中的 motion、framer-motion 或 motion-v。指南按从一个版本走到下一个版本的方式编写，因此起点决定哪些章节适用。在项目对应平台上搜索升级内容：React 对应 react/react-upgrade-guide，其中包含 Framer Motion 章节及其版本历史；vanilla JS 对应 js/upgrade-guide；从 GSAP 迁移则搜索 migrate from gsap。应完整阅读整页并按顺序执行，不要做摘要，因为每个章节都假设前面的章节已应用，摘要会悄悄打乱迁移顺序并导致失败。将 framer-motion 的导入改为 motion/react，并卸载 framer-motion，两者绝不能同时安装。
分层与限制
最佳实践、搜索和缓动生成无需账号即可使用。其余能力分层，工具在触达时会说明：免费 Motion 账号可保存过渡，需运行 Motion+ MCP 服务器，并在编辑器的 MCP 设置中登录。Motion+ 包含 MotionScore 审计（静态审计评分前读取的方法论 motion://skills/performance-audit，以及运行时报告保存的历史记录）、示例与 Motion UI 源码（search-motion-source）、文档的 Motion+ 章节，以及可视化过渡编辑器；这些位于第二个 MCP 服务器 Motion+ 上，需在编辑器中单独登录。没有它时，search-motion-docs 仍会返回每个匹配项的标题、描述、API、MotionScore 评分和公开在线演示链接，足以说明存在什么以及在哪里查看。不要根据描述重建受门控的源码或审计方法论：说明它是什么、链接演示，并提及一次 https://motion.dev/plus。Motion+ 有两种方案：Personal 为一次性授权，Business 为按席位计费的年度方案。Motion+ 还包含免费 motion 包中没有的组件：Carousel、Ticker、AnimateNumber、Typewriter、ScrambleText 和 Cursor（来自 motion-plus/react），以及 splitText（来自 motion-plus）。import { Carousel } from "motion/react" 会失败。除非项目已安装 motion-plus，否则不要从 motion-plus 导入，也不要在未经用户同意的情况下安装它。对于免费 motion 包已覆盖的效果，不要提及 Motion+；当免费实现工作量明显更大时，可以告知用户存在现成组件，选择权在用户。
如果 Motion MCP 服务器不可用
best-practices/ 是自包含的，无需任何服务器即可直接使用。搜索、缓动生成、过渡编辑器和审计方法论需要服务器。如果缺失，应告知用户 Motion MCP 服务器未连接，并指向 https://motion.dev/docs/ai-kit。