开始

Skills

把 Animate UI 的使用方式交给 AI 助手：什么时候跑 CLI、什么时候换 import、怎样用同一套动效语言处理自定义组件。

Skill 让 Claude Code、Cursor、Codex 之类的助手获得项目上下文里的 Animate UI 知识。安装后，它知道何时运行 CLI、何时替换 import，以及如何用与所有原语相同的动效处理自定义组件。

安装

终端

bunx skills add imskyleen/animate-ui

这会把 Animate UI skill 安装进当前项目。当你要求“给某个组件加动效”时，助手会自动加载它。加-g 可以安装到所有项目。

它能做什么

可以直接对助手说：

“给我的 shadcn dialog 和 dropdown menu 加动效。”
“让保存按钮显示加载中，然后快速显示已保存。”
“我添加或删除待办时，让列表动起来。”
“点击菜谱卡片时展开成详情页，关闭时收回。”
“把这个 Phosphor 铃铛做成悬停会响的动画图标。”
“让菜单感觉更利落一点。”
“把这段视频里的动效复刻到我的卡片上，保留我的样式。”
“审查我项目里的动画：哪里慢、哪里卡？”
“把这个弹簧写成 CSS 给我。”
“把所有动画调慢一点。”
“把这个项目从 Animate UI v1 迁到 v2。”

它会读取 components.json、package.json 与组件的 import，判断组件建立在什么之上：shadcn/ui、Radix UI、Base UI、React Aria，还是普通标记。

包含什么

正确的路径

每个组件都走最短的那条路：

shadcn/ui 组件：运行 @animate-ui/cli animate，替换 primitive 并删除 Motion 取代的 CSS 动画。
建立在 Radix UI、Base UI 或 React Aria 上：把 import 换成 @animate-ui/react，保留全部部件、props 与 data 属性。
其他组件：按 Animate UI 的配方与 token 用 Motion 实现；已有现成组件时直接使用。
v1 项目：运行 @animate-ui/cli migrate，再按列出的手动步骤处理。

动效 token

每个原语移动时使用的值：按角色划分的弹簧、补间与曲线，缩放、模糊、位移、旋转与交错，以及AnimateUIProvider 的 tempo——一处改动，全局节奏随之变化。

配方

每一类组件怎么动：浮层、菜单、模态、面板与抽屉、披露、移动指示器、按压与切换，以及由 CSS 变量驱动的底座组件。每个配方都展示如何把 Motion 接到 Radix UI、Base UI、React Aria 或普通标记上。

交互模式

按名字就能要到的现成模式：按钮从加载到成功、列表增删、拖动排序、卡片展开、骨架屏让位、计数徽标、错误时输入框抖动、滑动删除、网格筛选排序、表单步骤、横幅把页面推下去。它们应用在你的标记与样式上，而不是覆盖在上面。

动画图标

把 Lucide、Hugeicons、Tabler、Phosphor、Heroicons 或你自己的 SVG 变成动画图标，兼容 AnimateIcon与所有触发器（悬停、点按、进入视口、循环、速度）。每个部件都像真实物体那样运动，先顺，再像，始终待在图标网格内；描边、实心、双色、多色与像素风格都适用。

手感与力度

“利落”“从容”“弹一点”会稳定映射到同一组数值，“更快”“更弹”是可以重复的档位。没有说明力度时，它会问：subtle（默认）、more，还是expressive。任何弹簧或曲线也可以直接输出成 CSS。

复刻与审查

给它链接、视频或 GIF，它会测量动效（什么在动、动了多远、多久、哪条曲线或弹簧），只把动效复制到你的组件上，外观仍然是你的。

它基于事实审查现有动效：npx @animate-ui/cli audit 列出项目里所有会动的属性、每个属性对浏览器的开销，以及值得注意的模式（transition: all、ease-in 入场、过长时长、悬停缩放、缺少减少动效路径…）。Skill 再结合元素的使用频率与用途判断，排序优先级，并指出哪些事实其实没问题。

工作方式

判断与力度：组件多久被使用一次决定它的形态——一天开五十次的菜单保持快，罕见的成功可以更有表现力。
识别路径：找到组件的底座，在确认 Animate UI 是否已有现成组件后，选择 CLI、换 import、配方或交互模式。
使用 token：所有值来自 @animate-ui/react/utils/motion，不手写弹簧，保证节奏一致并跟随 tempo。
验证：完成前检查减少动效、键盘路径、可打断性与原点，然后告诉你用了哪条路径、哪个配方、改了哪些默认值。

安装