react

SKILL.md

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/ui root 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/.