鐵律（Iron Law）
在審查任何檔案之前，務必先擷取最新的指南。絕對不要套用記憶或假設的規則——一律從來源 URL 即時擷取。如果 WebFetch 失敗，請回報失敗狀況，並不要以猜測的規則進行稽核。
網路介面指南審查（Web Interface Guidelines Review）
對 UI 程式碼進行稽核，對照 Vercel 的網路介面指南。以結構化的
file:line格式輸出違規項目。
何時使用此技能
當使用者要求以下事項時，載入此技能：
- "審查我的 UI"
- "檢查無障礙性"
- "稽核設計"
- "審查 UX"
- "根據指南檢查我的網站/元件"
- 在 PR 之前執行設計合規性檢查
運作方式
- 擷取指南 — 使用 WebFetch 從來源 URL 擷取最新規則
- 讀取檔案 — 讀取指定的檔案（或詢問使用者要審查哪些檔案/模式）
- 套用規則 — 針對所有檔案逐一檢查擷取到的指南中的每一條規則
- 輸出結果 — 以
file:line: [違反的規則]格式回報違規項目
指南來源
在每次審查工作階段之前，請擷取最新的指南：
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
使用 WebFetch 擷取最新規則。擷取到的內容包含所有規則及輸出格式說明。請勿跨工作階段快取或記憶規則——一律即時擷取。
使用方式
當使用者提供檔案或路徑模式時：
- 從來源 URL 擷取指南
- 讀取指定的檔案
- 套用擷取到的指南中的所有規則
- 使用指南中指定的格式輸出違規項目
當未指定檔案時：
詢問使用者：「我應該審查哪些檔案或目錄？（例如：src/app/features/dashboard/ 或 *.component.html）」
輸出格式
請完全依照擷取到的指南中指定的格式輸出。預設結構如下：
file:line — [規則名稱]: [違規說明]
範例：
dashboard.component.html:34 — 空狀態（Empty State）: 未針對無資料條件定義空狀態
dashboard.component.html:67 — 焦點管理（Focus Management）: 可互動元素缺少可見的焦點指示器
order-list.component.ts:89 — 載入狀態（Loading State）: 非同步操作缺少載入回饋
失敗處理
如果 WebFetch 無法擷取指南 URL：
- 報告：「無法從來源 URL 擷取網路介面指南。擷取失敗：[錯誤訊息]」
- 請勿繼續使用猜測或記憶的規則進行稽核
- 建議：「請重試，或檢查 raw.githubusercontent.com 的網路連線」
如果擷取失敗，絕不憑空捏造規則違規項目。
此技能在審查堆疊中的定位
此技能是 UI 審查的第三層——建議依次執行全部三層以獲得完整覆蓋：
| 層級 | 工具 | 檢查項目 |
|---|---|---|
| 第一層 — 設計代碼 | /lint-design-system | 硬編碼顏色、原始間距、行內排版、觸控目標違規 |
| 第二層 — WCAG 無障礙性 | accessibility-auditor 代理 | 對比度、ARIA 標籤、鍵盤導航、語意 HTML |
| 第三層 — 網路介面模式 | web-design-guidelines（此技能） | 載入狀態、空狀態、錯誤處理、互動模式、焦點管理 |
相關技能
frontend-design— 在此技能之前執行，以確立美感方向與 DFII 分數design-system— 設計代化合規性強制執行（Angular + Flutter）angular-ui-patterns— Angular 專用的載入/錯誤/空狀態方法accessibility-audit— WCAG 2.1 AA 合規性稽核員