vercel-composition-patterns

What problem does it solve? React components often accumulate boolean props like isThread or isEditing that create exponential state combinations and unmaintainable conditional logic. This Skill provides structured composition patterns to refactor such components into flexible, maintainable architectures. ## Core Features & Use Cases - Boolean Prop Elimination: Replace prop proliferation with explicit component variants and compound components sharing context. - State Lifting & Dependency Injection: Move state into provider components with generic state/actions/meta context interfaces, decoupling UI from state implementations like useState or Zustand. - React 19 Guidance: Apply modern APIs such as use() instead of useContext() and ref-as-prop instead of forwardRef. - Use Case: When refactoring a message composer with flags like isThread, isEditing, and isForwarding, apply these rules to split it into explicit ThreadComposer, EditComposer, and ForwardMessageComposer variants sharing compound internals. ## Quick Start Refactor this React component that uses boolean props into compound components with a shared context provider following the composition patterns skill.