先决定要不要动，再把交互细节做对
Emil
动效、原型与界面边界测试
16 条设计工程技能，分别处理动效实现、审查与计划、原型比较、极端数据测试，以及移动端和组件库问题。
- GitHub Star
- 51,478
- 资料核对
第一次只改善一个现成弹层
选一个偶尔打开、功能已经正确的弹层，提供文件与页面位置，用 animate 完成一轮。检查连续开关、键盘打开和减少动态效果，再把判断推广到其他组件。
选一个任务，开始使用
下面的 npx 命令在项目终端执行，只安装这条任务需要的技能到 Claude Code，默认作用于当前项目。随后在同一项目的 Claude Code 会话中输入以 / 开头的任务；这些斜杠调用不在系统终端运行。
输入一个已经能正确打开、关闭和管理焦点的弹层，以及它出现的频率。交付是组件实现与检查记录。
安装本任务技能
在项目根目录执行。命令按作者的 skills 安装方式只选择 animate，并定向 Claude Code；默认安装到当前项目，按提示完成，不加全局选项。核查时 CLI 要求 Node.js 22.20+。页面引用固定提交，安装命令取得安装时可用版本，以实际加载文件为准。
查看作者安装说明npx skills@latest add emilkowalski/skills --skill animate -a claude-code确认加载的是这个仓库的技能
安装后从项目中进入 Claude Code，检查技能列表中 animate 的来源目录及 RECIPES.md 是否齐全，再用 /animate 加具体任务调用。prototype、review-animations、pick-ui-library 标记为手动调用，不能假设助手会自动选中。若已有同名技能，先确认实际加载来源；其他助手按其自身的技能入口调用。
查看 Claude Code 的技能调用规则把这段话发给 AI
以下是本站编写的任务方案，尚未在目标项目中运行。替换方括号内容，并把完整任务跟在技能名后；只输入技能名时，作者通常要求先回复就绪信息。
/animate 项目：[路径]；组件：[文件]；页面：[本地地址或路由]；启动方式：[命令]。这是偶尔通过指针打开的设置弹层，已有组件库负责语义、焦点和关闭逻辑。请改善开关动效，保留已有布局、文案、键盘功能和设计变量。 先读当前依赖、组件状态与 RECIPES.md，说明使用频率和动效目的；按现有组件库的真实状态属性与定位变量实现，不直接假设它提供 Base UI 的 data 属性或 --transform-origin。优先采用现有 CSS 与动效变量，不为这次小动效安装新库。若某条操作不该动画化，保留即时状态反馈。 实现从触发位置展开的适量缩放与透明度变化，使用作者范围内、适合本项目的曲线和时长，并能在快速关闭或重新打开时接续当前状态。键盘触发按作者规则即时响应，同时保留可见焦点。减少动态效果时实际移除位移和缩放，保留必要的状态表达；触控不残留 hover 效果。 在本地检查首次打开、快速连续开关、Escape 关闭与焦点返回、触控和减少动态效果；按项目现有方式运行相关检查。返回改动文件、预览位置、简短的参数理由及已验证/未验证项目。没有浏览器或设备时明确缺口，不把代码推断写成已经看过的体验。
检查你拿到的结果
- 组件代码与简短的动效选择说明；必要时也可能得出某条操作应保持即时反馈。
- 已确认的打开、退出、中断、键盘焦点及减少动态效果行为；设备未测的部分单列。
- 检查弹层是否从真实触发点出现、快速反向操作是否跳回起点，以及减少动态效果是否确实撤掉空间运动。
进一步了解这个 Skill
这套技能把 Emil Kowalski 在 Vercel、Linear 等团队的设计工程经验拆成不同工作入口。所核提交有 16 个 SKILL.md，其中也有针对 Sonner 的使用指南。主技能 emil-design-eng 解释动效与界面细节的判断方法；其他入口围绕一个明确任务组织步骤和产物。
先看你手里有什么：已有可用组件、准备添加动效，用 animate；已有一个改动、需要严格审查，用 review-animations；想梳理整片界面的动效问题，用 improve-animations 形成计划。prototype 帮你比较不同方向，break-ui 则把漂亮的演示数据换成现实边界，暴露布局和状态问题。
这套方法会先问“应不应该动”：反复使用的操作可能需要即时反馈，偶尔出现的弹层才适合解释空间关系。复用现有设计变量，照顾中断、退出、触控与减少动态效果，比给所有东西加动画更接近作者的目标。下面四条任务分别说明何时改代码、何时先停在计划或选择上。
来源与核验
资料核对