Vercel Composition Patterns

tl;dr: this skill is the rules file half of vercel-labs/agent-skills — a prioritised checklist for React component architecture. The other half (react-best-practices) covers performance. Use this when the job is API shape and prop ergonomics, not render speed.

What it actually does

SKILL.md (version 1.0.0, 2026-09-09) ships four priority bands. The agent reads the matching rules/<prefix>-*.md file when the user signals one of these jobs:

The HIGH band is the one most agents actually need: architecture-avoid-boolean-props (don’t add a isDisabled / isLoading / variant boolean — extract a variant component or split the API) and architecture-compound-components (share context across <Select.Trigger>, <Select.Options>, <Select.Item> so sibling components can read each other).

The full compiled guide is AGENTS.md at the repo root. Rule files are linked, not pasted, so the agent walks them on demand.

When the agent should load it

The description field enumerates the trigger phrases:

• “Refactoring components with many boolean props”
• “Building reusable component libraries”
• “Designing flexible component APIs”
• “Working with compound components or context providers”

If the user says “build me a Select” or “review this <Button>”, this is the right skill. If they say “this page is slow” or “the bundle is huge”, load react-best-practices instead — that’s the perf half of the same repo.

Install

# installs the whole vercel-labs/agent-skills pack
npx skills add vercel-labs/agent-skills

The npx skills add invocation is what the upstream README documents. If your host does not speak the Agent Skills loader (or you want just this one skill), clone the repo and point the agent at the file:

git clone https://github.com/vercel-labs/agent-skills
# Claude Code / Cursor pick up SKILL.md from:
#   ~/.claude/skills/composition-patterns/SKILL.md
#   .claude/skills/composition-patterns/SKILL.md
# or any path the host's skill loader watches

The published GitHub release for this skill ships as a .skill artifact (zip with SKILL.md + rules/). Unzip into the same path if your host expects that layout.

Gotchas

• Not the perf skill. composition-patterns is for API shape; react-best-practices is for render speed, waterfalls, bundle size. Agents that conflate the two will over-apply rules.
• React 19 band is gated. The skill itself flags: “⚠️ React 19+ only. Skip this section if using React 18 or earlier.” If the user’s package.json pins React 18 or 17, the forwardRef and use() advice will misfire.
• Reference files, not full text in the prompt. SKILL.md tells the agent to read rules/<file>.md on demand. Agents that paste the whole rules tree into context waste tokens and lose the priority ranking.
• AGENTS.md is the compiled source of truth. If SKILL.md and rules/*.md ever drift, AGENTS.md is the one to trust. It is not auto-generated at install time.
• sandbox_test.verdict: untested — we read SKILL.md and the README; we did not run an agent through the rule checklist.

Related: frontend-design (UI Skills) — same shelf, both produce non-generic UI; Refactoring UI Audit — pair this composition skill with the visual audit skill when the agent is rebuilding a component; UI Skills catalog — broader routing index for UI jobs.