vercel-composition-patterns

This skill provides a structured framework for applying React composition patterns to ensure maintainable and scalable frontend architectures. It is designed for software engineers, frontend architects, and AI coding assistants tasked with refactoring legacy components or building new design systems. By prioritizing composition over configuration, the skill helps developers move away from boolean prop proliferation—a common source of technical debt—toward more flexible API designs like compound components, render props, and context providers.

• Enables architectural refactoring using patterns such as component decomposition and state lifting into providers.

• Provides specific guidance on implementing the context interface pattern for better dependency injection and state management.

• Includes support for modern React 19 API changes, such as replacing forwardRef with direct props access and leveraging the use() hook for context consumption.

• Categorizes rules by impact—Component Architecture (HIGH), State Management (MEDIUM), and Implementation Patterns (MEDIUM)—to help agents prioritize refactoring efforts.

• Standardizes code structure for compound components, ensuring that sub-components can share internal state while maintaining a clean, declarative API for the end user.

• Ideal for use cases involving the creation of reusable component libraries, design systems, or complex UI widgets like menus, modals, and data grids.

• Input expected: Codebases or specific component files exhibiting high cyclomatic complexity, excessive prop drilling, or hard-to-maintain boolean props.

• Output provided: Guided refactoring steps, implementation of context-based providers, sub-component composition logic, and adherence to React 19 best practices.

• Constraints: The skill is primarily intended for React and Next.js projects; users should be aware that the React 19 specific patterns require a corresponding environment upgrade.

• Practical tips: Always apply the architecture-first approach by identifying state that can be lifted, then define the context interface before implementing individual sub-components.