react

Name: react
Author: lobehub

Use when writing or editing any `.tsx` under `src/**`. Triggers: createStaticStyles, createStyles, cssVar, antd-style, Flexbox, Center, Select, Modal, Drawer,…

INSTALLATION

npx skills add https://github.com/lobehub/lobe-chat --skill react

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$27

Common @lobehub/ui Components

Layout

Use Flexbox and Center from @lobehub/ui. See references/layout-kit.md for full props and examples.

Use gap instead of margin for spacing between flex children

Use flex={1} to fill available space

Nest Flexbox for complex layouts; set overflow: 'auto' for scrollable regions

Navigation

**For SPA pages, use react-router-dom, NOT next/link.**

// ❌ Wrong

import Link from 'next/link';

// ✅ Correct

import { Link, useNavigate } from 'react-router-dom';

Access navigate from stores: useGlobalStore.getState().navigate?.('/settings');

Desktop File Sync Rule

Files with a .desktop.ts(x) variant must be edited in sync. Drift causes blank pages in Electron.

Base file (web)

Desktop file (Electron)

desktopRouter.config.tsx

desktopRouter.config.desktop.tsx

componentMap.ts

componentMap.desktop.ts

**After editing any .ts/.tsx:** glob for <filename>.desktop.{ts,tsx} in the same directory. If found, apply the equivalent sync-import change.

Routing Architecture

Route Type

Use Case

Implementation

Next.js App Router

Auth pages

src/app/[variants]/(auth)/

React Router DOM

Main SPA

desktopRouter.config.tsx + .desktop.tsx (pair)

Router utilities:

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

element: dynamicElement(() => import('./chat'), 'Desktop > Chat');

element: redirectElement('/settings/profile');

errorElement: <ErrorBoundary />;

Common Mistakes

Mistake

Fix

Using next/link in SPA

Use react-router-dom Link

Using antd directly

Use @lobehub/ui/base-ui first, then @lobehub/ui

createStyles for static styles

Use createStaticStyles + cssVar

Editing only desktopRouter.config.tsx

Must edit both .tsx and .desktop.tsx

Using margin for flex spacing

Use gap prop on Flexbox

Accessing zustand store without selector

Use selectors to access store data (see zustand skill)

Text or icon-text actions built with Flexbox/Text + onClick

Use Button type={'text'} size={'small'} with icon when needed