skills.rest
SmallAi-API
SmallAi-APICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react

Guides writing TSX components with styling, state locality, layout, and memoization conventions.

Updated Jan 27, 2026
Search Tags:#frontend#react#styling#component design#memoization#tsx#lobehub-ui
One-click install
npx skills add https://github.com/SmallAi-API/smaihub --skill react-smallai-api
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/SmallAi-API/smaihub/tree/main/.agents/skills/react
Command: npx skills add https://github.com/SmallAi-API/smaihub --skill react-smallai-api

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React codebases accumulate inconsistent styling approaches, wrong component imports, misplaced state, and unnecessary memoization. This Skill enforces a single set of conventions for TSX components so every component follows the same styling, import, state, and render-performance rules. ## Core Features & Use Cases - Styling Decision Rules: Chooses between createStaticStyles with cssVar, inline styles, or createStyles based on the scenario, preferring zero-runtime module-level styles. - Component Import Priority: Enforces a strict hierarchy from project components to @lobehub/ui/base-ui, @lobehub/ui, antd, and custom implementations, preventing common mistakes like importing the antd-backed Select instead of the base-ui Select. - State and Render Performance Guidance: Keeps transient state in its smallest owner and treats memo, useMemo, and useCallback as opt-in optimizations justified by profiling rather than defaults. - Use Case: When building a new settings panel, use this Skill to pick base-ui components like Select and Switch, lay out the panel with Flexbox and gap spacing, and avoid premature memoization. ## Quick Start Use the react skill to write a new TSX settings panel component following the project styling and component import conventions.

Frequently Asked Questions about react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between createStaticStyles and createStyles in React?▼

Use createStaticStyles with cssVar for most cases since it is zero-runtime and module-level. Reserve createStyles with token for truly dynamic styling such as JS color functions like readableColor or chroma, and use inline style attributes only for simple one-offs.

Should I import Select from @lobehub/ui or @lobehub/ui/base-ui?▼

Import Select from @lobehub/ui/base-ui. The root @lobehub/ui Select is the antd-backed version, which is a common mistake. The same rule applies to Modal, DropdownMenu, Popover, Switch, Toast, and other components that exist in base-ui.

When should I use memo or useMemo in React components?▼

Treat memo, useMemo, and useCallback as opt-in optimizations, not defaults. Apply them only when the subtree is demonstrably expensive, inputs are stable during parent renders, and profiling identifies the avoided work. Prefer structural fixes like splitting at the update boundary first.

How do I build layouts with Flexbox in @lobehub/ui?▼

Use the Flexbox and Center components from @lobehub/ui with the gap prop for spacing instead of margins, flex={1} to fill available space, and horizontal for row layouts. Set overflow to auto for scrollable regions and nest Flexbox for complex layouts.

When should I split a React component into smaller components?▼

Split a component only to establish a real state, reuse, render-update, or mountable-capability boundary, not just to reduce file size. Extract a custom hook when state transitions and handlers obscure rendering or form a reusable unit.

Related Skills

Explore More Software Engineering Skills→
anaregdesignanaregdesign
1

react-router-prisma-app-architecture

Organize React Router and Prisma projects with a canonical architecture blueprint.

Official
Advanced
OpenSourceAGIOpenSourceAGI
74

compose-atoms

Decompose monolithic React feature viewers into independently mountable capability atoms.

Official
Advanced
OpenSourceAGIOpenSourceAGI
74

ux

Review user-facing flows against LobeHub design values and interaction checklists.

Official
Advanced
mDevsLabsmDevsLabs
1

modal

Create and control modals with imperative APIs in React base-ui projects.

Community
Intermediate