作者 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill
描述您想要的运动；获取以60fps +速度运行的Motion.dev代码，具有弹簧物理、减小运动支持和无布局偏移。
motion-dev-animations-skill是使用Motion.dev （前身为Framer Motion ）编写生产级动画的Claude Code技能。它会在提及动画、滚动效果、Motion.dev、弹簧物理等时自动激活，并发出针对60fps +、< 50KB捆绑影响、完全可访问性（ prefers-reduced-motion ）和零CLS的代码。覆盖入口动画、滚动效果、手势交互、微交互和布局动画。
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"motion-dev-animations-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
],
"_inferred": false
}
}
}打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。
{
"mcpServers": {
"motion-dev-animations-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
],
"_inferred": false
}
}
}Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。
{
"mcpServers": {
"motion-dev-animations-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
],
"_inferred": false
}
}
}点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。
{
"mcpServers": {
"motion-dev-animations-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
],
"_inferred": false
}
}
}格式与 Claude Desktop 相同。重启 Windsurf 生效。
{
"mcpServers": [
{
"name": "motion-dev-animations-skill",
"command": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
]
}
]
}Continue 使用服务器对象数组，而非映射。
{
"context_servers": {
"motion-dev-animations-skill": {
"command": {
"path": "git",
"args": [
"clone",
"https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
"~/.claude/skills/motion-dev-animations"
]
}
}
}
}加入 context_servers。Zed 保存后热重载。
claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。
何时使用： 你的英雄感觉是静态的，你想要一个抛光的加载动画。
结果： 在不牺牲无障碍环境的情况下感受活力的英雄。
何时使用： 您的长版登录页面需要在滚动时展开的部分。
结果： 滚动体验，增加深度而不会分心。
何时使用： 产品卡需要微交互抛光。
结果： 愉快的卡牌互动，没有性能成本。
何时使用： 您的列表重新排序让人感到不安；您希望平稳过渡。
结果： 感觉有形但尊重用户偏好的重新订单。
用于预构建组件的Magic UI ，用于自定义位的motion.dev
审核动作以减少动作支持
Figma到代码+动画在一个流程中
| 工具 | 输入参数 | 何时调用 | 成本 |
|---|---|---|---|
| motion-dev (SKILL) | describe the animation (element + intent + constraints) | 任何时候您都需要动画代码，特别是具有可访问性和性能约束的动画代码 | 0 |
滚动时检查您正在动画变换，而不是布局道具（宽度/顶部）。谨慎使用意志改变。
Chrome DevTools → Performance → layout shift count缩小运动时忽略动画使用useReducedMotion包装并短路动画变体。
System → Motion preferences → reduce motion; reload添加动作后的大捆绑包仅从“运动/反应”中导入您需要的内容；避免重新导出所有内容。
Bundle analyzer on the chunks| 替代方案 | 何时用它替代 | 权衡 |
|---|---|---|
| magic-ui-mcp | 您需要预先构建的动画组件，而不是自定义运动 | 更少定制，更快采用 |
| cc-frontend-skill | 您需要一般前端指导，而不是具体的Motion.dev | 不以动画为中心 |
| excalidraw-skill | 您想要的是图表，而不是网络动画 | 不同的问题 |