vercel-composition-patterns

Refactor React components with boolean props into scalable composition architectures.

1|Updated Apr 22, 2026

Search Tags:#typescript #context #react #composition #component architecture #compound components #react19

Ready to run

npx skills add https://github.com/evandrodevbr/GeminiNexus --skill vercel-composition-patterns-evandrodevbr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/evandrodevbr/GeminiNexus/tree/main/.agent/skills/vercel-composition-patterns
Command: npx skills add https://github.com/evandrodevbr/GeminiNexus --skill vercel-composition-patterns-evandrodevbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers avoid complex, unmaintainable React components caused by excessive boolean props, tightly coupled state, and inflexible APIs by applying scalable composition patterns.

Core Features & Use Cases

Compound Component Design: Build flexible component APIs using shared context and composable child components.
State Architecture Patterns: Separate state management from UI through providers, dependency injection, and reusable context interfaces.
React Architecture Guidance: Improve component libraries and refactors with explicit variants, children composition, and React 19 API patterns.

Quick Start

Use the vercel composition patterns skill to refactor my React component with too many boolean props into a scalable compound component architecture.

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 a React component with too many boolean props?▼

Refactor React components with excessive boolean props by replacing them with scalable composition architectures, utilizing state isolation and explicit variants to build maintainable APIs.

What is the best way to build scalable React component architectures?▼

Scalable React component architectures are built using compound components, shared context, and dependency injection to separate state management from UI and ensure flexible APIs.

Does this React architecture pattern work with React 19?▼

Yes, these React architecture patterns apply modern React 19 component practices, supporting context providers and reusable interfaces for scalable component library design.

When should I use compound components in React?▼

Use compound components in React when you need to decouple tightly coupled state, create flexible child component APIs, and establish explicit variants without relying on complex boolean props.

How do compound components handle state isolation in React?▼

Compound components handle state isolation by leveraging shared context and dependency injection to separate state management logic from the UI rendering layer.