跳转到使用指南
review-animations作者 Emil Kowalski

Review Animations Skill.

Claude Code 和 Codex 的设计审查 skill:审查动画代码的时序、交互和完成度,依据高水准工艺标准。

  • Design Review & Accessibility
  • 审查报告
emilkowalski/skills · skills/review-animations/SKILL.mdSKILL.md
--- name: review-animations description: Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned. --- ## Operating Posture ## The Ten Non-Negotiable Standards ## Aggressive Escalation Triggers ## Remedial Preference Hierarchy ## Required Output Format ## Guidelines
前言和章节标题读取自上游文件,时间为 2026-09-14 · 完整内容 8,040 字符

01 功能说明

review-animations Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

这是一个刻意窄化的评审 skill:它仅以极高的工艺标准评判动画与运动代码,不做通用代码评审。其实质标准来自 Emil Kowalski 的动画理念,其方法——十条不可妥协的标准、激进的升级触发条件、九步补救层级,以及分层输出——最终都指向一个明确的结论。

默认是标记问题;通过需要靠争取。diff 中的每一个动画都必须在目的与频率上自证合理,使用响应式缓动,时长控制在 300ms 以内,从触发点缩放展开,运行在 transform 和 opacity 上,可被中断,遵循减少动效设置,并使用非对称计时。输出为一个 Before/After/Why 的结果表,外加 Block 或 Approve 的判定,并引用 file:line。

审查报告
查看示例提示词 ↗

工作方式

  1. 01
    对照十项标准衡量

    diff 中的每一个动画都会依据十条不可妥协的标准逐一检查,涵盖合理性、频率、缓动、时长、起点、可中断性、GPU 属性、无障碍性、非对称性与整体一致性。

  2. 02
    发现即标记升级触发条件

    一组列出的危险信号会被直接严厉指出,而非拿来讨论,包括 transition: all、scale(0) 入场、UI 上使用 ease-in、键盘或高频(每天 100+ 次)操作上的动效,以及缺失减少动效处理。

  3. 03
    优先采用最早期的补救方式

    修复方案按层级顺序提出:先考虑删除动画,再考虑削减动画,随后依次修正缓动、起点、可中断性、GPU 属性、时长、细节打磨,最后是无障碍性与一致性。

  4. 04
    输出两个必需部分

    评审结果按固定顺序返回:第一部分是单一的结果表,第二部分是分层评论,并以明确的判定结束。

  5. 05
    分层评论并作出判定

    其余评论按六个影响层级分组,从高到低排列,空层级省略,并以 Block 或 Approve 的决策收尾。

02 找到适合场景

何时使用 review-animations Skill

在 Claude Code 或 Codex 中使用 review-animations skill 处理此类设计审查工作。适用范围和限制来自该 skill 的文件。

适合场景

  • 根据 Emil Kowalski 设计工程哲学衍生的高标准审查动画和运动代码。默认标记问题;通过才是获得的认可。

了解边界

  • 它不编写功能、修复无关的 bug,也不审查非动效代码。

03 Skill 内部

review-animations Skill 为设计审查带来什么

SKILL.md 指示 Claude Code 或 Codex 执行的 4 件事,按文件自己的部分顺序。

  1. 操作姿态

    你是一位对工艺要求严苛的资深设计工程师。你的倾向是支持感觉对的动效,而非仅仅能运行的动效。

  2. 十项不可妥协的标准

    diff 中的每个动画都按这些标准衡量。违反即为问题。

  3. 补救措施优先级层次

    在提出修复建议时,优先考虑早期的动作而不是后期的动作:

  4. Guidelines

    对于预定义的动效,优先使用 CSS transitions/@starting-style/WAAPI;对于动态、可中断、基于手势的动效,使用 JS/springs。;当不确定动效是否感觉正确时,建议以慢动作 / 逐帧方式审查

04 投入使用

在 Claude Code 或 Codex 中安装 review-animations

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 review-animations 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/emilkowalski/skills --skill review-animations

针对 skills/review-animations/SKILL.md 的通用 skills CLI 形式;具体仓库可能记录其自身路径。

为 Skill 提供第一个设计审查任务

SKILL.md 不包含示例提示;此启动器根据目录一行摘要编写。将任务行替换为你的实际 brief。

Starter prompt
Use the review-animations skill on the material I attach. What the skill should do here: Reviews animation code for timing, interaction, and finish against a high craft bar. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

来源:根据目录一行用途编写的启动器提示(不是来自 SKILL.md)。

检查首次结果

在接受输出之前,在记录和文件中查找以下内容:

  • 结果以审查报告形式交付,如目录中为此 skill 列出的那样。
  • Agent 在生成结果之前,会在其计划或记录中提到 review-animations skill。
  • 您自己的内容、名称和数字在输出中保持不变。

在 OpenDesign 中,review-animations 已内置:在 Plugins → Skills 中,于顶部栏选择它即可。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Repository
github.com/emilkowalski/skills 分支 main
Skill 文件
skills/review-animations/SKILL.md 验证时记录的内容校验和;提交 d23d7f8
License
MIT 来自 LICENSE。
仓库星标数
37,516 GitHub 快照拍摄于 2026-09-14,针对整个 emilkowalski/skills 仓库,该仓库在此目录中包含 9 个 skills。不是 review-animations 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中(检查于 2026-08-28);此页面尚未记录实际运行。
Skill 自身的描述
"根据 Emil Kowalski 设计工程哲学衍生的高标准审查动画和运动代码。默认标记问题;通过才是获得的认可。"

来自 SKILL.md 的前置描述。完整文件约 8,040 个字符。在 GitHub 上阅读完整文件。

Review Animations

在真实的设计审查任务中运行 review-animations。

review-animations skill 内置于 OpenDesign。下载该应用,在 Plugins → Skills 中选择该 skill,粘贴上面的提示,并在查看结果之前阅读计划。

终端
npx skills add https://github.com/emilkowalski/skills --skill review-animations