vercel-composition-patterns Skill for Claude: React Composition Patterns

vercel-composition-patterns teaches Claude Vercel's React composition rules: compound components, explicit variants and lifted state instead of boolean props.

Installs: 432K; on skills.sh
Stars: 33.4K; on GitHub
Files: 13; besides SKILL.md
Updated: Oct 2026; last repo commit

vercel-composition-patterns gives Claude eight rules for building flexible React components. The main idea: do not add boolean props to customize behavior. Use compound components, explicit variant components, context providers and children instead. It triggers when you refactor components with many boolean props, build a component library, or design a reusable API.

It is guidance only, with no scripts. One rule, react19-no-forwardref, applies only to React 19 and later, and the skill says to skip it on React 18 or earlier.

Good for

React developers refactoring components with piles of boolean props
Teams building a shared component library
Reviewers checking component architecture

Install vercel-composition-patterns

Claude Code

Copy this prompt.

Install the vercel-composition-patterns skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

When to Apply
Rule Categories by Priority
Quick Reference
1. Component Architecture (HIGH)
2. State Management (MEDIUM)
3. Implementation Patterns (MEDIUM)
4. React 19 APIs (MEDIUM)
How to Use
Full Compiled Document

Key facts

Author: vercel
Installs on skills.sh: 431,950 as of 2026-11-02
GitHub stars: 33,354 for the whole vercel-labs/agent-skills repo
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass
What is inside: 14 files: SKILL.md, AGENTS.md (full compiled guide), README.md, metadata.json and 10 files in rules/ (8 rules plus a section list and template)
Needs: Nothing; it is guidance for React code
Last commit to the repo: 2026-10-28

What it includes

Use composition, not boolean props (high priority)
Do not add boolean props to change behavior.
Try: “Refactor this Button, it has 9 boolean props.”
Read · architecture-avoid-boolean-props
Structure complex components with shared context
High priority.
Read · architecture-compound-components
Only the provider knows how state is managed
Medium priority.
Read · state-decouple-implementation
A generic interface with state, actions and meta
Medium priority.
Read · state-context-interface
Move state into providers for sibling access
Medium priority.
Read · state-lift-state
Explicit variant components instead of modes
Medium priority.
Read · patterns-explicit-variants
Use children, not renderX props
Medium priority.
Read · patterns-children-over-render-props
React 19+: skip forwardRef, use use() over useContext()
Medium priority. Skip on React 18 or earlier.
Read · react19-no-forwardref

From the official docs

Questions

What does vercel-composition-patterns do?

It gives Claude Vercel's rules for React component composition: avoid boolean props, use compound components and context, and use explicit variants. It applies them when you refactor or design components.

How do I install vercel-composition-patterns?

Use the install box at the top of this page. Vercel's agent-skills README documents installing the whole repo with npx skills add vercel-labs/agent-skills.

Does it need React 19?

No. Only the react19-no-forwardref rule needs React 19 or later. SKILL.md says to skip that section on React 18 and earlier.

Does it change my code by itself?

No. It is a rule set that shapes how Claude writes or reviews components. It bundles no scripts.

Where are the rule details?

Each rule has its own file in rules/ with an incorrect and a correct example. AGENTS.md has the full compiled guide.

How does it relate to Vercel's other agent skills?

It comes from the vercel-labs/agent-skills repo, which holds several Vercel skills. This one covers composition only.

Is vercel-composition-patterns safe?

It bundles no scripts and only shapes Claude's coding advice. On skills.sh the audits read Gen Agent Trust Hub pass, Socket pass and Snyk pass. Review any code Claude writes.

Information

updated Nov 2, 2026

Repository: vercel-labs/agent-skills
Folder: skills/composition-patterns

vercel-labs/agent-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

vercel-composition-patterns SKILL.md · github.com
vercel-labs/agent-skills README · github.com