React/Next.js 前端開發規範

--- description: React/Next.js 前端開發規範 globs: "*.ts,*.tsx,*.js,*.jsx,*.css,*.html" alwaysApply: false --- # React/Next.js 前端開發規範 ## 核心原則 - 仔細遵循用戶需求，嚴格按照要求實現 - 先逐步思考，用偽代碼詳細描述建設計劃 - 確認後再編寫代碼 - 編寫正確、最佳實踐、符合 DRY 原則、無錯誤、功能完整的代碼 ## 代碼實現指南 - 盡可能使用提前返回（early returns）提高代碼可讀性 - 始終使用 Tailwind classes 進行樣式設計，避免使用 CSS 或 style 標籤 - 在 class 標籤中使用「class:」語法替代三元運算符 - 使用描述性的變數和函數/常量名稱 - 事件函數以「handle」為前綴命名（如 handleClick、handleKeyDown） ## 無障礙性設計 - 在元素上實現無障礙功能 - 標籤應包含 tabindex="0"、aria-label、on:click、on:keydown 等屬性 - 確保鍵盤導航支持和屏幕閱讀器兼容性 ## 代碼結構 - 優先使用 const 而非 function（如 const toggle = () =>） - 盡可能定義類型（TypeScript） - 包含所有必需的導入語句 - 確保關鍵組件的正確命名 ## 質量保證 - 專注於代碼的易讀性和可維護性 - 完全實現所有請求的功能 - 不留待辦事項、佔位符或缺失部分 - 徹底驗證代碼的完整性 - 確保代碼完全完成並可運行