Guidelines for writing consistent React components, choosing the right UI primitives, and applying modular styling.
Install
mkdir -p .claude/skills/react && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/627" && unzip -o skill.zip -d .claude/skills/react && rm skill.zipInstalls to .claude/skills/react
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Develop React components using TSX
- →Select appropriate UI primitives from base-ui or antd
- →Implement styling with createStaticStyles
- →Manage routing with react-router-dom
- →Sync desktop variants for Electron
How it works
The skill enforces a component hierarchy that prioritizes headless base-ui primitives over higher-level wrappers, ensuring consistent styling and state management.
Inputs & outputs
When to use react
- →Create a new UI component
- →Implement component styling
- →Select appropriate UI primitives
- →Refactor component structure
About this skill
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
src/components— project-specific reusable components@lobehub/ui/base-ui— headless primitives. If the component lives here, use it. Do NOT import the same-named root export.@lobehub/ui— higher-level / antd-wrapping components (only when no base-ui equivalent)- antd — only when neither base-ui nor
@lobehub/uiroot provides it - 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 |
|---|---|
Alert (+ AlertProps) | import { Alert, type AlertProps } from '@lobehub/ui/base-ui'; |
Select (+ SelectProps, SelectOption) | import { Select } from '@lobehub/ui/base-ui'; |
Modal (imperative API) | import { createModal, confirmModal, useModalContext, type ModalInstance } from '@lobehub/ui/base-ui'; |
DropdownMenu | import { DropdownMenu } from '@lobehub/ui/base-ui'; |
ContextMenu | import { ContextMenu } from '@lobehub/ui/base-ui'; |
Popover | import { Popover } from '@lobehub/ui/base-ui'; |
ScrollArea | import { ScrollArea } from '@lobehub/ui/base-ui'; |
Switch | import { Switch } from '@lobehub/ui/base-ui'; |
Toast | import { Toast } from '@lobehub/ui/base-ui'; |
FloatingSheet | import { FloatingSheet } from '@lobehub/ui/base-ui'; |
Drawer | import { Drawer } from '@lobehub/ui/base-ui'; |
For Modal specifically, see the dedicated modal skill — use the imperative createModal({ content: … }) pattern over the legacy <Modal open … /> declarative pattern. base-ui has its own ModalHost already mounted in SPAGlobalProvider.
Common slip:
import { Select } from '@lobehub/ui'looks fine but it's the antd-backed Select. Use base-ui Select. Same forModal,DropdownMenu, etc.
@lobehub/ui root — use when base-ui has no equivalent
| Category | Components |
|---|---|
| General | ActionIcon, ActionIconGroup, Block, Button, Icon |
| Data Display | Avatar, Collapse, Empty, Highlighter, Markdown, Tag, Tooltip |
| Data Entry | CodeEditor, CopyButton, EditableText, Form, Input, InputPassword, SearchBar, TextArea |
| Layout | Center, DraggablePanel, Flexbox, Grid, Header, MaskShadow |
| Navigation | Burger, Menu, SideNav, Tabs |
State
Keep transient state in its smallest useful owner. Extract a custom hook when state transitions and handlers obscure rendering or form a reusable unit; do not extract solely because a component has a particular number of hooks.
Split a component only to establish a real state, reuse, render-update, or mountable-capability boundary. Do not split solely to make files smaller. Decomposing a heavy domain feature into host-assembled atoms is owned by compose-atoms.
Render Performance and Memoization
Treat memo, useMemo, and useCallback as opt-in optimizations, not default component wrappers. Before adding one, identify the actual rerender boundary and prefer structural fixes:
- Split at the update boundary.
- Move transient state to its smallest owner.
- Use narrow Zustand selectors and avoid broad subscriptions.
Do not memoize prop-free or trivially rendered components, or a component that normally receives new objects, arrays, functions, or JSX children. Do not use memoization to compensate for state held too high in the tree.
Use memoization only when the subtree is demonstrably expensive or frequently repeated, its relevant inputs are stable during normal parent renders, and profiling or a concrete render-path analysis identifies the avoided work. State that reason in the implementation summary or PR.
Layout
Use Flexbox and Center from @lobehub/ui. See references/layout-kit.md for full props and examples.
- Use
gapinstead ofmarginfor spacing between flex children - Use
flex={1}to fill available space - Nest Flexbox for complex layouts; set
overflow: 'auto'for scrollable regions
Related Skills
ux: loading visuals and user-facing interaction design. Do not use antdSpin/<Spin />.modal: imperative base-ui modal patterns.spa-routes: SPA navigation, route ownership, router configuration, and.desktopvariants.compose-atoms: split a heavy domain feature into mountable capability atoms; each host imports only what it mounts.zustand: store structure and selector conventions.
When not to use it
- →Do not use next/link for SPA navigation
- →Avoid antd Spin component for loading
Prerequisites
Limitations
- →Requires manual sync of desktop variant files
- →Strict import hierarchy must be followed
How it compares
It mandates specific architectural patterns and sync rules for desktop variants that generic React guides do not address.
Compared to similar skills
react side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react (this skill) | 34 | 3mo | No flags | Intermediate |
| zustand | 113 | 3mo | No flags | Intermediate |
| react-component-patterns | 3 | 2mo | No flags | Intermediate |
| zustand-5 | 8 | 8mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by lobehub
View all by lobehub →You might also like
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
react-component-patterns
HoangNguyen0403
Modern React component architecture and composition patterns.
zustand-5
prowler-cloud
Zustand 5 state management patterns. Trigger: When implementing client-side state with Zustand (stores, selectors, persist middleware, slices).
1k-state-management
OneKeyHQ
Jotai state management patterns — atoms, globalAtom, contextAtom, and persistence.
react-router-getting-started
ssrjkk
Getting Started for React-Router: initial setup and first steps
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.