vercel-composition-patterns

What This Skill Does

The vercel-composition-patterns skill provides a standardized architectural framework for building scalable React applications. It functions as an expert-level linting and design advisor that enforces strict composition patterns over traditional "prop-drilling" or "boolean hell." By implementing compound components, shared context interfaces, and modern React 19 API usage, this skill helps agents refactor messy codebases into highly modular and maintainable component libraries. It is specifically optimized to reduce technical debt caused by overly complex props and tightly coupled components.

Installation

Install this skill via the OpenClaw command-line interface using the following command: clawhub install openclaw/skills/skills/ktaesthetix/vercel-composition-patterns Once installed, the agent will automatically reference the associated rule files when analyzing React component structures in your workspace.

Use Cases

• Refactoring Legacy Code: Systematically dismantle components burdened by excessive boolean props (e.g., isLarge, isBlue, isDisabled) into explicit variant components.
• Building Design Systems: Create flexible component APIs that allow for deep composition, enabling users to inject their own logic via context providers rather than complex render props.
• Modernizing to React 19: Automatically convert forwardRef patterns and traditional context hooks to leverage the simplified React 19 use() APIs.
• Component Library Architecture: Ensuring consistent API design across a large-scale repository, making components easier for both developers and AI agents to extend.

Example Prompts

1. "Look at the ProfileCard component in src/components. It has over ten boolean props; please refactor it to use a compound component pattern instead."
2. "I'm building a complex navigation bar. Can you apply the state-context-interface and architecture-compound-components patterns to make the internal state accessible to nested items?"
3. "Refactor this modal component to use the latest React 19 patterns, specifically removing forwardRef and ensuring we are using the use hook for context access."

Tips & Limitations

• Context is Key: Always define clear, generic interfaces for your state before implementation to ensure future-proofing.
• React 19 Dependency: The react19- prefixed rules are strictly for React 19+. Ensure your project is updated before applying these, or the agent may suggest breaking syntax.
• Prioritize Architecture: When in doubt, defer to the High priority architecture- rules first, as these provide the foundation that makes lower-level patterns effective.