motion

Name: motion
Author: motiondivision

github.com/motiondivision设计与 UI66834 次安装3 天前更新

代码仓库

关于 motion

motion 是面向使用 vanilla JS、React、Vue、Base UI 或 Radix 的开发者的网页动画技能，提供实现指导、文档搜索、缓动生成、预览及分级性能审计。

主要功能

01平台专属动画指导
02Motion 与 CSS 方案建议
03文档和示例搜索
04生成 CSS 弹簧与弹跳效果
05预览过渡曲线
06MotionScore 性能审计

适用场景

01为 UI 组件选择动画实现方式
02查找 Motion API 和用法示例
03生成弹簧或弹跳缓动
04审计页面或组件的卡顿问题

MCP 相关

该技能可通过 Motion MCP 服务执行搜索、缓动生成、过渡编辑和审计流程。部分功能需要单独完成认证的 Motion+ MCP 服务。

安装

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

$npx skills add https://github.com/motiondivision/ai-kit --skill motion

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

包含的文件

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

best-practices/

base-ui.md

css-or-motion.md

index.md

motion.md

react.md

vue.md

codex/

index.md

css-spring/

index.md

insert/

index.md

performance-audit/

index.md

transition-preview/

index.md

详细介绍

Motion

以恰当的方式为 Web 制作动画。

动画最佳实践：“为这个按钮添加动画”“淡入这个图层”“为这个 Vue 组件添加动画”。提供针对原生 JS、React、Vue、Base UI 和 Radix 的平台专属指南，涵盖 Motion 和纯 CSS，以及如何选择。
插入面板：“/motion make accordion”“/motion insert”“/motion add”“构建轮播图”“添加定价版块 / 主视觉区”。打开 Motion 库供用户选择。连接后优先使用 Motion+ 服务的面板。
文档、示例和 Motion UI 搜索：“X 有哪些选项”“X 如何运作”“使用 X 执行 Y”“展示一个 X 示例”。
CSS 弹簧和弹跳生成：“生成一个弹跳值为 0.5、持续时间为 0.3s 的 CSS 弹簧”“让弹跳效果更明显”“给我一个弹跳缓动”。
Performance Doctor（MotionScore 审计）：“修复首页的动画性能问题”“为什么这个动画这么慢”“对 src/ 运行 Performance Doctor”“审计 src/Modal.tsx 是否卡顿”“对首页进行运行时审计”“这段代码是否卡顿：[代码片段]”“评估 [URL] 的性能”。你也可以主动运行审计并报告发现的问题。审计是 Motion+ 的功能；技能文件说明了如何获取审计方法，以及遭拒时该怎么做。
过渡预览：“展示 easeOut 的曲线”“让我调整这个弹簧”“可视化一个弹跳值为 0.5 的弹簧”。

升级 Motion

“/motion upgrade”“从 framer-motion 迁移”“升级到 Motion 12”及类似请求都通过文档搜索处理——没有单独的工具。

先查看已安装的版本。 搜索前检查 package.json 中是否有 motion、 framer-motion 或 motion-v。指南按版本逐步编写，因此起始版本决定了适用的章节。
在项目所用的平台对应的文档库中搜索 upgrade。对于 React，这会找到 react/react-upgrade-guide，其中包含 ## Framer Motion 章节及其自己的版本历史；对于原生 JS，则是 js/upgrade-guide。如果是从 GSAP 迁移，请搜索 migrate from gsap。
阅读完整页面并按顺序操作。不要总结。 每个章节都以前面的章节已应用为前提，因此总结会悄悄打乱迁移顺序并导致迁移失败。
将 framer-motion 导入替换为 motion/react，并卸载 framer-motion。绝不能同时安装这两个包。

层级

最佳实践、搜索、插入面板和缓动生成无需账户即可使用。其余功能按层级提供，你使用时会看到相应提示：

Motion 账户（免费）：保存过渡效果。运行 Motion+ MCP 服务，并在编辑器的 MCP 设置中登录。
Motion+：MotionScore 审核——静态审核在评分前读取的方法论（motion://skills/performance-audit）、运行时报告保存到其中的历史记录，以及 Performance Doctor 报告卡（每项发现旁都有一个 Fix 按钮）——此外还有示例和 Motion UI 源代码（search-motion-source，以及完全开放的插入面板 insert-motion-plus-component）、文档中的 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。

支持 Markdown

登录后评论