react_skill

This skill guides React component development using @lobehub/ui, routing tactics, and style decisions to accelerate frontend features.

TypeScript

70.5k

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill lobehub/lobe-chat --skill react

SKILL.md2.6 KB

Overview

This skill is a concise guide for developing React components in the project, focusing on .tsx files, UI composition, routing, and using @lobehub/ui. It codifies component priorities, layout patterns, and routing decisions so you can build consistent, maintainable frontend features. Use it when creating or modifying components, pages, or navigation flows.

How this skill works

It inspects component files, layout implementations, and routing usage to enforce project conventions: preferred UI primitives, state access patterns, and route types. It highlights when to use @lobehub/ui components, when to fall back to installed packages or antd, and which router APIs to use for SPA vs static pages. It also points to key entry points and utilities for wiring routes and navigation.

When to use it

Creating new React components (.tsx) or updating existing UI
Implementing layouts using Flexbox or Center from @lobehub/ui
Choosing UI primitives or fallback libraries for components
Implementing or modifying routing and navigation behavior
Wiring navigation from stores or components

Best practices

Prefer components in src/components, then installed packages, then @lobehub/ui, and use antd only when necessary
Use @lobehub/ui Flexbox and Center for layout; use antd-style for complex styles and inline style for simple tweaks
Access global state via selectors from zustand stores (avoid ad-hoc context usage)
For SPA pages use react-router-dom Link and useNavigate; for auth/static pages use Next.js App Router
Search project code and node_modules/@lobehub/ui/es/index.mjs to discover available @lobehub/ui components

Example use cases

Build a chat panel using @lobehub/ui components and Flexbox layout
Add a settings page route in the desktop router config using dynamicElement and ErrorBoundary
Replace antd layout with Center/Flexbox to align cross-breakpoint UI
Implement navigation from a store: call navigate from useGlobalStore.getState().navigate
Create a form modal using FormModal and wired inputs from @lobehub/ui

FAQ

Use next/link only for static Next.js App Router pages (auth). For SPA pages and components that live inside the main app shell, use Link from react-router-dom and useNavigate for programmatic navigation.

Where do I find available @lobehub/ui components and props?

Inspect node_modules/@lobehub/ui/es/index.mjs and search the codebase for existing usages; many components extend antd with extra props so examples in the repo are helpful.