Does this skill support React 19 features?

Yes, it includes specific rules for React 19, such as moving away from forwardRef and adopting the use() hook for more efficient context consumption.

What is boolean prop proliferation and why avoid it?

Boolean prop proliferation occurs when components grow too complex with numerous true/false flags. Avoiding it through composition makes components more flexible, readable, and easier to extend without breaking existing logic.

When should I use compound components over standard props?

Use compound components when building complex UI elements like tabs, selects, or menus where sub-components need to share state while remaining flexible in their visual layout.

How does this improve AI-assisted coding?

By following standardized composition patterns, the code structure becomes more predictable, allowing AI agents like Claude to understand component relationships and refactor code with higher accuracy.

Vercel Composition Patterns

Name: Vercel Composition Patterns
Author: ByeongminLee

byByeongminLee

•

디자인 도구

Implements scalable React composition patterns to eliminate boolean prop bloat and build maintainable component libraries.

The Vercel Composition Patterns skill empowers Claude to architect high-quality React and Next.js interfaces using advanced structural patterns. It focuses on replacing monolithic components burdened by 'boolean prop proliferation' with flexible compound components and clean context providers. By applying these patterns, developers can create component APIs that are easier to maintain, more intuitive for AI agents to navigate, and fully compatible with the latest React 19 standards, such as utilizing the use() hook over traditional context patterns.

주요 기능

01Implements compound component patterns for complex UI elements

02Decouples state management via specialized context provider interfaces

031 GitHub stars

04Provides specific migration paths for React 19 API changes

05Eliminates boolean prop bloat through structured component composition

06Standardizes component architecture for better AI-assisted refactoring

사용 사례

01Building a reusable, scalable design system or component library

02Modernizing codebase patterns for React 19 and Next.js App Router

03Refactoring legacy components with excessive conditional logic and props

주요 기능

01Implements compound component patterns for complex UI elements

02Decouples state management via specialized context provider interfaces

031 GitHub stars

04Provides specific migration paths for React 19 API changes

05Eliminates boolean prop bloat through structured component composition

06Standardizes component architecture for better AI-assisted refactoring

사용 사례

01Building a reusable, scalable design system or component library

02Modernizing codebase patterns for React 19 and Next.js App Router

03Refactoring legacy components with excessive conditional logic and props