react-composition-patterns

Standardize React composition patterns to replace boolean props with explicit variants.

Updated Apr 18, 2026

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

Ready to run

npx skills add https://github.com/Srujan0798/NRG --skill react-composition-patterns-srujan0798

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-composition-patterns
Source: https://github.com/Srujan0798/NRG/tree/main/.agents/skills/react-composition-patterns
Command: npx skills add https://github.com/Srujan0798/NRG --skill react-composition-patterns-srujan0798

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Complex React codebases often suffer from boolean prop proliferation and brittle component APIs; this guide consolidates best practices to enable scalable composition and reusable APIs.

Core Features & Use Cases

Explicit variants (ThreadComposer, EditMessageComposer, ForwardMessageComposer) replace boolean-mode components for clearer intent.
State lifting and dependency-injected contexts using generic interfaces decouple UI from state implementations.
Compound components, render-props alternatives, and modern React 19 patterns improve maintainability and extensibility.

Quick Start

Start by identifying boolean-prop heavy components and refactor them into explicit variant components backed by a provider-based state model.

Frequently Asked Questions about react-composition-patterns

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

FAQPage Schema

How do I refactor React components with too many boolean props?▼

Refactor boolean-prop heavy React components into explicit variant components, such as separate ThreadComposer or EditMessageComposer classes, to replace boolean-mode components and express clearer intent. Backing these with a provider-based state model ensures scalable composition.

What is the best way to manage state in compound components without prop drilling?▼

Manage state in compound components by lifting it and using dependency-injected contexts with generic interfaces. This pattern decouples your UI rendering from the underlying state implementations, preventing brittle APIs and improving overall maintainability.

How does React 19 change context provider composition patterns?▼

React 19 changes context provider composition by introducing new API changes that this guide addresses directly. It standardizes modern patterns to improve maintainability and extensibility during migration, replacing older render-props alternatives with structured context-based models.

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

Use compound components when you need flexible, cohesive UI pieces to share implicit state, and use render props for explicit data injection. This guide provides rule-based examples to standardize which pattern fits your architecture for better reusability.

Does this React composition guide require specific external libraries?▼

No, this guide standardizes React composition patterns using native React APIs like context and providers. It focuses on architectural refactoring towards explicit variants and dependency-injected contexts without requiring external dependencies.