Vercel Composition Patterns

What it does

This skill provides guidance and patterns for building flexible and maintainable React components. It focuses on avoiding issues like excessive boolean props by utilizing techniques such as compound components, state lifting, and component composition. Ultimately, this helps create codebases that are easier to understand and work with, both for human developers and AI agents.

When to use it

• When refactoring existing components with numerous boolean props.
• During the development of reusable component libraries.
• To design flexible APIs for React components.
• For reviewing the overall architecture of your component structure.
• When working directly with compound components or context providers.

Key capabilities

• Component Architecture: Guidelines to avoid boolean props and utilize shared context in complex components (e.g., architecture-avoid-boolean-props, architecture-compound-components).
• State Management: Techniques for decoupling state implementation, defining generic interfaces with state/actions/meta, and lifting state into provider components (state-* rules).
• Implementation Patterns: Recommendations like using explicit variant components instead of boolean modes and favoring children over render props (patterns-* rules).
• React 19 APIs (Optional): Guidance on utilizing new React 19 features, such as avoiding forwardRef and using use() instead of useContext(). Note: Only applicable for React 19 or later.

Example prompts

• "How can I refactor this component to avoid so many boolean props?"
• "What's the best way to structure a complex component with shared context?"
• "Show me an example of using children instead of render props in React."
• “Explain the architecture-compound-components rule.”

Tips & gotchas

• The skill provides detailed explanations and code examples within individual rule files (e.g., rules/architecture-avoid-boolean-props.md). Refer to these for deeper understanding.
• The "React 19 APIs" section is only relevant if you are using React version 19 or later.