動態審查 是做什麼的？
一個動態頁面不是在您的顯示器上能運作就完成了。它是在滿足固定評分表的標準、通過桌面和手機尺寸的所有阻塞性檢查，而且您已經親自看過結果（而不是相信程式碼）之後才算完成。
此技能為您提供三項工具：
- 一個觀看與修正循環：截圖、評分、修正最嚴重的問題、再次截圖。
- 一個包含 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。或者，使用playwright-core搭配已安裝的 Chrome，並傳遞參數--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 存在時，也請將時間軸跳轉到其穩定狀態，這樣截圖顯示的是合成後的畫面，而不是第 1 幀。對於計時影片，請參閱分析技能中的公平捕捉方法：../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
它會針對每項阻塞性檢查輸出 PASS 或 FAIL，並附上測量到的數值。任何 FAIL 都會阻止發布。請參閱 references/qa-checklist.md 了解每項檢查的含義、腳本的測量方式以及常見的修復方法。
有些檢查需要人工判斷：暫停控制是否能停止所有移動的元素、在快速翻動後向後滾動是否能流暢地重播、開啟聲音時頁面的感覺是否正確。檢查清單會將這些標記為手動檢查。請確實執行它們。
4. 評分
根據截圖和使用頁面的體驗，為所有 10 項評分量表標準評分。使用 references/rubric.md 中的錨點描述。根據螢幕上顯示的結果評分，而不是根據程式碼的意圖。每個分數附上一句證據說明。
5. 修正最嚴重的問題
選擇最低分數或第一個 FAIL。修正原因，而不是症狀：如果文字在手機上難以閱讀，請修正字體縮放和疊層遮罩，而不是縮小圖片。保持改動小而局部。
6. 重複
再次拍攝、再次觀看、重新評分你動過的標準。達到標準後停止。對於一個新頁面，三到五次循環是正常的。
審查報告格式
當你報告審查結果時，請使用此格式，以便結果可以隨時間比較：
Page: <頁面名稱> Pass: <次數> Date: <年-月-日>
Rubric: idea 8, craft 7, motion 9, ... average 8.1, lowest 7 (craft)
Blocking: 11 of 12 PASS. FAIL: tap targets (3 under 44 px on phone: .nav a, #prev, #next)
Seen: 6 desktop, 6 phone frames
Worst problem: <一句話描述最嚴重的問題>
Fix applied: <一句話描述已套用的修正>
Next: <一句話描述下一步>
基本原則
- 評分時以手機版本優先。 大多數訪客透過手機進入。一個在桌面上是 9 分但在手機上只有 6 分的頁面，最終得分就是 6 分。
- 無法停止的動畫是 bug。 任何移動超過五秒的元素都需要一個可見的暫停控制，並且在「減少動畫效果」的設定下，必須提供一個完整、靜態的頁面。
- 滾動必須雙向可行。 向上滾動必須乾淨地取消向下滾動所產生的效果，無論滾動速度如何。
- 沒有靜默錯誤。 即使頁面看起來正常，一個控制台錯誤也算 FAIL。這通常意味著某個備用路徑已損壞。
- 同時評判穩定影格和動畫影格。 截圖顯示構圖；只有實際使用頁面才能感受時序。兩者都要做。
相關技能
- 測量影格時間、品質等級和頁面體積：../motion-analytics/SKILL.md。
- 初次構建頁面：../motioncraft-builder/SKILL.md。