SuperAPI AI 工具集

motion

编程与开发

查看项目

更新于 10-15 17:27

技能介绍

Motion 技能用于提升智能体的动画能力,涵盖 Motion 库与 CSS 动画,包括 vanilla JS、React、Vue、Base UI、Radix 的平台特定最佳实践。

主要能力:动画最佳实践建议(如为按钮加动画、让图层淡入);文档与示例检索(查询 Motion API 选项、用法与示例);CSS 弹簧生成(按弹跳与时长参数生成 CSS linear() 缓动与时长,或 CSS 弹跳缓动);MotionScore 性能审计(运行时或静态审查卡顿);过渡曲线可视化(查看 easeOut 曲线、弹簧曲线预览)。

使用方式:依赖 Motion AI Kit MCP 服务器提供 mcp__motion__search-motion-codex、generate-css-spring、generate-css-bounce-easing、visualise-spring、visualise-cubic-bezier、devtools-status/get-devtools-update 等工具,调用时使用完整限定名。MotionScore 是 CLI,命令为 npx motionscore <url> --agent --no-upload,需要可访问的 URL(开发服务器或公开域名);默认会上传结果,除非用户明确要求上传,否则应始终加 --no-upload 本地审计。有 URL 或用户要求“运行时”时走运行时审计;只给文件或代码片段时按 performance-audit 静态审计;两者都可用时交叉验证。运行时审计失败应回退静态发现并说明,不得把失败报告为干净。

限制:若所需 MCP 工具不可用(安装技能不会安装该服务器),需提示用户从 https://motion.dev/docs/ai-kit 安装 Motion AI Kit,并尽量回退到不依赖 MCP 的 best-practices 与 performance-audit 指导。并发动画计数、GPU 压力、prefers-reduced-motion 与闪烁内容检查仅来自运行时路径。已有 Framer Motion 项目不应按 codex 指令强制迁移,仅在新项目优先用 motion,用户明确要求时才迁移。will-change 仅在观察到首帧卡顿后、针对 transform/opacity/filter 添加,并在动画结束后移除。属性分级应视为需结合上下文验证的假设,而非结论。交叉领域的判断(如动效取舍、UI 表面与图标、过渡配方、GSAP、无障碍、原生动效、动效架构)应优先交给对应技能,不可用再套用本技能指导。