Agent skill · software engineering · lobehub
react
Use for TSX components, UI libraries, styling, state locality, layout, render performance and memoization.
Why this skill is useful
Provides specific component usage patterns and styling conventions for LobeHub's React components that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 81,352 stars on the source repository.
What this skill does
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 nodemodules/@lobehub/ui/es/index.mjs and nodemodules/@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: … }) pa …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills lobehub/react--bb8c23