# React Components

Guides React components, styling, state locality, layout and render performance.

- Repository: https://github.com/lobehub/lobehub (83676 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add lobehub/lobehub --skill react -g -a claude-code -y`
Codex: `npx skills add lobehub/lobehub --skill react -g -a codex -y`
Cursor: `npx skills add lobehub/lobehub --skill react -g -a cursor -y`
Gemini CLI: `npx skills add lobehub/lobehub --skill react -g -a gemini-cli -y`

## Description

Use for TSX components, UI libraries, styling, state locality, layout, render performance and memoization.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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**                                                                                                                                                                                |

### StyleX

The rest: https://github.com/lobehub/lobehub/blob/HEAD/.agents/skills/react/SKILL.md