skills.rest
serguei9090
serguei9090COMMUNITY
Explore all skills by this author →
GitHub

react

Guides React component development with @lobehub/ui, antd-style, and hybrid routing conventions.

Updated Mar 22, 2026
Search Tags:#frontend#react#routing#components#flexbox#lobehub-ui#antd-style
One-click install
npx skills add https://github.com/serguei9090/LogLensAi --skill react-serguei9090
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/serguei9090/LogLensAi/tree/main/.agents/skills/react
Command: npx skills add https://github.com/serguei9090/LogLensAi --skill react-serguei9090

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React projects with custom component libraries and hybrid routing setups often suffer from inconsistent styling, wrong component choices, and broken navigation when developers pick the wrong primitives or forget to sync paired files. This Skill encodes the project's React conventions so components, layouts, and routes are built correctly the first time. ## Core Features & Use Cases - Component Selection Rules: Enforces a priority order of src/components, @lobehub/ui/base-ui primitives, @lobehub/ui components, then custom implementation, avoiding direct antd usage. - Styling Guidance: Directs use of createStaticStyles with cssVar for zero-runtime styles, falling back to createStyles only for runtime-computed values. - Routing & Navigation: Documents the hybrid Next.js App Router plus React Router DOM architecture, the .desktop file sync rule, and correct Link/useNavigate usage. - Use Case: When adding a new settings page, the Skill ensures you register the route in both desktopRouter.config.tsx and its .desktop counterpart, use react-router-dom Link instead of next/link, and lay out the page with Flexbox from @lobehub/ui. ## Quick Start Use the react skill to create a new settings page component with a Flexbox layout and register its route in both desktop router config files.

Frequently Asked Questions about react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between @lobehub/ui components and custom React components?▼

Follow the priority order: check src/components first, then @lobehub/ui/base-ui primitives like Select, Modal, and Popover, then higher-level @lobehub/ui components. Only build a custom component as a last resort, and never use antd directly.

When should I use createStaticStyles vs createStyles in antd-style?▼

Prefer createStaticStyles with cssVar tokens for zero-runtime styles defined at module level without a hook call. Only fall back to createStyles with token when styles genuinely need runtime computation such as dynamic props or color functions.

Why does my Electron build show a blank page after adding a route?▼

Blank pages usually come from drift between paired router files. The desktopRouter.config.tsx uses dynamic imports while desktopRouter.config.desktop.tsx uses sync imports, and both must be updated together when routes change.

Should I use next/link or react-router-dom Link for navigation?▼

Use Link from react-router-dom for SPA pages like chat and settings, with the to prop instead of href. next/link is only appropriate for the Next.js App Router auth pages such as login and signup.

How do I build layouts with Flexbox from @lobehub/ui?▼

Flexbox defaults to vertical layout; pass the horizontal prop for row layouts and use gap for spacing instead of margins. Use flex={1} to fill available space and the Center component for centered content, as shown in references/layout-kit.md.

Related Skills

Explore More Software Engineering Skills→
OpenSourceAGIOpenSourceAGI
74

react

Guides React component authoring in LobeHub projects using base-ui, antd-style, and memoization conventions.

Official
Intermediate
sblueminsbluemin
16

desktop-e2e

Automate end-to-end testing of the Fleet Console Electron Desktop shell.

Community
Advanced
no-problem-devno-problem-dev
5

design-audit

Audit SwiftUI Views for Design System token compliance and accessibility.

Official
Intermediate
FredoAiFredoAi

chakra-ui-builder

Build responsive, accessible UI components and themes using Chakra UI v3.

Official
Intermediate