home / Agent Skills / Composition Patterns Skill by @vercel-labs

Composition Patterns Skill by @vercel-labs

FREE

github stars★ 31,188updatedJan 2026repo@vercel-labs

$git clone https://github.com/vercel-labs/agent-skills

The skill is the skills/composition-patterns folder inside that repository. Copy it into the folder your agent loads skills from; check your agent's documentation for where that is.

about Composition Patterns Skill by @vercel-labs

React composition patterns that scale, avoiding boolean prop proliferation via compound components and state lifting.

Extracts compound components from boolean-prop-heavy code
Covers lifting state to reduce prop drilling
Useful when designing flexible, reusable component APIs

our take

A rulebook for structuring React components so they scale: compound components, lifting state, and avoiding the pile of boolean props that makes a component hard to use. It is ranked by priority and includes a section on newer React 19 APIs.

when to use it

A component has grown a long list of boolean props
You are designing a reusable component library
You want an agent to review React code for structural problems

before you install

Opinionated guidance; apply it where reuse justifies the extra structure
The source repository publishes no license, so we link to it rather than host a copy

what's inside

The original SKILL.md is organised into these sections:

When to Apply
Rule Categories by Priority
Quick Reference
1. Component Architecture (HIGH)
2. State Management (MEDIUM)
3. Implementation Patterns (MEDIUM)
4. React 19 APIs (MEDIUM)
How to Use
Full Compiled Document

source and license

Written and maintained by @vercel-labs. No license is published in that repository, so we link to the original and do not host a copy or offer a download. SkillDirectory does not claim authorship: this page adds our own review and links back to the original, and the skill's text belongs to its author.

View the full SKILL.md on GitHub ↗