composition-patterns

Design React components using compound patterns and shared-state delegation.

31|8|Updated Apr 10, 2026

Search Tags:#react #design system #compound components #boolean props #component refactor #state lifting #render delegation

Ready to run

npx skills add https://github.com/itallstartedwithaidea/agent-skills --skill composition-patterns-itallstartedwithaidea

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Composition Patterns eliminates React “boolean prop explosion” and monolithic component designs by teaching composable interfaces that are easier to extend, test, and maintain.

Core Features & Use Cases

Compound Components: Model related UI families (e.g., tabs with tab panels) so shared implicit state is handled internally.
State Lifting: Place shared cross-component state in the nearest common ancestor to keep behavior consistent across subcomponents.
Internal Composition & Render Delegation: Encapsulate sub-rendering while giving consumers control over layout and ordering without hard-coded flags.

Quick Start

Use the composition-patterns skill to refactor a React component that currently relies on many boolean props into a composable component API with compound subcomponents and delegated rendering.

Frequently Asked Questions about composition-patterns

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

FAQPage Schema

How do I refactor a React god component with too many boolean props into composable subcomponents?▼

To refactor a React god component, you replace boolean prop proliferation with compound component architecture, lifting shared state to the nearest common ancestor and delegating rendering to give consumers layout control. This produces scalable, testable compositional APIs.

What are compound components in React and when should I use them?▼

Compound components in React are an architectural pattern for modeling related UI families like tabs and accordions. Use them when shared implicit state needs internal handling to avoid monolithic structures and untestable state spaces in your component library.

How do I manage shared state across a React component library without hard-coded flags?▼

Manage shared state across a React component library by lifting it to the nearest common ancestor. This state lifting technique keeps behavior consistent across subcomponents, allowing internal composition and render delegation without relying on hard-coded boolean flags.

What is the best way to give React component consumers control over layout and sub-rendering?▼

The best way to give consumers layout control is render delegation and internal composition. This encapsulates sub-rendering while allowing consumers to dictate layout and ordering, eliminating the monolithic structures that make React components hard to maintain.

Does this approach work for refactoring complex React UI elements like selects and accordions?▼

Yes, this approach works specifically for refactoring complex React UI elements like selects, accordions, and tabs. These composition patterns replace untestable state spaces with consumer-controlled layout and shared-state lifting for maintainable interfaces.