以 skill 自身的术语
这个 skill 为编程 Agent 赋予 Emil Kowalski 在设计工程方面的判断力，用于界面工作：如何决定某个元素是否应该动起来，使用哪种缓动和时长，以及如何构建有响应感的组件。它设定了硬性默认值——UI 动画时长应低于 300ms，使用自定义 cubic-bezier 曲线而非内置 CSS 缓动，永远不用 ease-in，永远不用 scale(0) 的入场效果，弹出层应从其触发元素处缩放出现。
它还涉及弹簧效果、clip-path 技巧、拖拽与手势处理、GPU 性能规则、减少动态效果，以及代码评审时要求的 Before/After markdown 表格。它适合那些希望获得基于品味判断的界面决策、而非泛泛动画建议的设计师与开发者。
它产出什么
- 一份包含 Before、After 和 Why 三列的 markdown 评审表格，每发现一个问题占一行
- 可直接粘贴使用的 CSS 变量，其中保存着推荐的自定义缓动曲线
- 弹簧配置对象，可以是 Apple 风格或传统物理参数
- 根据评审清单（Review Checklist）各类别整理出的优先修复列表
工作方式
- 01根据频率来决定是否使用动画
在编写任何动画代码之前，先判断用户触发该交互的频率有多高。
- 02明确目的
每个动画都必须能回答“为什么要动”，答案应来自以下有效列表：空间一致性、状态指示、解释说明、反馈，或防止突兀的变化。
- 03选择自定义曲线
根据元素是进入、退出、移动，还是仅改变颜色来选择缓动方式，然后用更强的自定义 cubic-bezier 曲线替换内置曲线。
- 04设置持续时间
根据表格中的元素类型匹配持续时间——按钮按下 100-160ms，下拉菜单 150-250ms，模态框 200-500ms——并保持 UI 动画在 300ms 上限以下。
- 05应用组件默认值
按钮在 :active 时缩放到 0.97，入场动画从 0.95 配合 opacity 开始而非 scale(0)，弹出层从其触发元素处缩放展开，而模态框保持居中。
- 06在值得使用的地方使用弹簧动画
弹簧动画适用于带动量的拖拽、可被中断的手势，以及刻意追求装饰效果的交互。