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 - Compound Component Patterns: Replace monolithic components and boolean props with compound components sharing context, so consumers compose exactly the pieces they need. - State Management via Providers: Lift state into provider components with generic state/actions/meta context interfaces, enabling dependency injection and swapping state implementations without changing UI. - React 19 API Guidance: Apply modern React 19 conventions such as ref as a regular prop and use() instead of useContext(). - Use Case: When refactoring a message composer that has grown props like isThread, isEditing, and isDMThread, use this Skill to split it into explicit variants (ThreadComposer, EditComposer) backed by shared compound component internals. ## Quick Start Ask the agent to refactor a React component with many boolean props into compound components using the composition patterns in this skill.