Percerno Skillsbeta
← everything it can do · engineering

Vercel Composition Patterns TEXT

Provides guidelines and code examples for refactoring React components using composition patterns like compound components and context providers to eliminate boolean prop proliferation. It also covers specific React 19 API changes such as replacing forwardRef with use().

9 uses this weeksource vercel-labslicence MIT
Quality gate: PASS · better answers · measured 2026-10-23
Blind-judged against the bare model on 2 requests: average lift +6.5 points (specificity, structure, method, fit).
won 2/2, lift +6.5, tokens ×23.7

Try asking

Say it in your own words; the assistant finds this recipe by itself. Examples:

“Refaktorér denne Card-komponent, så den ikke bruger boolean props til at styre udseendet.”
“Hvordan bygger jeg et Tabs-komponent med compound components og fælles context?”
“Mit Accordion-komponent har for mange props til at ændre adfærd; vis mig hvordan man bruger eksplicitte varianter.”
“Refactor this Button component to remove the isPrimary and isDisabled boolean props using composition patterns.”
“How do I structure a Tabs component using compound components and shared context?”
“My Accordion component has too many props for behavior customization; show me how to use explicit variants instead.”
Try this skill from Claude, ChatGPT or a chat on your own page. Free plan, no credit card.Get started free

Good for

reactcompositioncompound-componentsrefactoringcomponent-librarycontextapi-designreact19

Not for

Do not use this skill for general CSS styling, state management library selection (like Redux or Zustand), or performance optimization unrelated to component structure. It is not for debugging runtime errors or setting up build tools.

Details

When it is the right choice

Use this skill when refactoring existing React components that suffer from too many boolean props or conditional rendering logic. It is appropriate when designing new, flexible component APIs for a design system or library. It is also the right choice when updating codebases to adopt React 19 specific composition changes.

The full recipe the assistant reads

React Composition Patterns

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.

When to Apply

Reference these guidelines when:

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

Rule Categories by Priority

Priority Category Impact Prefix
1 Component Architecture HIGH architecture-
2 State Management MEDIUM state-
3 Implementation Patterns MEDIUM patterns-
4 React 19 APIs MEDIUM react19-

Quick Reference

1. Component Architecture (HIGH)

  • architecture-avoid-boolean-props - Don't add boolean props to customize behavior; use composition
  • architecture-compound-components - Structure complex components with shared context

2. State Management (MEDIUM)

  • state-decouple-implementation - Provider is the only place that knows how state is managed
  • state-context-interface - Define generic interface with state, actions, meta for dependency injection
  • state-lift-state - Move state into provider components for sibling access

3. Implementation Patterns (MEDIUM)

  • patterns-explicit-variants - Create explicit variant components instead of boolean modes
  • patterns-children-over-render-props - Use children for composition instead of renderX props

4. React 19 APIs (MEDIUM)

⚠️ React 19+ only. Skip this section if using React 18 or earlier.

  • react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()

How to Use

Read individual rule files for detailed explanations and code examples:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Each rule file contains:

  • Brief explanation of why it matters
  • Incorrect code example with explanation
  • Correct code example with explanation
  • Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

Files in this skill (14)
  • AGENTS.md
  • README.md
  • SKILL.md
  • metadata.json
  • rules/_sections.md
  • rules/_template.md
  • rules/architecture-avoid-boolean-props.md
  • rules/architecture-compound-components.md
  • rules/patterns-children-over-render-props.md
  • rules/patterns-explicit-variants.md
  • rules/react19-no-forwardref.md
  • rules/state-context-interface.md
  • rules/state-decouple-implementation.md
  • rules/state-lift-state.md
Where it comes from

Vendored from vercel-labs/agent-skills, commit 063bee94c3f4, path skills/composition-patterns, licence MIT. The upstream licence file ships inside the skill.