An expert-level framework for building scalable React components using advanced composition techniques to eliminate boolean prop proliferation.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install composition-patterns
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install composition-patterns using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is React Composition Patterns?
React Composition Patterns is a comprehensive technical guide and skill set designed to help developers build maintainable, flexible UI components. By focusing on compound components, shared context, and explicit variants, this Openclaw Skills resource provides the blueprint for avoiding common pitfalls like prop drilling and state trapping. It empowers teams to create component APIs that are self-documenting and resilient to changing requirements through inversion of control and clean separation of concerns.
React Composition Patterns Use Cases
- Refactoring complex components that have become unmanageable due to excessive boolean props.
- Developing robust component libraries and design systems that require high flexibility.
- Building sophisticated UI modules like forms, dialogs, and cards with shared internal state.
- Decoupling UI presentation logic from global or local state management implementations.
How React Composition Patterns Works
- Analyze component structures to identify boolean prop proliferation and state coupling.
- Implement the Provider pattern to encapsulate shared state, actions, and metadata interfaces.
- Create compound subcomponents that consume the shared context using the use() hook or context consumers.
- Design explicit variant components for specific use cases instead of relying on conditional flags.
- Apply children-based composition to allow consumers to define the visual structure while maintaining functional integrity.
React Composition Patterns Setup
To integrate these patterns into your workflow, install the skill via the Openclaw Skills CLI:
npx clawhub@latest install composition-patterns
React Composition Patterns Data Schema & Taxonomy
The skill organizes architectural knowledge into specialized rule sets for automated guidance:
| Component | Reference File | Focus Area |
|---|---|---|
| Boolean Logic | rules/architecture-avoid-boolean-props.md |
Reducing state complexity |
| Compound Components | rules/architecture-compound-components.md |
Context-based composition |
| Interface Design | rules/state-context-interface.md |
State/Actions/Meta contracts |
| State Isolation | rules/state-decouple-implementation.md |
UI/State implementation decoupling |
| Component Variants | rules/patterns-explicit-variants.md |
Named component use cases |
React Composition Patterns Advanced Features
- Generic context interfaces enabling seamless dependency injection for state and actions.
- Lifted state patterns that allow components outside the immediate visual hierarchy to interact with the provider.
- Namespace-based component exports for clean, intuitive API consumption (e.g., Composer.Header, Composer.Input).
- Advanced implementation of children composition over render props for structural flexibility.
SKILL.md
Loading
Related Openclaw Skills
Compare Uniswap Pools
Analyze and rank Uniswap liquidity pools across versions and fee tiers to find the most profitable trading or liquidity provision opportunities.
Command Creator
A developer-focused utility for generating reusable slash commands and structured markdown workflows for AI coding agents.
Code Review Checklist
A multi-dimensional framework for AI agents to conduct rigorous code reviews covering security, performance, correctness, and maintainability.
Clear Writing
A specialized technical writing assistant for Openclaw Skills that produces concise, high-force prose for documentation, APIs, and reports.
Configure x402 Micropayments
A specialized skill to configure HTTP-native micropayments for AI agents using the x402 protocol and USDC on the Base network.
Context-Driven Development
Transform project context into a managed artifact to ensure consistent AI behavior and seamless team alignment.
Featured*
