react-composition-patterns_skill

Overview

This skill documents React composition patterns that scale. It helps teams refactor components with boolean prop proliferation, design reusable component libraries, and create flexible, maintainable component APIs. The guidance targets compound components, render props, context providers, and component architecture decisions.

How this skill works

The skill inspects tasks and code related to component APIs and suggests composition-based alternatives to boolean props and ad-hoc toggles. It highlights high-priority architecture rules, medium-priority state management techniques, and practical implementation patterns with concrete rule names and intent. Each rule includes rationale, incorrect and correct examples, and integration guidance for provider-based state and compound components.

When to use it

• Refactoring components that have many boolean props or mode flags
• Designing or extending a component library to be flexible and future-proof
• Reviewing component architecture for scalability and testability
• Implementing compound components that share state via context providers
• Creating explicit variants or API shapes instead of exposing many toggles

Best practices

• Avoid boolean props; prefer composition or explicit variant components
• Lift shared state into a provider so siblings can coordinate without prop drilling
• Define a generic context interface with state, actions, and metadata for dependency injection
• Favor compound components and shared context over scattered render props for complex UIs
• Provide explicit, named subcomponents (variants) rather than single-component mode switches

Example use cases

• Replace a Button with multiple booleans (primary, danger, link) by creating explicit variant components or subcomponents
• Refactor a Modal with show/hide booleans and callbacks into a provider-driven compound Modal with Header, Body, Footer subcomponents
• Build a Tabs system where TabList, Tab, and TabPanel share lifted state via a context provider
• Create a Form library where field state and validation are managed by a Form provider and exposed via hooks and context
• Convert mixed render-prop APIs into clearer children-first compound components for easier composition and readability