home / skills / lobehub / lobe-chat / react

react skill

safe

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

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

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

2.6 KB

---
name: react
description: React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.
---

# React Component Writing Guide

- Use antd-style for complex styles; for simple cases, use inline `style` attribute
- Use `Flexbox` and `Center` from `@lobehub/ui` for layouts (see `references/layout-kit.md`)
- Component priority: `src/components` > installed packages > `@lobehub/ui` > antd
- Use selectors to access zustand store data

## @lobehub/ui Components

If unsure about component usage, search existing code in this project. Most components extend antd with additional props.

Reference: `node_modules/@lobehub/ui/es/index.mjs` for all available components.

**Common Components:**
- General: ActionIcon, ActionIconGroup, Block, Button, Icon
- Data Display: Avatar, Collapse, Empty, Highlighter, Markdown, Tag, Tooltip
- Data Entry: CodeEditor, CopyButton, EditableText, Form, FormModal, Input, SearchBar, Select
- Feedback: Alert, Drawer, Modal
- Layout: Center, DraggablePanel, Flexbox, Grid, Header, MaskShadow
- Navigation: Burger, Dropdown, Menu, SideNav, Tabs

## Routing Architecture

Hybrid routing: Next.js App Router (static pages) + React Router DOM (main SPA).

| Route Type | Use Case | Implementation |
|------------|----------|----------------|
| Next.js App Router | Auth pages (login, signup, oauth) | `src/app/[variants]/(auth)/` |
| React Router DOM | Main SPA (chat, settings) | `desktopRouter.config.tsx` |

### Key Files
- Entry: `src/app/[variants]/page.tsx`
- Desktop router: `src/app/[variants]/router/desktopRouter.config.tsx`
- Mobile router: `src/app/[variants]/(mobile)/router/mobileRouter.config.tsx`
- Router utilities: `src/utils/router.tsx`

### Router Utilities

```tsx
import { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';

element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
element: redirectElement('/settings/profile');
errorElement: <ErrorBoundary resetPath="/chat" />;
```

### Navigation

**Important**: For SPA pages, use `Link` from `react-router-dom`, NOT `next/link`.

```tsx
// ❌ Wrong
import Link from 'next/link';
<Link href="/">Home</Link>

// ✅ Correct
import { Link } from 'react-router-dom';
<Link to="/">Home</Link>

// In components
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/chat');

// From stores
const navigate = useGlobalStore.getState().navigate;
navigate?.('/settings');
```

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

When should I use next/link vs react-router-dom Link?

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.