用途
这是一个构建型技能，只做一件事：把动效需求转化为能通过严格评审的实现。它不审计代码库（那是 improve-animations）、不评审 diff（那是 review-animations）、不寻找可动画化的位置（那是 find-animation-opportunities），也不面向 React Native（那是 animate-expo）。
它的标准是 Emil Kowalski 的动画理念，与 review-animations 执行的标准一致。目标是第一次写出来就能通过该评审。
主要能力
技能按固定顺序执行构建流程，前两步决定一切：
-
判断是否应该动画：按使用频率分级。每天 100 次以上（键盘快捷键、命令面板切换）永远不动画；每天数十次（悬停效果、列表导航）只做几乎不可察觉的快速细微效果或不做；偶尔使用（模态框、抽屉、提示）用标准动画；罕见或首次（引导、成功、庆祝）才允许愉悦感预算。键盘触发的操作是取消资格项，不是可判断项。
-
明确目的：必须用以下词之一命名——反馈、空间一致性、状态指示、避免突兀变化、解释（仅营销/引导）、愉悦感（仅罕见/首次层级）。无法命名就不构建。同时检查功能：用户正在阅读或操作的数据不应为风格而移动。
-
选择工具（成本最低且够用）：悬停、按压、颜色、可控状态切换用 CSS transition；挂载入场且无 JS 状态用 CSS @starting-style；页面繁忙加载时仍需平滑的预定动效用 CSS animation（脱离主线程）；需要程序化控制但保持 CSS 性能用 WAAPI；弹簧、布局动画、退出动画、手势驱动值用 Motion。若任务需要的是组件（提示、抽屉、命令菜单、下拉）而非动画，应停止并调用 pick-ui-library。
-
选择属性：只用 transform 和 opacity，它们跳过布局与绘制并在 GPU 上运行。width/height/margin/padding/top/left 会触发全部三个阶段。clip-path 是获准的第四种。绝不用 scale(0)，入场从 scale(0.9–0.97) + opacity: 0 开始。弹出层、下拉、菜单、提示的 transform-origin 设在触发器上，模态框例外保持居中。translate() 中的百分比相对于元素自身尺寸。在 Motion 中使用完整 transform 字符串，x/y/scale 简写不会硬件加速。
-
缓动与时长或弹簧：入场或退场用 ease-out；屏幕上移动或变形用 ease-in-out；悬停或颜色变化用 ease；恒定运动用 linear；默认 ease-out。UI 中绝不用 ease-in。内置 CSS 缓动太弱，应使用提供的强缓动曲线。时长方面：按钮按压反馈 100–160ms，提示与小弹出层 125–200ms，下拉与选择 150–250ms，模态框与抽屉 200–500ms，营销/解释可更长。UI 动画保持在 300ms 以下。当运动是带惯性的拖拽、应显得有生命力的元素、用户可中断或反转的手势、或装饰性鼠标跟踪时，改用弹簧。
-
中断与退出：对快速触发的内容（提示、开关）用 transition 而非 keyframes，因为 transition 从当前值重新定位，keyframes 从零重启。手势用弹簧，因为它在中断中携带速度。退出方式与进入方式一致。在用户做决定的阶段使用非对称时序。
-
减少动效与指针门控：每次随动画一起交付。使用 prefers-reduced-motion 媒体查询保留透明度/颜色、去掉基于 transform 的运动；使用 hover 与 pointer 媒体查询避免触摸误触发悬停。减少动效意味着更少更温和的动画，而非零。
使用方式
技能首次被调用且没有具体问题时，只回复一句就绪声明，不提供其他信息，直到用户提问。之后按上述七步顺序执行，直接做出判断、用一行说明理由并写代码，绝不把动效选项作为菜单呈现。对于常见组件（按钮按压、下拉、提示、模态框、抽屉、提示条、手风琴、交错、按住确认、标签指示器、滚动显现、拖拽关闭），应加载 RECIPES.md 并从配方开始，而不是从空白文件开始。
适用场景
适用于需要从零构建 UI 动画、并希望实现能通过严格动画评审的场景。常见组件实现可参考配方文件。
限制
不审计代码库、不评审 diff、不寻找可动画化位置、不面向 React Native。若请求未通过频率门控，应明确说明并改提供非动效替代方案。完成前需自检“绝不发布”清单，包括：transition: all、scale(0) 入场、UI 元素上的 ease-in、无理由超过 300ms 的 UI 时长、触发器锚定弹出层上的 transform-origin: center、快速触发元素上的 keyframes、动画化 width/height/margin/padding/top/left、负载下使用 Motion x/y/scale 属性、未门控的 :hover 运动、缺少 prefers-reduced-motion、所有元素同时入场（应使用 30–80ms 交错）。