vercel-composition-patterns

The vercel-composition-patterns skill provides a rigorous framework for building flexible, maintainable, and scalable React component architectures. It is designed for software engineers and AI coding agents tasked with refactoring complex UIs or establishing architecture in new projects. By prioritizing composition over configuration, this skill helps developers move away from the 'prop drilling' and 'boolean prop proliferation' traps that often make component libraries rigid and difficult to extend as applications grow in complexity.

This skill is particularly effective for teams building reusable component libraries or designing complex interfaces that require deep state synchronization between sub-components. It emphasizes modern React practices, including the effective use of context providers for state management, compound component patterns for intuitive API design, and lifting state to reduce coupling. The guidance also incorporates the latest React 19 API changes, ensuring that the code produced remains compatible with current best practices.

• Architecture: Enforces the use of compound components and composition to replace boolean-heavy configurations.

• State Management: Provides patterns for decoupling implementation details from the UI via context interfaces and state lifting.

• Implementation: Offers concrete strategies for using children composition rather than render props to improve performance and readability.

• React 19 Readiness: Includes specific guidance on modern hooks and replacing legacy patterns like forwardRef with the use() hook where appropriate.

• Prioritization: Categorizes rules by impact (HIGH, MEDIUM, LOW) to help agents prioritize refactoring efforts on foundational architectural changes first.

• Use this skill when refactoring legacy components that have become difficult to manage due to excessive props.

• It is ideal for designing component APIs that need to be highly flexible for different end-user configurations.

• Input for this skill is usually a component file or architecture prompt; the output will be a set of patterns and refactoring suggestions based on the provided rule repository.

• Constraints: Primarily focused on React and Next.js ecosystems; should be used alongside other specialized performance or accessibility skills for full-stack coverage.

• When implementing, prefer the provided rule-based documentation to ensure consistency across large-scale codebases.