react

此技能為 LobeHub 生態系內的 React 組件開發與維護提供專業指導。專為負責構建 UI 功能、實現導航或修改現有介面元素的工程師設計，強調一致性、效能以及對 LobeHub 特定架構要求的遵循。

• 採用 antd-style 的 createStaticStyles 與 cssVar 以實現零運行時樣式，僅在有動態運行時需求時使用 createStyles。

• 嚴格遵守組件優先順序：優先選用 @lobehub/ui/base-ui 基礎組件（如 Modal, Select, DropdownMenu）而非直接使用 Ant Design，確保 UI 風格統一。

• 利用 layout-kit 中的 Flexbox 與 Center 組件管理複雜佈局，最大限度減少自定義 CSS。

• 規範路由架構，採用 Next.js App Router 處理靜態驗證頁面，並透過 React Router DOM 執行主要 SPA 功能。

• 透過 .desktop.ts(x) 同步規則維護專案穩定性，確保 Electron 版本與 Web 版本功能一致。

• 遵循 Zustand 狀態管理最佳實踐，使用 selector 進行高效能的資料存取。

• 修改核心 Web 組件時，務必檢查是否存在對應的 .desktop 檔案，避免 Electron 應用功能回退。

• 在 SPA 路由操作中，務必使用專案封裝的導航工具而非 next/link，以維持應用程式執行狀態。

• 開發新功能時，請優先查閱 @lobehub/ui/es/index.mjs，充分利用現有封裝好的組件。

• 嚴格遵守提供的佈局套件與組件指南，優先考慮可訪問性與標準化 UI/UX 模式。

• 針對複雜 UI 開發，建議將靜態樣式與組件邏輯分離，以提升程式碼維護性與打包效能。