AI Skill

Official

Review

Audit score 70

vercel-composition-patterns

vercel-labs/agent-skills

React composition patterns to scale components without boolean prop proliferation.

What is vercel-composition-patterns?

A guide to building flexible, maintainable React components using composition patterns like compound components, context providers, and render props. Use when refactoring components with too many boolean props, designing reusable component libraries, or architecting scalable component APIs. Includes React 19 API updates.

Avoid boolean prop proliferation by composing component internals
Structure complex components using compound components and shared context
Decouple state management with provider-based patterns
Create explicit variant components instead of boolean modes
Lift state into providers for sibling component access
Use children composition over render props patterns

How to install vercel-composition-patterns

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns

Prerequisites

React 16.8+ (hooks support)
React 19+ for react19-* rules (optional)

Claude Code

Cursor

Windsurf

Cline

How to use vercel-composition-patterns

1.Review the rule categories by priority: Component Architecture (HIGH), State Management (MEDIUM), Implementation Patterns (MEDIUM), React 19 APIs (MEDIUM)
2.Read individual rule files in rules/ directory matching your use case (e.g., architecture-avoid-boolean-props.md)
3.Study the incorrect and correct code examples in each rule file
4.Apply the pattern to your component or library design
5.For complete details, consult AGENTS.md

Use cases

Good for

Refactoring a button component with 10+ boolean props into a compound component API
Building a reusable form library with flexible field composition
Designing a modal/dialog system with context-based state management
Converting render-prop patterns to children-based composition
Migrating React 18 components to React 19 using use() instead of forwardRef

Who it's for

React component library authors
Frontend architects designing scalable component systems
Teams refactoring large component codebases
Developers building flexible, reusable UI APIs

vercel-composition-patterns FAQ

When should I use compound components vs. context providers?

Use compound components for tightly-coupled UI elements that share state (e.g., Tabs, Accordion). Use context providers for decoupling state management from component structure, especially when multiple sibling components need access to shared state.

Do I need React 19 to use these patterns?

No. Most patterns work with React 16.8+. The react19-* rules are optional and only apply if you're using React 19; skip them for React 18 or earlier.

How do I know if my component has too many boolean props?

If you have 3+ boolean props controlling different behaviors or variants, consider refactoring with compound components or explicit variant components instead.

Can I use these patterns with TypeScript?

Yes. These patterns work with TypeScript and can improve type safety by using generic interfaces for context and explicit component APIs.

Full instructions (SKILL.md)

Source of truth, from vercel-labs/agent-skills.

name: vercel-composition-patterns description: 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. license: MIT metadata: author: vercel version: '1.0.0'

React Composition Patterns

Composition 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.

When to Apply

Reference these guidelines when:

Refactoring components with many boolean props
Building reusable component libraries
Designing flexible component APIs
Reviewing component architecture
Working with compound components or context providers

Rule Categories by Priority

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-`

Quick Reference

1. Component Architecture (HIGH)

architecture-avoid-boolean-props - Don't add boolean props to customize behavior; use composition
architecture-compound-components - Structure complex components with shared context

2. State Management (MEDIUM)

state-decouple-implementation - Provider is the only place that knows how state is managed
state-context-interface - Define generic interface with state, actions, meta for dependency injection
state-lift-state - Move state into provider components for sibling access

3. Implementation Patterns (MEDIUM)

patterns-explicit-variants - Create explicit variant components instead of boolean modes
patterns-children-over-render-props - Use children for composition instead of renderX props

4. React 19 APIs (MEDIUM)

⚠️ React 19+ only. Skip this section if using React 18 or earlier.

react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()

How to Use

Read individual rule files for detailed explanations and code examples:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Each rule file contains:

Brief explanation of why it matters
Incorrect code example with explanation
Correct code example with explanation
Additional context and references

Full Compiled Document

vercel-labs/agent-skills

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".

60k installs