composition-patterns

Refactor React components with boolean prop proliferation into composable structures.

5|Updated Oct 22, 2025

Search Tags:#architecture #state management #react #components #patterns #composition

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: composition-patterns
Source: https://github.com/marchatton/agent-skills/tree/main/.agents/skills/04-develop/00-frontend-general/composition-patterns
Command: npx skills add https://github.com/marchatton/agent-skills --skill composition-patterns-marchatton

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill helps developers avoid common pitfalls in React component design, such as excessive boolean props and complex conditional rendering, leading to more maintainable and scalable codebases.

Core Features & Use Cases

Refactor Boolean Prop Proliferation: Transform components with many boolean flags into more composable structures.
Design Reusable Component APIs: Create flexible and intuitive component interfaces.
Review Component Architecture: Apply best practices for building robust React applications.
Use Case: When building a complex UI element like a message composer, use these patterns to create distinct variants (e.g., ThreadComposer, EditComposer) that share common internal components but have unique behaviors and features, avoiding a single monolithic component with dozens of props.

Quick Start

Apply the composition-patterns skill to refactor a React component that has too many boolean props.

Frequently Asked Questions about 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?▼

React composition patterns address boolean prop proliferation by restructuring monolithic components into distinct variants like ThreadComposer, replacing dozens of props with composable internal components to enhance maintainability.

What are compound components in React architecture?▼

Compound components in React architecture decouple state management and enable flexible APIs, allowing distinct variants to share internal components while avoiding monolithic conditional rendering structures.

How do I decouple state management in scalable React component libraries?▼

Decouple state management in React component libraries by applying composition patterns that separate state logic from UI rendering, creating reusable interfaces without boolean prop proliferation.

When should I use React composition patterns instead of conditional rendering?▼

Use React composition patterns when building complex UI elements requiring distinct variants, replacing conditional rendering and boolean prop proliferation with composable structures for enhanced scalability.

Can I use composition patterns to build reusable React component APIs?▼

Yes, composition patterns provide architectural best practices for designing reusable React component APIs, transforming components with boolean flags into flexible, intuitive interfaces.

What is the best way to avoid monolithic React components in large applications?▼

Avoid monolithic React components by implementing composition patterns to create distinct variants sharing internal components, addressing boolean prop proliferation and complex conditional rendering for scalable codebases.