React
Lay out Lobe Chat–style screens with @lobehub/ui Flexbox and Center instead of raw CSS flex every time.
Overview
React is an agent skill for the Build phase that documents @lobehub/ui Flexbox and Center layout patterns for React frontends such as Lobe Chat.
Install
npx skills add https://github.com/lobehub/lobe-chat --skill reactWhat is this skill?
- Covers @lobehub/ui Flexbox and Center as CSS-flex equivalents in React
- Documents horizontal layout, flex grow, gap, align, and justify props
- Includes classic sidebar + main + footer pattern with theme border tokens
- Shows width/height 100% patterns and overflowY auto for scroll regions
- Center component referenced alongside Flexbox for alignment layouts
Adoption & trust: 891 installs on skills.sh; 78.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a Lobe-style UI but waste time re-deriving flex layouts, scroll regions, and sidebar shells from scratch.
Who is it for?
Indie builders extending or forked from Lobe Chat who already depend on @lobehub/ui and need fast layout scaffolding.
Skip if: Greenfield apps not using @lobehub/ui, native mobile layouts, or teams needing a full component library migration guide.
When should I use this skill?
Implementing or refactoring UI layouts with @lobehub/ui Flexbox and Center in a Lobe Chat or compatible React frontend.
What do I get? / Deliverables
You apply consistent Flexbox and Center compositions—including sidebar, main, and footer splits—with documented props and theme borders.
- Flexbox-based page shells (sidebar, main, footer) matching Lobe patterns
- Reusable layout snippets using documented Flexbox and Center props
Recommended Skills
Journey fit
How it compares
Use as a Lobe UI layout cheat sheet—not generic React hooks or state-management documentation.
Common Questions / FAQ
Who is react for?
Frontend solo builders working with @lobehub/ui and Lobe Chat–like interfaces who want Flexbox and Center layout recipes.
When should I use react?
During Build (frontend) when structuring pages with horizontal stacks, sidebars, scrollable mains, or centered content using @lobehub/ui.
Is react safe to install?
It is layout documentation for a UI package; review the Security Audits panel on this Prism page and treat @lobehub/ui like any other npm dependency.
SKILL.md
READMESKILL.md - React
# Flexbox Layout Components Guide `@lobehub/ui` provides `Flexbox` and `Center` components for creating flexible layouts. ## Flexbox Component Flexbox is the most commonly used layout component, similar to CSS `display: flex`. ### Basic Usage ```jsx import { Flexbox } from '@lobehub/ui'; // Default vertical layout <Flexbox> <div>Child 1</div> <div>Child 2</div> </Flexbox> // Horizontal layout <Flexbox horizontal> <div>Left</div> <div>Right</div> </Flexbox> ``` ### Common Props - `horizontal`: Boolean, set horizontal direction layout - `flex`: Number or string, controls flex property - `gap`: Number, spacing between children - `align`: Alignment like 'center', 'flex-start', etc. - `justify`: Main axis alignment like 'space-between', 'center', etc. - `padding`: Padding value - `paddingInline`: Horizontal padding - `paddingBlock`: Vertical padding - `width/height`: Set dimensions, typically '100%' or specific pixels - `style`: Custom style object ### Layout Example ```jsx // Classic three-column layout <Flexbox horizontal height={'100%'} width={'100%'}> {/* Left sidebar */} <Flexbox width={260} style={{ borderRight: `1px solid ${theme.colorBorderSecondary}`, height: '100%', overflowY: 'auto', }} > <SidebarContent /> </Flexbox> {/* Center content */} <Flexbox flex={1} style={{ height: '100%' }}> <Flexbox flex={1} padding={24} style={{ overflowY: 'auto' }}> <MainContent /> </Flexbox> {/* Footer */} <Flexbox style={{ borderTop: `1px solid ${theme.colorBorderSecondary}`, padding: '16px 24px', }} > <Footer /> </Flexbox> </Flexbox> </Flexbox> ``` ## Center Component Center wraps Flexbox with horizontal and vertical centering. ```jsx import { Center } from '@lobehub/ui'; <Center width={'100%'} height={'100%'}> <Content /> </Center> // Icon centered <Center className={styles.icon} flex={'none'} height={40} width={40}> <Icon icon={icon} size={24} /> </Center> ``` ## Best Practices - Use `flex={1}` to fill available space - Use `gap` instead of margin for spacing - Nest Flexbox for complex layouts - Set `overflow: 'auto'` for scrollable content - Use `horizontal` for horizontal layout (default is vertical) - Combine with `useTheme` hook for theme-responsive layouts --- name: react description: 'LobeHub React component conventions. Use when editing TSX UI, choosing base-ui vs @lobehub/ui vs antd, styling with antd-style, routing, desktop variants, layouts, or component state.' user-invocable: false --- # React Component Writing Guide ## Styling | Scenario | Approach | | ---------------------------------------------------------- | -------------------------------------------------------------- | | Most cases | `createStaticStyles` + `cssVar.*` (zero-runtime, module-level) | | Simple one-off | Inline `style` attribute | | Truly dynamic (JS color fns like `readableColor`/`chroma`) | `createStyles` + `token` — **last resort** | ## Component Priority 1. **`src/components`** — project-specific reusable components 2. **`@lobehub/ui/base-ui`** — headless primitives. **If the component lives here, use it. Do NOT import the same-named root export.** 3. **`@lobehub/ui`** — higher-level / antd-wrapping components (only when no base-ui equivalent) 4. **antd** — only when neither base-ui nor `@lobehub/ui` root provides it 5. **Custom implementation** — true last resort If unsure about available components, search existing code or check `node_modules/@lobehub/ui/es/index.mjs` and `node_modules/@lobehub/ui/es/base-ui/`. ### `@lobehub/ui/base-ui` — always prefer for these | Component | Import