vercel-composition-patternsReact 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 ClawdBot CLI:
clawdbot install ktaesthetix/vercel-composition-patternsComposition patterns for building flexible, maintainable React components. Avoid
boolean prop proliferation by using compound components, lifting state, and
composing internals. These patterns make codebases easier for both humans and AI
agents to work with as they scale.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
| -------- | ----------------------- | ------ | --------------- |
| 1 | Component Architecture | HIGH | architecture- |
| 2 | State Management | MEDIUM | state- |
| 3 | Implementation Patterns | MEDIUM | patterns- |
| 4 | React 19 APIs | MEDIUM | react19- |
architecture-avoid-boolean-props - Don't add boolean props to customizebehavior; use composition
architecture-compound-components - Structure complex components with sharedcontext
state-decouple-implementation - Provider is the only place that knows howstate is managed
state-context-interface - Define generic interface with state, actions, metafor dependency injection
state-lift-state - Move state into provider components for sibling accesspatterns-explicit-variants - Create explicit variant components instead ofboolean modes
patterns-children-over-render-props - Use children for composition insteadof renderX props
⚠️ React 19+ only. Skip this section if using React 18 or earlier.
react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()Read individual rule files for detailed explanations and code examples:
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.mdEach rule file contains:
For the complete guide with all rules expanded: AGENTS.md
Generated Mar 1, 2026
A software development team is tasked with modernizing a large-scale React application that has accumulated numerous boolean props across components, leading to maintenance challenges. By applying composition patterns like compound components and context providers, they can reduce prop drilling and improve code readability, making the application more scalable and easier for new developers to onboard.
A SaaS company is developing a reusable component library to ensure consistency across its products. Using this skill, they can design flexible APIs with explicit variants and avoid boolean prop proliferation, enabling faster feature development and easier customization for different client needs while maintaining a clean architecture.
An e-commerce platform's frontend team is facing issues with complex UI components like modals and dropdowns that rely heavily on render props and boolean flags. By implementing state management patterns such as lifting state and decoupling implementation, they can create more maintainable and testable components, improving user experience and reducing bugs during peak shopping seasons.
A financial services firm is upgrading its React application from version 18 to 19 to leverage new APIs. This skill guides them in replacing forwardRef with use() and adopting context interfaces, ensuring a smooth transition that enhances performance and maintainability while complying with strict regulatory coding standards.
A healthcare analytics startup is building a dashboard with dynamic, reusable components for data visualization. By applying compound components and explicit variant patterns, they can create a modular architecture that allows easy integration of new data sources and customization for different healthcare providers, improving scalability and user adoption.
This skill supports SaaS companies by enabling the development of scalable, reusable component libraries that reduce development costs and time-to-market for new features. It helps maintain high code quality, leading to lower churn rates and recurring revenue from long-term client subscriptions.
Agencies and freelancers can use this skill to offer specialized React refactoring and architecture consulting services. By applying these patterns, they deliver more efficient and maintainable codebases for clients, generating revenue through project-based contracts or hourly rates.
Organizations can adopt this skill as part of an open-source toolkit or proprietary enterprise solution, offering it under MIT license for community use or with premium support for businesses. This drives revenue through donations, sponsorships, or paid enterprise licenses with additional features.
💬 Integration Tip
Integrate this skill by first identifying components with boolean prop proliferation in your codebase, then gradually refactoring them using the provided rule files, starting with high-impact architecture rules to ensure a smooth transition.
Automatically update Clawdbot and all installed skills once daily. Runs via cron, checks for updates, applies them, and messages the user with a summary of what changed.
Full desktop computer use for headless Linux servers. Xvfb + XFCE virtual desktop with xdotool automation. 17 actions (click, type, scroll, screenshot, drag,...
Essential Docker commands and workflows for container management, image operations, and debugging.
Tool discovery and shell one-liner reference for sysadmin, DevOps, and security tasks. AUTO-CONSULT this skill when the user is: troubleshooting network issues, debugging processes, analyzing logs, working with SSL/TLS, managing DNS, testing HTTP endpoints, auditing security, working with containers, writing shell scripts, or asks 'what tool should I use for X'. Source: github.com/trimstray/the-book-of-secret-knowledge
Deploy applications and manage projects with complete CLI reference. Commands for deployments, projects, domains, environment variables, and live documentation access.
Monitor topics of interest and proactively alert when important developments occur. Use when user wants automated monitoring of specific subjects (e.g., product releases, price changes, news topics, technology updates). Supports scheduled web searches, AI-powered importance scoring, smart alerts vs weekly digests, and memory-aware contextual summaries.