Skill · em Publicar e operar

vercel-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.

Procedência

Origem: vercel-labs/agent-skills
Caminho: skills/composition-patterns
Versão fixada: 063bee94c3f4df8453406c830b0a7df0f2860278
Licença: MIT
Espelhado em 25/09/2026
355 mil instalações no skills.sh (lido em 25/09/2026)

Antes de instalar

14 arquivos · 49,2 KB · só texto, nenhum script

Instalar na sua CLI

O comando baixa a versão fixada (commit 063bee9) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/vercel-composition-patterns/.

d=".claude/skills/vercel-composition-patterns"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/rules/_sections.md" "$u/rules/_sections.md" \
  -o "$d/rules/_template.md" "$u/rules/_template.md" \
  -o "$d/rules/architecture-avoid-boolean-props.md" "$u/rules/architecture-avoid-boolean-props.md" \
  -o "$d/rules/architecture-compound-components.md" "$u/rules/architecture-compound-components.md" \
  -o "$d/rules/patterns-children-over-render-props.md" "$u/rules/patterns-children-over-render-props.md" \
  -o "$d/rules/patterns-explicit-variants.md" "$u/rules/patterns-explicit-variants.md" \
  -o "$d/rules/react19-no-forwardref.md" "$u/rules/react19-no-forwardref.md" \
  -o "$d/rules/state-context-interface.md" "$u/rules/state-context-interface.md" \
  -o "$d/rules/state-decouple-implementation.md" "$u/rules/state-decouple-implementation.md" \
  -o "$d/rules/state-lift-state.md" "$u/rules/state-lift-state.md"

Global: instala em ~/.claude/skills/vercel-composition-patterns/.

d="$HOME/.claude/skills/vercel-composition-patterns"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/rules/_sections.md" "$u/rules/_sections.md" \
  -o "$d/rules/_template.md" "$u/rules/_template.md" \
  -o "$d/rules/architecture-avoid-boolean-props.md" "$u/rules/architecture-avoid-boolean-props.md" \
  -o "$d/rules/architecture-compound-components.md" "$u/rules/architecture-compound-components.md" \
  -o "$d/rules/patterns-children-over-render-props.md" "$u/rules/patterns-children-over-render-props.md" \
  -o "$d/rules/patterns-explicit-variants.md" "$u/rules/patterns-explicit-variants.md" \
  -o "$d/rules/react19-no-forwardref.md" "$u/rules/react19-no-forwardref.md" \
  -o "$d/rules/state-context-interface.md" "$u/rules/state-context-interface.md" \
  -o "$d/rules/state-decouple-implementation.md" "$u/rules/state-decouple-implementation.md" \
  -o "$d/rules/state-lift-state.md" "$u/rules/state-lift-state.md"

Codex

Neste projeto: instala em .agents/skills/vercel-composition-patterns/.

d=".agents/skills/vercel-composition-patterns"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/rules/_sections.md" "$u/rules/_sections.md" \
  -o "$d/rules/_template.md" "$u/rules/_template.md" \
  -o "$d/rules/architecture-avoid-boolean-props.md" "$u/rules/architecture-avoid-boolean-props.md" \
  -o "$d/rules/architecture-compound-components.md" "$u/rules/architecture-compound-components.md" \
  -o "$d/rules/patterns-children-over-render-props.md" "$u/rules/patterns-children-over-render-props.md" \
  -o "$d/rules/patterns-explicit-variants.md" "$u/rules/patterns-explicit-variants.md" \
  -o "$d/rules/react19-no-forwardref.md" "$u/rules/react19-no-forwardref.md" \
  -o "$d/rules/state-context-interface.md" "$u/rules/state-context-interface.md" \
  -o "$d/rules/state-decouple-implementation.md" "$u/rules/state-decouple-implementation.md" \
  -o "$d/rules/state-lift-state.md" "$u/rules/state-lift-state.md"

Global: instala em ~/.agents/skills/vercel-composition-patterns/.

