From open-agent-hub
Guides React developers in using composition patterns to scale components, avoid boolean props, and design reusable APIs. Covers compound components, context providers, and React 19 changes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/open-agent-hub:composition-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Composition patterns for building flexible, maintainable React components. Avoid
AGENTS.mdREADME.mdmetadata.jsonrules/_sections.mdrules/_template.mdrules/architecture-avoid-boolean-props.mdrules/architecture-compound-components.mdrules/patterns-children-over-render-props.mdrules/patterns-explicit-variants.mdrules/react19-no-forwardref.mdrules/state-context-interface.mdrules/state-decouple-implementation.mdrules/state-lift-state.mdComposition 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.
Reference these guidelines when:
| 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- |
architecture-avoid-boolean-props - Don't add boolean props to customize
behavior; use compositionarchitecture-compound-components - Structure complex components with shared
contextstate-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 accesspatterns-explicit-variants - Create explicit variant components instead of
boolean modespatterns-children-over-render-props - Use children for composition instead
of renderX props⚠️ React 19+ only. Skip this section if using React 18 or earlier.
react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()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:
For the complete guide with all rules expanded: AGENTS.md
npx claudepluginhub guanyang/open-agent-hub --plugin open-agent-hubProvides React composition patterns for refactoring boolean prop-heavy components, compound components, context providers, render props, and React 19 APIs.
Provides React composition patterns to refactor components avoiding boolean prop proliferation, using compound components, render props, context providers, and React 19 APIs. For building flexible libraries.
Provides React composition patterns to avoid boolean prop proliferation using compound components, lifting state, and context providers for flexible, maintainable component APIs.