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 可满足需求，避免重复造轮子。