vercel-composition-patterns

Refactor React components with boolean props into compound subcomponents and context providers.

Updated Apr 11, 2026

Search Tags:#react #compound components #render props #react 19 #context providers #state lifting #composition pattern

Ready to run

npx skills add https://github.com/BrunoAlpezdev/lluvia-de-ideas --skill vercel-composition-patterns-brunoalpezdev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/BrunoAlpezdev/lluvia-de-ideas/tree/main/.agents/skills/vercel-composition-patterns
Command: npx skills add https://github.com/BrunoAlpezdev/lluvia-de-ideas --skill vercel-composition-patterns-brunoalpezdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you remove unmaintainable React component complexity caused by boolean prop proliferation by guiding you toward composable, scalable component architecture.

Core Features & Use Cases

Compound component architecture: Build reusable component APIs where subcomponents share state via context instead of props.
State lifting and dependency-injected context: Centralize state in provider components and expose a consistent state/actions/meta interface to interchangeable UIs.
Explicit variants over boolean modes: Replace multi-boolean “mode” components with clear variants (e.g., ThreadComposer, EditComposer) to prevent impossible states.
React 19 API alignment: Apply React 19 practices by using use() instead of useContext() and treating ref as a normal prop.

Quick Start

Use the vercel-composition-patterns skill to refactor a React composer component that has many boolean props into explicit variants using compound components and lifted provider state.

Frequently Asked Questions about vercel-composition-patterns

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

FAQPage Schema

How do I refactor React components to eliminate boolean prop proliferation?▼

Use scalable composition patterns to refactor React components. Replace boolean props with explicit variant subcomponents like ThreadComposer, lift state into context providers exposing a generic state/actions/meta interface, and apply children-based composition for reusable UI.

What is the compound component pattern in React and when should I use it?▼

The compound component pattern builds reusable React APIs where subcomponents share state via context instead of props. Use it when restructuring complex UI into composable subcomponents to eliminate unmaintainable boolean prop complexity and prevent impossible component states.

Does this React refactoring approach work with React 19 context providers?▼

Yes, this approach aligns with React 19 compliance for context providers. It mandates applying the use() hook instead of useContext() for state management and treating ref as a normal prop when building compound component architectures.

How do I migrate React state management to context providers for component reuse?▼

Migrate React state management by lifting state into central provider components and exposing a consistent state/actions/meta context interface. This dependency-injected context allows interchangeable UIs to consume shared state without boolean prop drilling.

What's the best way to prevent impossible states in React component libraries?▼

The best way to prevent impossible states in React component libraries is replacing multi-boolean mode components with clear, explicit variants. By applying compound component architecture and lifted provider state, you ensure only valid state combinations are expressible.