vercel-composition-patterns

What problem does it solve? React components accumulate boolean props like isThread or isEditing that create exponential state combinations and unmaintainable conditional logic. This Skill provides structured rules for replacing prop proliferation with composition, making component libraries easier to maintain and extend. ## Core Features & Use Cases - Boolean Prop Elimination: Replace conditional props with explicit variant components such as ThreadComposer or EditComposer that compose shared internals. - Compound Component Architecture: Structure components with shared context so subcomponents access state without prop drilling. - Dependency-Injectable State: Define generic context interfaces with state, actions, and meta so the same UI works with local useState, Zustand, or server-synced state. - Use Case: When refactoring a messaging composer that has grown to six boolean props, apply these rules to split it into explicit variants backed by provider components, eliminating impossible states. ## Quick Start Ask the AI to refactor a React component with many boolean props into compound components using these composition patterns.