react-composition

Recommend React composition patterns to replace boolean props during component refactors.

Updated Mar 26, 2026

Search Tags:#context #react #composition #state-management #compound-components #react19 #boolean-props

Ready to run

npx skills add https://github.com/johnnystefan/test-saas-business --skill react-composition-johnnystefan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-composition
Source: https://github.com/johnnystefan/test-saas-business/tree/main/skills/react-composition
Command: npx skills add https://github.com/johnnystefan/test-saas-business --skill react-composition-johnnystefan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies React composition patterns so teams can break free from boolean prop proliferation, tangled context usage, and brittle state flows that slow down admin and customer products.

Core Features & Use Cases

Composition-first architecture: Favor compound components and shared context over boolean switches so each consumer composes behavior without inflating the API surface.
State management guardrails: Keep state inside provider boundaries, expose typed interfaces for state, actions, and metadata, and lift shared state so sibling components collaborate safely.
Pattern catalog & references: Consult rules/architecture-avoid-boolean-props.md, rules/state-context-interface.md, and the compiled AGENTS.md guide while applying React 19 rule priorities across admin or customer experiences that need flexible APIs.

Quick Start

Use react-composition to refactor the admin dashboard toolbar by replacing boolean flags with compound components and shared state.

Frequently Asked Questions about react-composition

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

FAQPage Schema

How do I scale React component APIs without adding boolean props?▼

To scale React component APIs without boolean prop proliferation, replace boolean flags with compound components and shared context. This composition-first approach lets each consumer compose behavior independently, keeping the API surface clean and maintainable during refactors.

What is the best way to manage shared state across sibling React components?▼

The best way to manage shared state across sibling React components is lifting state into shared context providers. Keep state inside provider boundaries and expose typed interfaces for state, actions, and metadata so siblings collaborate safely without tangled state flows.

How do I refactor a React toolbar using compound components?▼

To refactor a React toolbar using compound components, replace conditional boolean switches with composable elements. Apply architecture, state management, and implementation pattern guidelines to arrange the toolbar so consumers assemble behavior without inflating the component's API surface.

Does this React composition approach work with React 19 APIs?▼

Yes, this React composition approach works with React 19 APIs. The guidelines include specific React 19 rule priorities for applying compound components, shared context providers, and typed state interfaces across admin and customer product experiences.

When should I avoid using boolean props in React components?▼

You should avoid using boolean props in React components when multiple flags overlap or create conditional rendering chaos. If consumers need varied combinations of behavior, switching to compound components prevents brittle state flows and keeps the API scalable.