Description
react is an agent skill from the LobeHub repository with a writing guide for TSX components. It covers styling, component choice, layout, state placement, render performance and memoization. For styling, the guide sets a priority order. Most cases use createStaticStyles with cssVar, which has zero runtime cost and sits at module level. A simple one-off uses an inline style attribute. Only truly dynamic values, such as a color computed by a JavaScript function like readableColor or chroma, call for something else, and createStyles with a token is the last resort. For components, it sets a priority too. Components in src/components are the project's own reusable pieces. Next comes @lobehub/ui/base-ui, the headless primitives, and the guide warns not to import a same-named root export when the component is in base-ui. After that come the higher-level @lobehub/ui components, then antd only when neither provides the component, and a custom implementation as the last resort. If the assistant is unsure what exists, the skill says to search the existing code or check the installed @lobehub/ui package. It is aimed at contributors who write or change React components in the LobeHub codebase, so that new UI reuses what is already there. The skill passes Gen Agent Trust Hub, Socket and Snyk on skills.sh. Install it with npx skills add https://github.com/lobehub/lobehub --skill react.…
Highlights
- Styling priority: createStaticStyles with cssVar first
- Component priority: project, base-ui, @lobehub/ui, antd, then custom
- Covers layout, state locality and render performance
- Warns against importing same-named root exports over base-ui
Ratings & Reviews
No ratings yet
Be the first to rate react.
People also visit
react FAQ
Which styling approach comes first?
createStaticStyles with cssVar, which has no runtime cost. Inline styles and createStyles come after it for narrower cases.
Which component library should I use?
Check src/components first, then @lobehub/ui/base-ui, then @lobehub/ui, then antd, and write a custom component only as a last resort.
What if I am not sure a component exists?
Search the existing code, or look in node_modules/@lobehub/ui for the installed components.
How do I install it?
Run npx skills add https://github.com/lobehub/lobehub --skill react.
Which security audits does it have?
On skills.sh, Gen Agent Trust Hub, Socket and Snyk all pass.
What are the best react alternatives?
Popular alternatives to react include modal, zustand and radix-ui-design-system. See all react alternatives