What problem does it solve?
It prevents React component APIs from becoming hard to understand and maintain when boolean prop proliferation and tightly-coupled state logic create unmanageable conditional rendering paths.
Core Features & Use Cases
- Replace boolean-prop modes with explicit composition: Use compound components and explicit variants instead of “one component, many boolean states.”
- Lift state into providers: Move state management into provider components so multiple sibling UI pieces can share state and actions without prop drilling.
- Define context contracts for dependency injection: Standardize context as a contract of
state, actions, and meta so UI consumes interfaces rather than specific state implementations.
- Use children for composable structure: Prefer composing with
children over renderX props for clearer, more flexible APIs.
- Align with React 19+ APIs: Follow React 19 guidance such as using
use() rather than useContext() and treating ref as a regular prop instead of relying on forwardRef.
Use cases (examples): Refactoring an editor/composer component with flags like isEditing and isForwarding, designing a reusable component library with compound subcomponents, or updating context usage to a provider-driven architecture compatible with React 19.
Quick Start
Use the vercel-composition-patterns skill to refactor your React component by removing boolean props, introducing explicit variants and compound subcomponents, and moving state behind a provider-driven context contract.
