React Components
Guides React components, styling, state locality, layout and render performance.
Install
npx skills add lobehub/lobehub --skill react -g -a claude-code -y- Repository
- lobehub/lobehub83.7k
- Category
- Engineering
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 2,908 tokens
- Runs scripts
- No, instructions only
What it does
Use for TSX components, UI libraries, styling, state locality, layout, render performance and memoization.
React Component Writing Guide
Styling
| Scenario | Approach |
|---|---|
| Files already on StyleX, and new SPA styles | stylex.create + @lobehub/ui/stylex/cssVar.stylex / @lobehub/ui/stylex/media.stylex. The SPA compiler is plugins/vite/stylex.ts (@stylexjs/unplugin, prefix lh). Do not copy those token modules into the app. |
| Existing styles not yet migrated | createStaticStyles + cssVar.* (zero-runtime, module-level) |
| Simple one-off | Inline style attribute |
Truly dynamic (JS color fns like readableColor/chroma) | createStyles + token, last resort |
