Review Animations

在合并之前检查一个具体交互。对照代码与实际表现,指出哪项改动能改善时序、打断处理或可访问性。

合并前复核一次界面动效

向 Agent 提供变更文件与动效场景,要求按证据输出审查发现。

给出文件、复现步骤、浏览器与可访问性状态。

复制请求,在 Floatboat 新对话中粘贴,并提供所需资料。

下载 Floatboat

带入 Floatboat 的请求

请求可预览和复制,不会从此处自动发送。

参考来源: Review Animations
https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md

先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时,先提出方案。

我的任务:
用 Review Animations 检查我的弹层动效。覆盖打开、快速关闭后重开与减少动效状态。按优先级列出问题,标出文件并保留复现条件。

期望交付:
一份带复现方法和复验条件的优先级审查。

关于 Review Animations

Emil Kowalski 的这项 MIT 许可 Skill 指导 Agent 在明确调用后审查动效代码。它关注动效目的、使用频率,以及被打断、减少动效和设备不支持悬停时的表现。 如果审查范围还包括布局、间距或交互设计,可以继续查阅同仓的 Design Engineering 综合指引。

Review Animations 的界面动效场景

先在真实状态中复核一个交互,再决定是否扩大检查范围。把发现对应到具体文件、复现步骤或性能证据。

检查高频动作的动效

选择用户反复执行的交互,例如选中多行。检查动画是否拖慢操作,记录已无法用实际反馈目的解释的动效。

复现弹层被打断

快速打开、关闭再打开一个弹层。核对过渡代码,说明上一个动画尚未结束时,新动画是否导致位置突跳。

检查减少动效模式

在系统或浏览器启用减少动效。对照界面移动与保留下来的状态反馈,指出需要替代方案的组件。

调查动效卡顿

提供代表设备和需要检查的过渡效果。用代码和浏览器证据区分可能的布局开销与实际测得的帧率问题。

如何在合并前审查一次动效改动

给出变更组件和要检查的交互。每条问题应对应可见表现与可验证的修正方法。

  1. 主动调用审查 Skill

    在支持显式调用的宿主中指定 Skill,提供动效代码、组件状态和目标设备。

  2. 对照代码与复现

    检查动效目的、时序、重复使用、打断、减少动效和现有性能证据。

  3. 交付有范围的发现

    为每项问题排序,附代码或复现依据,并写明怎样确认修复。

探索更多 Agent Skills

查看其他 Skill 指南,并在使用前核对原始来源。

Review Animations 常见问题

会自动启动审查吗?
清单禁用了模型自动调用。在支持手动调用的宿主中明确要求运行该 Skill。
必须使用某个动效库吗?
可以检查不同动效库的实际 CSS 或组件实现。审查依据是用户看到的行为和相关代码。
审查时会立刻改代码吗?
先给出与实际表现对应的问题。只有改动已在授权范围内时才实施。
哪些证据能证明性能问题?
尽量提供录屏、性能记录或可重复的卡顿现象。只从代码推断的原因需要单独标记。
高频交互要保留动画吗?
结合使用频率与反馈目的判断。重复操作通常比低频过渡更需要控制动效时间。
应提供什么给审查人?
提供差异或相关文件、复现步骤,以及平台和可访问性设置。