SuperAPI AI 工具集

review-animations

设计与创作

查看项目

更新于 10-27 16:23

技能介绍

用途

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

主要能力

该技能以 Emil Kowalski 的动画理念(animations.dev)作为实质标准,并采用一套激进的代码质量审查方法,包括不可妥协的标准、升级触发条件、补救层级、分层输出和明确的通过标准。

十条不可妥协的标准

每条动画都依据以下标准衡量,违反即为问题:

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

激进升级触发条件

以下情况一经发现即严厉标记:transition: all;scale(0) 或纯淡入无初始变换;UI 交互上的 ease-in;键盘快捷键/命令面板切换/每天 100+ 次操作上的动画;UI 时长超过 300ms 无理由;触发锚定的弹出层使用 transform-origin: center;toast/开关等快速触发元素使用关键帧;动画布局属性;页面繁忙时 Framer Motion 的 x/y/scale;通过父级 CSS 变量驱动子级变换;缺少 prefers-reduced-motion;未加门控的 :hover 动效;按压释放或长按交互的对称时序;本应 30–80ms 错开的全部同时入场。

补救优先级层级

提出修复时优先靠前的做法:删除动画 → 缩减(更短时长、更小变换、更少属性)→ 修复缓动 → 修复原点/物理性 → 使其可中断 → 移至 GPU → 非对称时序 → 打磨 → 无障碍与协调性。

使用方式

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

需要精确值或引用时,加载 STANDARDS.md(包含缓动曲线、时长表、弹簧配置、手势、clip-path、性能、无障碍等完整规则目录)。

输出格式

第一部分——问题表格(必需):单个 markdown 表格,每行一个问题,列为 Before / After / Why,绝不使用“Before:/After:”列表。

第二部分——裁决(必需):按影响层级从高到低分组剩余评论,省略空层级:破坏手感的回归、错过的简化、性能、可中断性与时序、原点/物理性与协调性、无障碍。最后给出明确决定:

  • Block:任何破坏手感的回归、键盘/高频操作上的动画、UI 上的 scale(0)/ease-in,或易于 GPU 修复的非 GPU 动画。
  • Approve:无破坏手感的回归、无应删除的明显动效、时长与缓动在范围内、需要处可中断、尊重 reduced-motion。

需具体并引用 file:line。需要值时从 STANDARDS.md 取精确值而非近似。

适用场景

适用于审查动画与动效代码,尤其是涉及过渡、缓动、弹出层、手势驱动动效、性能与无障碍的 UI 动效实现。

限制

不编写功能、不修复无关缺陷、不审查非动效代码。通用代码审查请求会被拒绝。关于收费、价格、平台等信息暂未提供。