d="$HOME/.agents/skills/vercel-composition-patterns"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/rules/_sections.md" "$u/rules/_sections.md" \
  -o "$d/rules/_template.md" "$u/rules/_template.md" \
  -o "$d/rules/architecture-avoid-boolean-props.md" "$u/rules/architecture-avoid-boolean-props.md" \
  -o "$d/rules/architecture-compound-components.md" "$u/rules/architecture-compound-components.md" \
  -o "$d/rules/patterns-children-over-render-props.md" "$u/rules/patterns-children-over-render-props.md" \
  -o "$d/rules/patterns-explicit-variants.md" "$u/rules/patterns-explicit-variants.md" \
  -o "$d/rules/react19-no-forwardref.md" "$u/rules/react19-no-forwardref.md" \
  -o "$d/rules/state-context-interface.md" "$u/rules/state-context-interface.md" \
  -o "$d/rules/state-decouple-implementation.md" "$u/rules/state-decouple-implementation.md" \
  -o "$d/rules/state-lift-state.md" "$u/rules/state-lift-state.md"

Antigravity

Neste projeto: instala em .agents/skills/vercel-composition-patterns/.

d=".agents/skills/vercel-composition-patterns"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/rules/_sections.md" "$u/rules/_sections.md" \
  -o "$d/rules/_template.md" "$u/rules/_template.md" \
  -o "$d/rules/architecture-avoid-boolean-props.md" "$u/rules/architecture-avoid-boolean-props.md" \
  -o "$d/rules/architecture-compound-components.md" "$u/rules/architecture-compound-components.md" \
  -o "$d/rules/patterns-children-over-render-props.md" "$u/rules/patterns-children-over-render-props.md" \
  -o "$d/rules/patterns-explicit-variants.md" "$u/rules/patterns-explicit-variants.md" \
  -o "$d/rules/react19-no-forwardref.md" "$u/rules/react19-no-forwardref.md" \
  -o "$d/rules/state-context-interface.md" "$u/rules/state-context-interface.md" \
  -o "$d/rules/state-decouple-implementation.md" "$u/rules/state-decouple-implementation.md" \
  -o "$d/rules/state-lift-state.md" "$u/rules/state-lift-state.md"

Global: instala em ~/.gemini/antigravity-cli/skills/vercel-composition-patterns/.

d="$HOME/.gemini/antigravity-cli/skills/vercel-composition-patterns"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/rules/_sections.md" "$u/rules/_sections.md" \
  -o "$d/rules/_template.md" "$u/rules/_template.md" \
  -o "$d/rules/architecture-avoid-boolean-props.md" "$u/rules/architecture-avoid-boolean-props.md" \
  -o "$d/rules/architecture-compound-components.md" "$u/rules/architecture-compound-components.md" \
  -o "$d/rules/patterns-children-over-render-props.md" "$u/rules/patterns-children-over-render-props.md" \
  -o "$d/rules/patterns-explicit-variants.md" "$u/rules/patterns-explicit-variants.md" \
  -o "$d/rules/react19-no-forwardref.md" "$u/rules/react19-no-forwardref.md" \
  -o "$d/rules/state-context-interface.md" "$u/rules/state-context-interface.md" \
  -o "$d/rules/state-decouple-implementation.md" "$u/rules/state-decouple-implementation.md" \
  -o "$d/rules/state-lift-state.md" "$u/rules/state-lift-state.md"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/vercel-labs.agent-skills.vercel-composition-patterns

Prévia do SKILL.md

---
name: vercel-composition-patterns
description:
  React composition patterns that scale. Use when refactoring components with
  boolean prop proliferation, building flexible component libraries, or
  designing reusable APIs. Triggers on tasks involving compound components,
  render props, context providers, or component architecture. Includes React 19
  API changes.
license: MIT
metadata:
  author: vercel
  version: '1.0.0'
---

# 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-`      |
…

Ver todo o marketplace