composition-patterns

Name: composition-patterns
Availability: InStock
Author: kyle-deprow

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

Updated Mar 21, 2026

Search Tags:#context #react #composition #state-management #compound-components #component-architecture

Ready to run

npx skills add https://github.com/kyle-deprow/ai_scaffolding --skill composition-patterns-kyle-deprow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: composition-patterns
Source: https://github.com/kyle-deprow/ai_scaffolding/tree/main/skills/composition-patterns
Command: npx skills add https://github.com/kyle-deprow/ai_scaffolding --skill composition-patterns-kyle-deprow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Boolean prop proliferation in React components leads to tangled code and hard-to-maintain APIs. This Skill guides teams toward scalable composition patterns that enable flexible APIs and reuse.

Core Features & Use Cases

Use compound components to share state via context instead of prop drilling.
Lift state into providers to decouple UI from data management.
Create explicit variants rather than overloading a single component with booleans.

Quick Start

Refactor a component with many boolean props into explicit subcomponents and a shared provider-based structure.

Frequently Asked Questions about composition-patterns

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

FAQPage Schema

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

Compound components share state via React context instead of prop drilling. By lifting state into context providers, they decouple UI from data management, allowing flexible, scalable component architectures without passing props through every level.

How do I refactor a React component to use context providers for state management?▼

Refactor a React component by lifting its state into context providers to decouple UI from data management. Replace prop drilling by sharing state explicitly through context, streamlining component design and building flexible APIs for complex UI structures.

What is the best way to create explicit variants instead of overloading a React component with booleans?▼

Yes, you can use render props and context providers to decouple React UI components from data management. These composition patterns enable scalable component architecture by lifting state into providers, eliminating prop drilling, and defining explicit variant strategies.

When should I not use compound components for React state management?▼

You should avoid compound components when a simple React state management solution suffices, as they introduce context provider overhead. If your UI lacks complex shared state or explicit variants, standard prop passing may be more appropriate than scalable composition patterns.