vercel-composition-patterns

Refactor React components with boolean props into explicit variants and compound components.

Updated Feb 2, 2026

Search Tags:#architecture #context #react #composition #render-props #compound-components

Ready to run

npx skills add https://github.com/Chai-Un/wedding --skill vercel-composition-patterns-chai-un

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/Chai-Un/wedding/tree/main/.agents/skills/vercel-composition-patterns
Command: npx skills add https://github.com/Chai-Un/wedding --skill vercel-composition-patterns-chai-un

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured approach to building scalable React components by avoiding boolean prop proliferation through composition, compound components, and context-driven architectures.

Core Features & Use Cases

Explicit variants: Create dedicated component variants to document intent and reduce conditional logic.
Compound components & context: Design reusable UI pieces that share state via a provider pattern, enabling flexible composition.
Migration guidance: Apply patterns when refactoring large codebases or designing reusable UI libraries, including React 19 API guidance.

Quick Start

Refactor a monolithic React component with boolean props into explicit variant components and a shared context provider to enable flexible composition.

Frequently Asked Questions about vercel-composition-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I avoid boolean prop proliferation in React components?▼

Avoid boolean prop proliferation in React components by refactoring monolithic structures into explicit variants and compound components. This pattern enforces clear API intent and reduces complex conditional rendering logic.

How do I build scalable React component libraries using composition?▼

Build scalable React component libraries using composition by designing compound components that share state via context providers. This architecture enables flexible UI composition without deep prop drilling.

What is the best way to refactor a monolithic React component?▼

The best way to refactor a monolithic React component is to split it into explicit variant components and a shared context provider. This migration eliminates boolean props and enables flexible composition.

Can I use React 19 APIs for context-driven component architecture?▼

Yes, you can use React 19 APIs for context-driven component architecture. The skill provides specific guidance on applying React 19 API usage when designing compound components and context providers.

When should I use compound components instead of explicit variants?▼

Use compound components when you need reusable UI pieces that share state implicitly via a provider pattern. Use explicit variants when you need dedicated component types to document intent and reduce conditional logic.

Does this composition pattern work for large React codebases?▼

Yes, this composition pattern works for large React codebases. It provides migration guidance specifically for refactoring large codebases and building reusable UI libraries to ensure scalable architectures.