版面審核
與此檔案同目錄的 layout-audit.mjs 會以多種寬度驅動網頁並測量 DOM。
它僅報告一般人會認為的版面缺陷；可及性（accessibility）是另一個問題，不在其查核範圍內。
node ~/.claude/skills/layout-audit/layout-audit.mjs --base=http://localhost:3000 --routes=/,/pricing
旗標：--routes（以逗號分隔，預設為 /）、--widths（預設為 1440x900,390x844）、--auth=user:pass
用於基本驗證（Basic Auth）、--shots=<dir> 用於同時為每個路由與寬度儲存螢幕截圖、--json 用於比對執行結果。
Playwright 取自全域安裝的 @playwright/cli，因此任何專案都不會新增相依性。
檢查項目
| 檢查項目 | 代表意義 |
|---|---|
viewport-overflow | 元素超出視窗邊緣 — 頁面會橫向捲動 |
clipped-text | 區塊截斷了自身文字，沒有省略號或標題（title），因此文字無法觸及 |
collapsed-text | 元素包含文字但高度為零（height）— 顯示為空白間隙 |
overlapping-text | 兩個文字區塊繪製在相同像素上 |
tiny-text | 字型大小低於手機可閱讀的標準 |
處理結果
- 針對建置版本（build）而非編輯中的開發伺服器執行。 熱重載會留下未完全套用的樣式。
- 在修復任何問題前，先將發現按元素分組。 在十個路由中重複出現的共用標頭是一個缺陷，非十個，報告中的數量不等於工作量。
- 帶有省略號與標題（title）的截斷是一種模式，非缺陷 — 工具已排除此情況。若查核結果指出區塊截斷文字，代表該文字確實無法觸及。
- 同一類元素的重複發現屬於設計決策。 整個表面的字型大小或顏色應歸屬於設計負責人；回報數據並讓他們選擇，而非順手修改配色。
- 螢幕截圖仍能捕捉到規則未明定的問題。 使用
--shots並檢視規則判定為乾淨的頁面，尤其是手機寬度的頁面。 - 乾淨的執行結果不代表實際手機上沒問題。 Playwright 的 WebKit 搭配 iPhone 設定檔並非 iPhone 上的 Safari。當報告的手機缺陷無法重現時，請直接告知，而非回報一切正常，然後要求提供設備或直接移除可疑機制。
- 在信任零誤報之前，先證實規則確實會觸發。 在測試頁上製造缺陷，對其執行檢查，並觀察規則是否回報該缺陷。尤其是頁面層級的裁切（clip）會讓單純的寬度比較在每個頁面上都通過。