react

本技能是 LobeHub 生態系統中 React 組件開發的綜合參考手冊，專為負責 UI 實現、佈局設計與路由配置的前端工程師與貢獻者設計。本指南強調存儲庫中採用的效能優化、一致性與標準編碼規範。

• 透過 antd-style 進行高級樣式處理：優先使用 createStaticStyles 配合 CSS 變數以實現零運行時效能，僅在需要動態計算時使用 createStyles。

• 佈局建構：利用 @lobehub/ui 中的 Flexbox、Center 與 layout-kit，確保響應式且標準化的介面設計。

• 組件階層：強制執行組件選用優先順序，從 src/components 到 @lobehub/ui 基礎原件（如 Modal、Select、DropdownMenu），減少自定義實現並避免直接使用 antd。

• 路由架構：管理由 Next.js App Router（靜態頁面）與 React Router DOM（SPA 功能）組成的混合路由系統。

• 狀態管理：提供關於使用選擇器 (selectors) 存取 zustand store 資料的規範。

• 修改核心檔案時，務必檢查是否存在 .desktop.tsx 變體，以防止網頁版與 Electron 實作之間的同步差異。

• 優先選用標準 @lobehub/ui 組件（如 ActionIcon、Avatar、CodeEditor）以保持視覺與功能一致性。

• 在 SPA 導航中使用 react-router-dom 原件（如 Link、useNavigate），確保嚴格遵守路由邏輯。

• 確保桌面端路由配置檔（desktopRouter.config.tsx 及其 .desktop.tsx 對應檔案）必須同步更新，以避免出現空白畫面或導航錯誤。

• 實作複雜 UI 前，請務必檢視既有代碼模式，確認是否有現成組件或 hook 可滿足需求，避免重複造輪子。