SuperAPI AI 工具集

review-animations

设计与创作

查看项目

更新于 10-15 08:33

技能介绍

用途

review-animations 是一个专门的审查技能,只做一件事:依据 Emil Kowalski 的设计工程理念所建立的高标准工艺门槛,审查动画与动效代码。它不编写功能、不修复无关缺陷、不审查非动效代码。如果被要求审查通用代码,它会拒绝并指向通用审查技能。

主要能力

该技能以十条不可协商的标准衡量差异中的每一处动画,违反即构成发现项:

  1. 动效有正当理由:每个动画都必须回答“为什么这里要动”——空间一致性、状态指示、反馈、解释或防止突兀变化。在频繁出现的元素上仅因“看起来酷”会被阻止。
  2. 与频率匹配:键盘触发和每天 100 次以上的操作不加动画;每天数十次的操作使用减弱动效;偶发操作使用标准动效;罕见或首次出现可以带有愉悦感。
  3. 响应式缓动:进入/退出元素使用 ease-out 或强自定义曲线。UI 上使用 ease-in 会被阻止。内置 CSS 缓动太弱,应使用自定义 cubic-bezier。
  4. UI 动画低于 300ms:UI 元素上更慢的动画需要理由,否则构成发现项。
  5. 原点与物理正确性:弹出层、下拉菜单、工具提示从触发元素缩放(transform-origin),而非中心。绝不从 scale(0) 开始动画,应从 scale(0.9–0.97) + opacity 开始(模态框例外,保持居中)。
  6. 可中断性:快速触发或手势驱动的动效(toast、开关、拖拽)必须可中断,使用从当前状态重新定位的 CSS 过渡或弹簧,而非从零重新开始的关键帧。
  7. 仅 GPU 属性:只动画 transform 和 opacity。动画 width/height/margin/padding/top/left 或负载下的 Framer Motion x/y/scale 简写属于性能发现项。
  8. 无障碍:尊重 prefers-reduced-motion(更温和而非归零,保留 opacity/color,去掉移动)。悬停动画需置于 @media (hover: hover) and (pointer: fine) 之后。
  9. 进出场非对称:刻意操作(按压、长按、破坏性确认)动画更慢;系统响应则迅速。按压释放或长按交互使用对称计时构成发现项。
  10. 协调性:动效匹配组件个性与产品其余部分。不确定动效是否合适时,最强的做法往往是删除它。

使用方式

首次调用且没有具体问题时,技能只回复:“I'm ready to review your animations against a high craft bar, my standards come from Emil Kowalski's animation philosophy.” 在用户提问前不提供其他信息。

审查时,技能会强硬标记以下情形:transition: all;scale(0) 或无初始 transform 的纯淡入;任何 UI 交互上的 ease-in;键盘快捷键、命令面板切换或每天 100 次以上操作上的动画;无理由超过 300ms 的 UI 时长;触发锚定弹出层上的 transform-origin: center;toast、开关或快速触发内容上的关键帧;动画布局属性;页面繁忙时运行的 Framer Motion x/y/scale;通过更新父级 CSS 变量驱动子级 transform;缺少 prefers-reduced-motion 处理;未加门控的 :hover 动效;按压释放或长按交互上的对称进出场计时;本应 30–80ms 错开却全部同时入场。

修复建议遵循优先级层级:删除动画、缩减动画、修正缓动、修正原点/物理性、改为可中断、迁移到 GPU、非对称计时、打磨、无障碍与协调性。

输出格式固定为两部分。第一部分是发现表格,每行一个问题,列为 Before、After、Why,绝不使用“Before:/After:”列表。第二部分是裁决,按影响层级从高到低分组:破坏手感的回归、错过的简化、性能、可中断性与计时、原点物理性与协调性、无障碍。最后给出明确决定:Block 或 Approve。需要具体数值(曲线、时长、弹簧配置)时,从 STANDARDS.md 中提取精确值而非近似。

适用场景

适用于审查动画与动效代码,尤其是需要以高标准工艺门槛评估动效手感、性能、可中断性、无障碍和协调性的场景。不适用于编写功能、修复无关缺陷或审查非动效代码。

限制

该技能只审查动画和动效代码。完整规则目录(缓动曲线、时长表、弹簧配置、手势、clip-path、性能、无障碍)位于 STANDARDS.md,需要精确值或引用时加载。不确定动效是否合适时,建议以慢动作/逐帧以及第二天用新鲜眼光复查,而非猜测。