vercel-composition-patterns skill

Vercel's React composition rules: replace boolean-prop sprawl with compound components, lifted state and explicit variants, plus React 19 API changes.

Our verdict Recommended

Small, focused and from Vercel; eight rules with concrete before/after code, useful when component APIs are getting messy.

What the vercel-composition-patterns skill does

This skill steers the agent away from components that grow a new boolean prop for every case (isThread, isEditing, isForwarding) and toward composition. SKILL.md gives a four-band index: component architecture (high impact), state management, implementation patterns and React 19 APIs. Eight rule files sit behind it: architecture-avoid-boolean-props, architecture-compound-components, state-decouple-implementation, state-context-interface, state-lift-state, patterns-explicit-variants, patterns-children-over-render-props and react19-no-forwardref.

Each rule file has front matter with an impact label, an explanation, and an incorrect example followed by a correct one; the Composer example in the boolean-props rule shows a component with many flags being rebuilt as composable pieces. The state rules describe a provider that is the only place knowing how state is managed, with a generic interface of state, actions and meta that different providers can implement. The React 19 section is marked as applying only to React 19 and later. A compiled AGENTS.md of about 22 KB collects the rules in one file. It is a short, focused reference for refactoring and designing component libraries, not a general React guide, and it has no scripts.

Good for

  • Refactoring components that have accumulated many boolean props
  • Designing reusable component libraries and design-system primitives
  • Reviewing component architecture in React codebases

Not for

  • Performance tuning, which belongs to the best-practices skill
  • Teams on React 18 or earlier who want the React 19 section

Depth 2/5

A 2.9 KB index and eight short rule files plus a 22 KB compiled AGENTS.md; solid instructions but no scripts, tests or deeper references.

Dependencies and costs

  • Telemetry: none found.

Security review

No issues found

We scanned all 14 files in this skill folder and read every script. Nothing in it reaches beyond what the skill describes.

A documentation-only skill of React composition patterns (Markdown rules and a metadata JSON). It has no scripts, no allowed-tools frontmatter, and makes no network requests or fetch instructions.

What we checked

The skill folder (14 files) on Oct 29, 2026. We had every file and read every script.

NVIDIA SkillSpector static scan: 1 pattern hits (Memory Poisoning 1). The single hit is the phrase 'clear context' in README.md, which sits in a documentation example, not an instruction to the agent.

A review, not a certification. Skills change after we check them — read the files before installing.

License

MIT — stated in the skill's frontmatter; commercial use allowed.

Can it run unattended?

Not really. It is a reference consulted during refactoring and has no loop or verification of its own.

Alternatives

Emil Kowalski's Skills

emilkowalski/skills

Sixteen design-engineering skills on animation, Apple-style motion, mobile feel, UI libraries and Swift, written by the author of Sonner.

Recommended Check first Depth 3/5

UI Skills

ibelick/ui-skills

Nine skills for design engineers: a UI baseline checklist, accessibility/metadata/motion fixers, a design.md generator, and canvas builders for components.

Recommended Broad access Depth 2/5

Agent Skills (Addy Osmani)

addyosmani/agent-skills

25 engineering-lifecycle skills and 9 slash commands (spec, plan, build, test, review, ship) that make coding agents follow senior-engineer workflows.

Recommended Check first Depth 3/5

Callstack Agent Skills

callstackincubator/agent-skills

React Native skills from Callstack: performance, navigation, TV apps, upgrades, brownfield migration, GitHub Actions builds and device-driven testing.

Recommended Check first Depth 4/5

FAQ

What is vercel-composition-patterns?

It is a Vercel skill with React component composition rules: avoid boolean prop proliferation, use compound components and context providers, prefer explicit variants, and follow React 19 API changes.

How do I install vercel-composition-patterns?

Run npx skills add vercel-labs/agent-skills and select vercel-composition-patterns. It activates when you refactor components with many boolean props or build reusable component APIs.

Is vercel-composition-patterns safe?

It contains only Markdown rules and metadata, with no scripts or network calls, so there is little to go wrong.

Does vercel-composition-patterns work with React 18?

Most rules about compound components, lifted state and explicit variants are version-independent. The react19 rule is explicitly marked as React 19 and later only, so skip it on older versions.

Sources: GitHub repository; install counts from skills.sh via Best Skills (CC BY 4.0). Review based on the published SKILL.md.