react-composition-patterns

Refactor boolean-prop React components into compound components with provider-based state.

Updated Mar 29, 2026

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

Ready to run

npx skills add https://github.com/oiagorodrigues/qcontabil --skill react-composition-patterns-oiagorodrigues

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-composition-patterns
Source: https://github.com/oiagorodrigues/qcontabil/tree/main/.cursor/skills/react-composition-patterns
Command: npx skills add https://github.com/oiagorodrigues/qcontabil --skill react-composition-patterns-oiagorodrigues

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.

Core Features & Use Cases

Avoid boolean prop proliferation by using compound components, lifting state, and composing internals.
Promote reusable UI libraries by decoupling state from UI and enabling context-driven composition.
Real-world scenarios include refactoring large codebases to explicit variants (ThreadComposer, EditMessageComposer) and building scalable component APIs.

Quick Start

Start by replacing boolean props with explicit variant components and a shared provider to manage state.

Frequently Asked Questions about react-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 by refactoring components into explicit variant components and shared providers, decoupling state from the UI to enable context-driven composition and maintainable architecture.

What is the best way to scale React apps with maintainable UI architecture?▼

Scaling React apps requires applying composition patterns like compound components and context interfaces, lifting state to decouple it from the UI, and replacing boolean flags with explicit variants for a flexible codebase.

How do I decouple state management from UI components in React 19?▼

Decouple state management from UI in React 19 by using provider-based state management and context interfaces, ensuring components remain decoupled from state logic and enabling context-driven composition.

When should I use compound components instead of render props in React?▼

Use compound components instead of render props when building explicit variants and shared context providers, following React 19 API guidance to avoid render props where unnecessary and ensure scalable component APIs.

Does this React composition approach work without external state management libraries?▼

Yes, this approach uses built-in React context interfaces and provider-based state management to decouple state from the UI, requiring no external dependencies or state management libraries to scale effectively.

Why does my React component API become hard to maintain as it scales?▼

React component APIs become hard to maintain when relying on boolean prop proliferation; refactoring to explicit variant components and lifting state via shared providers creates a decoupled, maintainable architecture.