vercel-composition-patterns
An agent skill by vercel-labs, from vercel-labs/agent-skills. Tags: api, design, developer-tools, react, web.
What it does
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.
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add vercel-labs/agent-skills --skill vercel-composition-patternsOr copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/vercel-labs/agent-skills
cp -r agent-skills/skills/composition-patterns ~/.claude/skills/vercel-composition-patternsSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- vercel-labs/agent-skills (all skills from this repository)
- Path
- skills/composition-patterns/SKILL.md
- Branch
- main
- Updated
- 2026-09-19
Related skills
- figma — Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components.
- shadcn-ui — Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization.
- vercel-react-best-practices — js performance optimization guidelines from Vercel Engineering. js code to ensure optimal performance patterns.
- vercel-react-view-transitions — Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`.
- algorithmic-art — js with seeded randomness and interactive parameter exploration.
- api-and-interface-design — Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface.