vercel-composition-patterns

The vercel-composition-patterns skill provides a structured approach to building scalable and maintainable React components through composition patterns. It addresses common challenges in component design, such as boolean prop proliferation and tightly coupled state, which can make codebases difficult to manage and extend. By promoting best practices like compound components, render props, and context providers, this skill helps developers create flexible and reusable component architectures that are easier for both humans and AI systems to work with. It also incorporates guidance for React 19 API changes, ensuring modern compatibility and forward-looking practices.

The skill includes categorized rules that cover component architecture, state management, implementation patterns, and React 19-specific APIs. High-priority rules focus on avoiding boolean props and structuring complex components with shared context, while medium-priority rules address state decoupling, lifting state for sibling access, explicit variant components, and preferring children composition over render props. For React 19, it provides updated guidance on avoiding forwardRef and using use() instead of useContext(). Each rule is documented with explanations, incorrect and correct code examples, and additional references to facilitate practical application.

Targeted at React developers, this skill is particularly useful for teams building reusable component libraries, refactoring legacy components, or designing flexible APIs. It serves as a reference during code reviews, component architecture planning, and library development. By following these patterns, developers can improve code readability, maintainability, and adaptability, making it suitable for both small projects and large-scale applications where consistent, scalable component patterns are essential.