React Composition

What it does

This skill enables AI agents to assist in building React component APIs through composition, rather than relying on excessive boolean props or configuration. It promotes a modular approach to UI development by allowing developers to assemble smaller, independently meaningful components together. The skill focuses on two key patterns: Compound Components (sharing implicit state via context) and Explicit Variants (creating distinct component modes).

When to use it

• When you're facing complex React components with many boolean props that make the API difficult to manage.
• When you want to create reusable UI elements by composing smaller, specialized components.
• When a component needs different behaviors or visual styles based on distinct modes of operation.
• To refactor existing components away from configuration-heavy approaches towards more composable designs.

Key capabilities

• Compound Components: Creating components that share state through context for coordinated behavior.
• Explicit Variants: Defining separate component variants to represent different states or modes, improving clarity and maintainability.
• Composition over Configuration: Favoring the assembly of smaller components over relying on numerous boolean props to control a single component's behavior.

Example prompts

• "Suggest how I can refactor this Modal component to use compound components instead of many boolean props."
• "Show me an example of creating explicit variants for an Input component with bordered, underlined, and ghost styles."
• “How can I implement a Tabs component using context to manage the active tab?”

Tips & gotchas

• This skill is specifically focused on React development. It will not be helpful for other frontend frameworks or general coding tasks.
• Understanding of React concepts like Context API and forwardRef may be beneficial when applying this skill's suggestions.