react-composition
React composition patterns for scalable component architecture. Use when refactoring components with boolean prop proliferation, building flexible component libraries, designing reusable component APIs, or working with compound components and context providers.
Why use this skill?
Learn to scale your React application by replacing boolean prop proliferation with compound components and clean composition patterns. Refactor your UI today.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/react-compositionWhat This Skill Does
The react-composition skill is a strategic architectural assistant designed to guide developers through the refactoring of complex, brittle React components. It focuses on replacing the common anti-pattern of 'boolean prop proliferation'—where components become monolithic and unmanageable due to an excessive number of flags like isEditing, isThread, or isLarge—with robust, scalable design patterns. By leveraging compound components, context-based state management, and clear component boundaries, this skill helps you transform opaque, conditional-heavy UI code into modular, readable, and highly reusable design systems. It acts as an architectural consultant that provides best-practice implementation patterns to ensure your component tree remains maintainable as your codebase grows.
Installation
To integrate this skill into your environment, run the following command in your terminal:
npx clawhub@latest install react-composition
This will pull the necessary documentation and pattern templates into your workspace, allowing the OpenClaw agent to offer contextual advice and code snippets based on established composition standards.
Use Cases
This skill is essential in several high-leverage scenarios:
- Refactoring Legacy Code: When you encounter components exceeding 200 lines with deep nested ternary operators or excessive prop drilling.
- Building Design Systems: When creating a library of base UI components (e.g., Modals, Forms, or Navbars) that need to be flexible enough for different consuming services.
- Complex State Management: When sub-components need to share state without passing props through multiple intermediary layers (using the Context Interface pattern).
- Scalable UI Architecture: When you need to design an API that allows users of your component to swap out or reorganize sub-sections (e.g., Composer.Footer vs Composer.Header) without modifying the parent component.
Example Prompts
- "Analyze this component; it has six boolean props and it's becoming impossible to maintain. Can you refactor it using the compound component pattern?"
- "I need to build a reusable Modal system that allows for custom headers and footers. How should I structure the Context Provider and export the sub-components?"
- "Is it better to use a render prop or composition for this dropdown menu? Please explain the tradeoffs based on the React composition guidelines."
Tips & Limitations
When applying these patterns, remember that composition is a tool, not a universal requirement. Over-engineering simple components can lead to unnecessary boilerplate. Aim for 'just enough' abstraction. A common limitation is that excessive use of Context can make testing more verbose; ensure you have appropriate test wrappers for your Providers. Always prioritize code readability over strict adherence to design purity.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-wpank-react-composition": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.