以 skill 自身的术语
这是一个构建类 skill，而不是审查类：它把「要做动效」这一需求转化为经得起严格评审的实现，按固定顺序推进——是否应该有动效、目的、工具、属性、曲线与时长、中断、退出——然后再写出代码。
它适用于希望得到明确结论而非一堆选项的设计师和开发者。所有细节都来自硬性表格：频率分级、仅限 transform 和 opacity、命名的 cubic-bezier 曲线、按元素划分的时长区间，以及随动画一同提供的 reduced-motion 和 hover 门控规则。若要审查代码库或评审 diff，请使用配套的 skill。
UI 代码
查看示例提示词 ↗工作方式
- 01先看使用频率，再放行
第一步就可能决定这项任务的成败：任何每天被打开 100 次以上、或通过键盘快捷键触发的操作，都不应带有任何动画。
- 02用一个词说明目的
没有目的、没有动画。因为“看起来很酷”而要求在用户经常看到的元素上添加它，这是应该停下来重新考虑的理由，而不是继续开发的理由。
- 03选用够用即可的最便宜工具
沿着工具表往下看，停在第一个合适的选项：CSS transition、@starting-style、CSS animation、WAAPI、Motion。
- 04限制属性
Transform 和 opacity 之所以能胜任，是因为它们跳过了布局与绘制阶段，直接在 GPU 上运行；clip-path 是被认可的第四种方式，而对 height 做动画只有在手风琴组件中才被容许。
- 05从表格中固定曲线和时长
进入和退出使用 ease-out，屏幕内移动使用 ease-in-out，悬停与颜色变化使用 ease，持续运动使用 linear，默认使用 ease-out。
- 06计划中断与退出
快速被重新触发的内容使用过渡动画，手势使用弹簧动效，退出动效与进入动效对称呼应，让滑动关闭一看即懂。