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.
Security Assessment
About vercel-composition-patterns
Vercel Composition Patterns is a React architecture guide focused on building flexible, maintainable components that scale for both human and AI-assisted development. It targets a specific, recurring problem: boolean prop proliferation, where props like isThread, isEditing, and isDMThread multiply the possible states of a component and create unmaintainable conditional logic. The remedy it teaches is composition, replacing boolean modes with explicit variant components, compound components, and lifted state.
The skill organizes eight rules into four priority tiers: Component Architecture (avoiding boolean props, using compound components with shared context), State Management (decoupling state from UI so the provider is the only place that knows how state is managed, defining generic context interfaces for dependency injection, and lifting state into providers for sibling access), Implementation Patterns (explicit variant components and preferring children over render props), and React 19 APIs (dropping forwardRef and using use() instead of useContext()). Each rule file pairs an explanation with incorrect and correct code examples, and a compiled AGENTS.md document expands all rules into a single guide.
It is aimed at frontend engineers refactoring components with many boolean props, building reusable component libraries, designing flexible component APIs, or reviewing component architecture, with the React 19 tier explicitly gated for teams on React 19 or later. This is a benign, read-only coding-convention reference distributed as part of the Supabase repository's .claude/skills directory, containing documentation and example code only.
FAQ
What problem do these patterns primarily solve?
They target boolean prop proliferation. Adding boolean props to customize behavior doubles possible states with each flag and creates unmaintainable conditional logic; the skill replaces that with composition using explicit variants and compound components.
Do I need React 19 to use this skill?
Only for the React 19 API tier (dropping forwardRef, using use() instead of useContext()). The document explicitly notes these patterns should be skipped on React 18 or earlier; the architecture, state, and implementation rules apply regardless of version.
How are the rules organized?
Into four priority tiers: Component Architecture (HIGH), State Management (MEDIUM), Implementation Patterns (MEDIUM), and React 19 APIs (MEDIUM). Each rule lives in its own file with incorrect and correct examples, and AGENTS.md compiles them all.
What is the recommended alternative to render props?
Prefer composing children over renderX props, and structure complex components as compound components with a shared context so each subcomponent reads shared state from context rather than through prop drilling.
All Files
10 filesInstall vercel-composition-patterns
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
supabase/supabase