vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/analsharqy/composition-patterns-2What This Skill Does
The vercel-composition-patterns skill provides a structured framework for architecting scalable, maintainable React components. It moves developers away from the common pitfall of 'boolean prop proliferation'—where components become bloated with excessive flags like 'primary', 'small', 'disabled', 'rounded', etc.—and instead encourages the adoption of industry-standard composition techniques. By leveraging compound components, context providers, and modern React 19 APIs, this skill helps AI agents refactor messy, hard-to-maintain codebases into clean, reusable libraries. It serves as an architectural blueprint, ensuring that as your UI grows, it remains flexible for future feature additions without requiring invasive refactors.
Installation
To install this skill, run the following command in your terminal or within the ClawHub environment:
clawhub install openclaw/skills/skills/analsharqy/composition-patterns-2
Use Cases
This skill is designed for scenarios where React component complexity is becoming unmanageable. Use it when:
- Refactoring "God components" that have dozens of props controlling internal styling and logic.
- Designing a new design system or shared component library where flexibility and extensibility are key.
- Implementing complex state-heavy features that require data to be shared between deeply nested children (e.g., Tabs, Accordions, or Custom Forms).
- Migrating legacy codebases to React 19 standards, specifically utilizing the latest hook APIs like
use(). - Ensuring consistent architectural patterns across large teams to make code easier for developers and AI agents to navigate.
Example Prompts
- "Apply the compound component pattern to my existing Alert component to remove all the boolean styling props and make it more flexible for the team."
- "Review my current React context implementation and suggest improvements based on the 'state-context-interface' pattern to better decouple my logic."
- "Refactor this modal component to use standard composition instead of the current 'renderHeader' and 'renderFooter' prop approach."
Tips & Limitations
- Prioritize the 'Architecture' category first; fixing component hierarchy provides the highest ROI for codebase health.
- Be aware that React 19 rules (like replacing
forwardRef) are specifically for modern environments; if your project is on React 17 or 18, skip the 'react19-' prefixed rules to avoid build errors. - Composition is powerful but can be over-engineered; avoid creating complex compound component structures for simple, leaf-level components that only have one or two use cases.
- Always favor children-based composition over render-props to improve readibility and support standard React patterns.
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-analsharqy-composition-patterns-2": {
"enabled": true,
"auto_update": true
}
}
}