用途
review-animations 是一个专门的审查技能,只做一件事:依据高标准工艺门槛审查动画与动效代码。它不编写功能、不修复无关缺陷、不审查非动效代码。如果被要求审查通用代码,它会拒绝并指向通用审查技能。
主要能力
该技能以 Emil Kowalski 的动画理念(animations.dev)作为实质标准,并采用一套激进的代码质量审查方法,包括不可妥协的标准、升级触发条件、补救层级、分层输出和明确的通过标准。
十条不可妥协的标准
每条动画都依据以下标准衡量,违反即为问题:
- 动效合理性:每个动画必须回答“为什么动”——空间一致性、状态指示、反馈、解释或防止突兀变化。高频元素上仅因“看起来酷”即被阻止。
- 频率适配:键盘触发和每天 100 次以上的操作不加动画;每天数十次减少动效;偶发用标准动效;罕见/首次可带愉悦感。
- 响应式缓动:进入/退出元素使用 ease-out 或强自定义曲线。UI 上使用 ease-in 即被阻止。内置 CSS 缓动过弱,应使用自定义 cubic-bezier。
- UI 低于 300ms:UI 动画保持在 300ms 以下,更慢需有理由。
- 原点与物理正确性:弹出层/下拉/工具提示从触发元素缩放(transform-origin),而非中心。绝不用 scale(0),应从 scale(0.9–0.97) + opacity 开始(模态框例外,保持居中)。
- 可中断性:快速触发或手势驱动的动效(toast、开关、拖拽)必须可中断——使用 CSS 过渡或从当前状态重定向的弹簧,而非从零重启的关键帧。
- 仅 GPU 属性:只动画 transform 和 opacity。动画 width/height/margin/padding/top/left 属于性能问题。
- 无障碍:尊重 prefers-reduced-motion(更温和而非归零——保留 opacity/color,去掉移动)。悬停动画需置于 @media (hover: hover) and (pointer: fine) 之后。
- 进出场非对称:刻意操作(按压、长按、破坏性确认)动画更慢;系统响应则迅速。按压释放或长按交互使用对称时序即为问题。
- 整体协调性:动效匹配组件个性与产品其余部分。不确定时,最强做法往往是删除动效。
激进升级触发条件
以下情况一经发现即严厉标记: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 动效实现。
限制
不编写功能、不修复无关缺陷、不审查非动效代码。通用代码审查请求会被拒绝。关于收费、价格、平台等信息暂未提供。