React composition patterns

Workflow

Vercel’s composition guide covers compound components, state ownership, context and React 19 APIs. Its companion rule files provide concrete component architecture examples.

Run this command in your project after reviewing the instructions and access terms. Install complete upstream directories to keep referenced rules and scripts.

npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns --skill vercel-composition-patterns --agent claude-code

Project file: .claude/skills/vercel-composition-patterns/SKILL.md

This brief helps you choose the skill. Read the complete upstream SKILL.md and companion files for its actual instructions.

# React composition patterns (vercel-composition-patterns)
Vercel’s composition guide covers compound components, state ownership, context and React 19 APIs. Its companion rule files provide concrete component architecture examples.

## Use when
- Refactor a component API with many boolean props.
- Design a reusable React component library.

## Required inputs
- React components and their consumers
- Required variants, state ownership and composition constraints

## Prerequisites
- React project source and access to all affected consumers.
- Install the complete upstream rule directory.

## Expected outputs
- Composable component APIs
- Refactored consumers and relevant checks

Source: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/vercel-composition-patterns/SKILL.md