react

This skill acts as a comprehensive reference for React component development within the LobeHub ecosystem. It is intended for frontend engineers and contributors tasked with UI implementation, layout design, and routing configuration. The guide emphasizes performance, consistency, and standard coding patterns adopted across the repository.

• Advanced styling via antd-style: Prioritizes createStaticStyles with CSS variables for zero-runtime performance, reserving createStyles for dynamic runtime needs.

• Layout construction: Utilizes Flexbox, Center, and the layout-kit from @lobehub/ui to ensure responsive and standardized UI design.

• Component hierarchy: Enforces a strict selection order from src/components to @lobehub/ui base primitives (e.g., Modal, Select, DropdownMenu), minimizing custom implementations and avoiding direct antd usage.

• Routing architecture: Manages the hybrid routing system consisting of Next.js App Router for static pages and React Router DOM for the main SPA features.

• State management: Provides instructions on using selectors to access zustand store data efficiently.

• Always verify the existence of .desktop.tsx variants when modifying core files to prevent synchronization drift between web and Electron implementations.

• Prefer standard @lobehub/ui components such as ActionIcon, Avatar, and CodeEditor to maintain visual and functional consistency.

• Use react-router-dom primitives (Link, useNavigate) for SPA navigation, ensuring strict adherence to the project routing logic.

• Ensure desktop router pairs (desktopRouter.config.tsx and its .desktop.tsx counterpart) are updated simultaneously to prevent blank screen errors or broken navigation.

• When implementing complex UI, always check existing code patterns to see if a pre-existing component or hook can fulfill the requirement before building from scratch.