react-composition-patterns
Scannednpx machina-cli add skill tech-leads-club/agent-skills/react-composition-patterns --openclawReact Composition Patterns
Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.
When to Apply
Reference these guidelines when:
- Refactoring components with many boolean props
- Building reusable component libraries
- Designing flexible component APIs
- Reviewing component architecture
- Working with compound components or context providers
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Component Architecture | HIGH | architecture- |
| 2 | State Management | MEDIUM | state- |
| 3 | Implementation Patterns | MEDIUM | patterns- |
| 4 | React 19 APIs | MEDIUM | react19- |
Quick Reference
1. Component Architecture (HIGH)
architecture-avoid-boolean-props- Don't add boolean props to customize behavior; use compositionarchitecture-compound-components- Structure complex components with shared context
2. State Management (MEDIUM)
state-decouple-implementation- Provider is the only place that knows how state is managedstate-context-interface- Define generic interface with state, actions, meta for dependency injectionstate-lift-state- Move state into provider components for sibling access
3. Implementation Patterns (MEDIUM)
patterns-explicit-variants- Create explicit variant components instead of boolean modespatterns-children-over-render-props- Use children for composition instead of renderX props
4. React 19 APIs (MEDIUM)
⚠️ React 19+ only. Skip this section if using React 18 or earlier.
react19-no-forwardref- Don't useforwardRef; useuse()instead ofuseContext()
How to Use
Read individual rule files for detailed explanations and code examples:
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md
Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and references
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
Source
git clone https://github.com/tech-leads-club/agent-skills/blob/main/packages/skills-catalog/skills/(architecture)/react-composition-patterns/SKILL.mdView on GitHub Overview
React composition patterns help you build flexible, scalable components by avoiding boolean prop proliferation. They rely on compound components, lifting state, and internal composition to create reusable APIs. The guide covers React 19 API changes and clarifies when not to apply these patterns (e.g., performance-focused tasks).
How This Skill Works
The skill groups guidance into rule categories (architecture, state management, implementation patterns, React 19 APIs). Each rule file includes explanations, incorrect and correct code examples, and references. Teams apply these rules to refactor components, design libraries, and architect consistent APIs.
When to Use It
- Refactoring components with many boolean props
- Building reusable component libraries
- Designing flexible component APIs
- Reviewing component architecture
- Working with compound components or context providers
Quick Start
- Step 1: Read the relevant rule files (e.g., rules/architecture-avoid-boolean-props.md, rules/state-context-interface.md)
- Step 2: Identify boolean props to replace with composition patterns and choose explicit variants or compound components
- Step 3: Refactor incrementally, lift state to providers, and test with existing components
Best Practices
- Prefer explicit variants over boolean modes (architecture-avoid-boolean-props; explicit variant components when appropriate)
- Structure complex components with shared context using compound components (architecture-compound-components)
- Lift state into provider components so siblings can access it (state-lift-state)
- Define a generic state/actions interface for dependency injection (state-context-interface)
- Favor children-based composition over render props where possible (patterns-children-over-render-props)
Example Use Cases
- Refactor a complex Button group into a compound component with shared state via context
- Replace a maze of boolean props in a Menu with explicit variant components (e.g., MenuItem, MenuList)
- Build a small UI library that uses a Context provider to share state across components
- Migrate to React 19 APIs by replacing forwardRef patterns with use() where applicable
- Design a DataTable component with provider-managed state and an injectable API
