Web Interface Auditor (Web Auditor)

審查檔案是否符合 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. 輸出報告:
   • ❌ 問題: 指出具體行號與問題描述。
   • ✅ 建議修正: 提供修正後的程式碼片段。
   • 💡 優化建議: 提供非強制性的改進意見。