vercel-composition-patterns

What problem does it solve?

This Skill addresses the complexity of building and maintaining React components by providing patterns to avoid prop proliferation and enable flexible composition, making codebases more manageable for both humans and AI.

Core Features & Use Cases

• Component Architecture: Patterns to avoid boolean prop proliferation and utilize compound components effectively.
• State Management: Strategies for decoupling state from UI, defining generic context interfaces, and lifting state into providers.
• Implementation Patterns: Guidance on creating explicit component variants and preferring children over render props.
• React 19 APIs: Updates for React 19, including use() instead of useContext() and treating ref as a regular prop.
• Use Case: Refactor a large, monolithic React component with many conditional props into smaller, composable components using compound component patterns and context providers.

Quick Start

Apply the vercel-composition-patterns skill to refactor the Composer component to use explicit variants and compound components.