diegosouzapw/awesome-omni-skill

審查 UI 程式碼是否符合網頁介面規範。當被要求「審查我的 UI」、「檢查無障礙性」、「稽核設計」、「審查 UX」或「檢查網站是否符合最佳實務」時使用。

awesome-omni-skill 是什麼？

此技能專為審查使用者介面程式碼是否符合最新網頁介面規範而設計。其核心用途是自動化 UI 審查流程，涵蓋無障礙性、效能與設計最佳實務。支援的平臺包括支援 Context7、Tavily、BraveSearch 或 Serper.dev 等 MCP 工具的環境（如 Claude Code、Cursor 等），並以這些工具為首選資料來源，僅在它們失敗時才回退至 WebSearch 或 WebFetch。技能運作方式為：先動態載入最新規範規則，再讀取指定的程式碼檔案，然後比對所有規則產生審查結果，最後以簡潔的 `file:line` 格式輸出發現。此技能開發者（或 AI 代理使用者）可將它整合到設計工作流程中，作為編碼後的稽核步驟，有助於在開發早期發現並修正無障礙性、效能及規範遵循問題。

相容平台✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/diegosouzapw/awesome-omni-skill/tree/HEAD/skills/development/web-design-guidelines-darthlinuxer

說明文件

網頁介面規範

💡 MCP 工具可用：優先使用 Context7、Tavily、BraveSearch 或 Serper.dev；僅在這些工具失敗時，才按需使用 WebSearch 或 WebFetch。

審查檔案是否符合網頁介面規範。

運作方式

按需使用 Context7、Tavily、BraveSearch 或 Serper.dev 載入最新網頁介面規範；僅在這些工具失敗時，才使用 WebSearch 或 WebFetch。
讀取指定的檔案（或提示使用者提供檔案/模式）
比對規範中的所有規則
以簡潔的 file:line 格式輸出發現

規範來源

使用 Context7、Tavily、BraveSearch 或 Serper.dev 查詢網頁介面規範文件；僅在這些工具失敗時，才按需使用 WebSearch 或 WebFetch。規範中包含所有規則與輸出格式說明。

使用方式

當使用者提供檔案或模式引數時：

使用 Context7、Tavily、BraveSearch 或 Serper.dev（或 IDE 內建文件）載入相關規範；僅在這些工具失敗時，才按需使用 WebSearch 或 WebFetch
讀取指定的檔案
套用規範中的所有規則
使用規範中指定的格式輸出發現

如果未指定檔案，詢問使用者要審查哪些檔案。

設計工作流程

1. 設計   → 閱讀 frontend-design 原則
2. 編碼     → 實作設計
3. 稽核    → 執行 web-design-guidelines 審查 ← 你在此處
4. 修正      → 處理稽核發現

技能	使用時機
frontend-design	編碼前 - 學習設計原則（色彩、排版、UX 心理學）
web-design-guidelines（此技能）	編碼後 - 稽核無障礙性、效能與最佳實務