# Vercel Composition Patterns (agent skill)

> Vercel Composition Patterns is an agent skill (a SKILL.md file) from vercel-labs/agent-skills. React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. It works with Claude Code and has 32,014 GitHub stars across a repository of 4 listed skills.

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. Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals.

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/vercel-labs/agent-skills |
| Skill path | skills/composition-patterns/SKILL.md |
| Skill name | vercel-composition-patterns |
| GitHub stars | 32,014 |
| Installs on skills.sh | 376,734 |
| License | MIT |
| Skills in repo | 4 |
| Plugin marketplace | no |
| Official | yes |
| Works with | Claude Code |
| Category | DevOps & cloud |
| Last commit | Aug 28, 2026 |

## When it triggers

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

## Add this skill

### Claude Code

```sh
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/composition-patterns ~/.claude/skills/vercel-composition-patterns   # personal, or .claude/skills in a project
```

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/composition-patterns .agents/skills/vercel-composition-patterns   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/composition-patterns .cursor/skills/vercel-composition-patterns   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

skills.sh listing: https://www.skills.sh/vercel-labs/agent-skills/vercel-composition-patterns

---

Canonical page: https://appsgit.com/skills/vercel-labs-vercel-composition-patterns
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed nightly.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.