react

The react skill provides guidance and conventions for writing and editing React components within a LobeHub-based codebase. It standardizes component structure, styling patterns, layout practices, and routing behavior for `.tsx` files under `src/**`. The skill focuses on enforcing consistent frontend architecture by prioritizing zero-runtime styling with `antd-style` and `createStaticStyles`, encouraging the use of `cssVar.*` variables, and preventing direct dependency on lower-level UI frameworks when higher-level abstractions already exist. It also ensures developers follow the correct SPA routing patterns using `react-router-dom` instead of `next/link`.

The skill includes detailed recommendations for component selection and UI composition. It prioritizes reusable project-specific components from `src/components`, then headless primitives from `@lobehub/ui/base-ui`, followed by higher-level components from `@lobehub/ui`. It provides guidance for layout construction using `Flexbox` and `Center`, including spacing and overflow management patterns. The documentation also defines rules for dynamic versus static styling, explains when `createStyles` should be used as a last resort, and highlights synchronization requirements between standard `.tsx` files and `.desktop.tsx` Electron variants to prevent routing or rendering issues.

This skill is intended for frontend engineers working on React applications that follow the LobeHub architecture and component ecosystem. It is especially useful for developers creating new pages, editing layouts, adding styles, managing routing behavior, or integrating reusable UI primitives. Teams maintaining shared design systems or Electron-compatible React applications can use this guidance to maintain consistency, reduce styling overhead, and avoid synchronization problems between desktop and web implementations.