Motion review
一个动效页面，并非在你的显示器上运行就完成了。它完成于：在固定的评分规则上得分良好，在所有桌面和手机尺寸的阻断性检查中通过，并且你已经亲眼查看了结果，而非仅仅信任代码。
这个技能为你提供三样东西：
- 一个查看-修复循环：截图、评分、修复最差的问题、再次截图。
- 一份评分规则，包含10项标准，从1到10评分，并描述了5分、8分和10分的具体表现：references/rubric.md。
- 一份阻断性QA检查清单和两个可独立运行的脚本，用于测量：references/qa-checklist.md、scripts/section-shots.mjs、scripts/qa-lite.mjs。
标准
- 规则平均分8分或更高，且没有单项低于7分。
- 所有阻断性检查均通过（在 1440x900 和 390x844 分辨率下）。
- 你已经在两种尺寸下查看了每个区块。没有截图的审查就是猜测。
如果页面未达到标准，即使英雄区看起来再好，也不算就绪。
要求
- Node 18 或更新版本。
- 在你审查的项目中安装 Playwright：
npm i -D playwright然后npx playwright install chromium。或者使用已安装的 Chrome，配合playwright-core，并传递--chrome "<chrome 路径>"。脚本会自动在常见的 Windows、macOS 和 Linux 位置查找 Chrome 或 Edge。 - 可选：
npm i -D sharp用于生成联系表。没有它，你仍然能得到每个 PNG。 - 从你的项目文件夹运行脚本。它们会首先在你运行脚本的文件夹中查找 Playwright 和 sharp，然后才在脚本旁边查找，因此在项目中安装一次即可。下面的脚本路径是相对于此技能文件夹的。Claude Code 在加载技能时会显示该文件夹；如果是手动复制，路径可能是
~/.claude/skills/motion-review/，因此完整的调用是node ~/.claude/skills/motion-review/scripts/qa-lite.mjs ./site。
?shot=N 约定
脚本会打开 index.html?shot=N，并期望页面定位到区块 N。在你的页面中添加以下代码（只需几行，但能让每次审查都可重复）：
// QA 钩子：?shot=N 会在加载后将区块 N 滚动到视口中央。
const shot = new URLSearchParams(location.search).get("shot");
if (shot !== null) addEventListener("load", () => {
const marked = document.querySelectorAll("[data-shot]");
const s = (marked.length ? marked : document.querySelectorAll("section"))[+shot];
if (s) scrollTo(0, s.getBoundingClientRect().top + scrollY + s.offsetHeight / 2 - innerHeight / 2);
});
对于电影或一次性播放的介绍，在存在 ?shot 时，也将时间线跳转到其稳定状态，以便截图显示的是最终的帧，而不是第一帧。对于计时电影，请参阅分析技能中的公平捕获方法：../motion-analytics/references/reference-grading.md。
查看-修复循环
重复此循环，直到页面达到标准。每次应优先修复最具破坏性的一个问题，而不是一次性处理十个微小问题。
1. 截图
node scripts/section-shots.mjs ./my-site 6 ./qa/shots
这会在本地端口上提供 ./my-site，在桌面和手机尺寸下打开 index.html?shot=0 到 ?shot=5，写入 d0.png ... d5.png、p0.png ... p5.png，如果安装了 sharp，还会生成 desk-sheet.png 和 phone-sheet.png。它会打印它看到的每个页面错误和控制台错误。
2. 查看
先打开两张联系表，然后查看单个帧。逐区块问自己：
- 这个帧中是否体现了页面的核心思想，还是一个通用的区块？
- 手机帧是否有自己的构图，还是仅仅是桌面版本的挤压？
- 是否有任何文本位于图像的杂乱部分上？
- 是否有任何内容被裁剪、重叠、空白或仍在加载？
- 每个区块看起来是否属于同一个品牌？
在评分之前，用简单的文字写下你看到的内容。“手机英雄区标题遮住了人物的脸”是有用的描述。“看起来不错”则没有帮助。
3. 检查
node scripts/qa-lite.mjs ./my-site
它会为每项阻断性检查输出“通过”或“失败”，并附带测量值。任何“失败”都会阻止发布。请参阅 references/qa-checklist.md 了解每项检查的含义、脚本如何测量以及通常的修复方法。
有些检查需要人工确认：暂停控制是否能停止所有运动，快速甩动后反向滚动是否能干净地回放，打开声音时页面感觉是否良好。清单中将这些标记为“手动”。请执行它们。
4. 评分
根据截图和实际使用页面，对全部10项规则标准进行评分。使用 references/rubric.md 中的锚点。评分针对屏幕上的实际表现，而非代码意图。每项评分写一句证据。
5. 修复最差的问题
选择最低的分数或第一个“失败”。修复原因，而非症状：如果文本在手机上不可读，请修复字体比例和遮罩层，而不是缩小图像。保持改动小而局部。
6. 重复
再次截图，再次查看，重新评分你改动过的标准。达到标准时停止。对于一个新页面，通常需要三到五次循环。
审查报告格式
当你报告审查结果时，请使用以下格式，以便结果可以随时间比较：
页面: <名称> 轮次: <n> 日期: <yyyy-mm-dd>
规则: idea 8, craft 7, motion 9, ... 平均分 8.1, 最低分 7 (craft)
阻断性检查: 12 项中 11 项通过。失败项: 触摸目标 (手机上有 3 个小于 44px: .nav a, #prev, #next)
查看帧: 6 个桌面帧, 6 个手机帧
最差问题: <一句话>
已应用修复: <一句话>
下一步: <一句话>
经验法则
- 评分时手机优先。 大多数访问者通过手机到达。如果在桌面上是9分，在手机上只有6分，那么它就是6分。
- 无法停止的动效是缺陷。 任何移动超过五秒的内容都需要一个可见的暂停控制，并且“减少动效”模式必须提供一个完整、稳定的页面。
- 滚动必须双向运行。 向上滚动必须干净地撤销向下滚动的效果，无论滚动速度如何。
- 没有静默的错误。 即使页面看起来没问题，一个控制台错误也算“失败”。这通常意味着某个备用路径已损坏。
- 同时评判稳定帧和运动帧。 截图显示构图；只有实际使用页面才能显示时机。两者都要做。
相关
- 测量帧时间、质量等级和页面重量：../motion-analytics/SKILL.md。
- 首先构建页面：../motioncraft-builder/SKILL.md。