React Composition Patterns

What it does

This skill helps AI agents understand and apply React composition patterns for building flexible and maintainable user interfaces. It focuses on avoiding excessive boolean props, utilizing compound components, managing state effectively, and composing component internals. Applying these patterns makes codebases easier to work with, both for humans and AI agents, as they grow in complexity.

When to use it

• When refactoring React components that have many boolean props.
• During the design of reusable component libraries.
• To create flexible APIs for your React components.
• When reviewing the overall architecture of a React codebase.
• When working with compound components or context providers.

Key capabilities

• Provides guidance on avoiding boolean props and using composition instead.
• Offers strategies for structuring complex components with shared context (compound components).
• Suggests techniques for managing state within provider components and defining generic interfaces for dependency injection.
• Recommends creating explicit variant components rather than relying on boolean modes.
• Promotes the use of children for component composition over render props.

Example prompts

• "How can I refactor this React component to avoid using so many boolean props?"
• "What are some best practices for structuring a complex React component with shared context?"
• "Suggest an alternative to render props in this React component."

Tips & gotchas

• Each rule has its own detailed explanation and code examples available in the rules/ directory (e.g., rules/architecture-avoid-boolean-props.md). Refer to these files for more comprehensive guidance.
• This skill is specifically focused on React composition patterns; it does not cover all aspects of frontend development or general coding tasks.