React component patterns

Skill ComeOnOliver/skillshub/skills/HoangNguyen0403/agent-skills-standard/react-component-patterns

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install

npx -y skills add ComeOnOliver/skillshub --skill react-component-patterns

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Modern React component architecture and composition patterns. Use when designing reusable React components, applying composition patterns, or structuring component hierarchies. (triggers: **/*.jsx, **/*.tsx, component, props, children, composition, hoc, render-props)

SKILL.md

1.8 KB, as published. Nobody here has run it

React Component Patterns

Priority: P0 (CRITICAL)

Standards for building scalable, maintainable React components.

Implementation Guidelines

Architecture: Use Compound Components (e.g., <Select><Select.Option /></Select>) for complex state sharing within a UI unit. Use Higher-Order Components (HOC) for cross-cutting concerns (e.g., withAuth).
Composition: Prefer Slots or Render Props (render={(data) => ...}) over deep prop hierarchies. Use children prop for layout-based composition.
Components: Distinguish between Controlled (state from props) and Uncontrolled (local useRef state) components. Favor controlled for form validation.
Props: Use Explicit TS interfaces. Avoid Prop Drilling by leveraging Context API or Zustand for global/deeply nested state.
Boolean Props: Shorthand <Cmp isVisible /> vs isVisible={true}.
Conditionals: Ternary (Cond ? <A/> : <B/>) over && for rendering consistency (prevents 0 rendering).
Function Components: Only hooks. No classes. Small size (<250 lines). One component per file.
Exports: Named exports only. PascalCase naming.

Anti-Patterns

No Classes: Use hooks.
No Prop Drilling: Use Context/Zustand.
No Nested Definitions: Define components at top level.
No Index Keys: Use stable IDs.
No Inline Handlers: Define before return.

References

See references/patterns.md for Composition, Compound Components, and Render Props examples.