react
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.
Profile →npx skills add lobehub/lobehub --skill react --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 | | ------------------------------------------ | ---------------------------------------------------------
- Styling
- Component Priority
- @lobehub/ui/base-ui — always prefer for these
- @lobehub/ui root — use when base-ui has no equivalent
- Loading indicators
- State
- Layout
- Navigation
- Desktop File Sync Rule
- Routing Architecture
- Common Mistakes
What does the react skill do?
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.
How do I install it?
Run `npx skills add lobehub/lobehub --skill react --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.