web-web-auditor

name	Web 介面稽核 (Web Auditor)
description	根據 Web 介面指南 (Web Interface Guidelines) 審查 UI 代碼。當需要「審查我的 UI」、「檢查無障礙性」、「稽核設計」或「檢查最佳實踐」時使用。

Web 介面稽核 (Web Interface Guidelines)

審查檔案是否符合 Web 介面指南與最佳實踐。

核心檢查項目

在審查 UI 代碼時，請重點檢查以下項目：

1. 佈局與結構 (Layout & Structure)

• 響應式設計: 確保介面在移動端、平板與桌面端皆能正常顯示。使用 Tailwind 的 md:, lg: 前綴。
• 容器寬度: 內容不應在寬螢幕上無限延伸。使用 max-w-screen-xl 或類似容器限制。
• 間距一致性: 檢查 padding 與 margin 是否遵循系統化的間距 (如 4px, 8px, 16px, 24px...)，避免隨意數值 (magic numbers)。

2. 無障礙性 (Accessibility - a11y)

• 語意化 HTML: 使用正確的標籤 (<button>, <a>, <nav>, <main>) 而非全部使用 <div>。
• Focus 狀態: 確保所有互動元素都有清晰的 :focus 或 :focus-visible 樣式。
• 對比度: 文字與背景的對比度需符合 WCAG 標準 (至少 4.5:1)。
• Alt 文字: 所有 <img> 標籤必須有 alt 屬性。

3. 使用者體驗 (User Experience - UX)

• 載入狀態: 在數據獲取時顯示 Skeleton 或 Spinner。
• 空狀態 (Empty States): 當列表無數據時，顯示友善的空狀態提示。
• 錯誤處理: 表單驗證錯誤應清晰可見，並提供修正建議。
• 點擊區域: 按鈕與連結的點擊區域至少應為 44x44px (移動端友善)。

4. 程式碼品質 (Code Quality)

• 組件化: 避免過大的檔案。將重複的 UI 提取為獨立組件。
• Tailwind 最佳實踐: 使用 class:list 或 clsx 處理條件式樣式，避免過度嵌套。

使用方式

當使用者要求審查代碼時：

1. 讀取檔案: 檢視相關的組件與頁面代碼。
2. 逐項檢查: 對照上述核心檢查項目進行「模擬執行」。
3. 輸出報告:
   • ❌ 問題: 指出具體行號與問題描述。
   • ✅ 建議修正: 提供修正後的程式碼片段。
   • 💡 優化建議: 提供非強制性的改進意見。