# Vercel Composition Patterns

> Patrones de composición de React que escalan. Úsalo al refactorizar props booleanas, construir librerías flexibles o diseñar APIs reutilizables; incluye cambios de las APIs de React 19.

Fuente: https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-composition-patterns
Markdown: https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-composition-patterns.md

Repositorio: https://github.com/vercel-labs/agent-skills
Autor: vercel-labs
Licencia: MIT
Actualizado: hace 8 meses
Coste de contexto: 78 tok instalada, 722 tok al activarse, 12.6k tok con todos los archivos del bundle
Bundle: 14 archivos, 49 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add vercel-labs/agent-skills --skill composition-patterns --agent claude-code
# Cursor
npx -y skills add vercel-labs/agent-skills --skill composition-patterns --agent cursor
# Codex
npx -y skills add vercel-labs/agent-skills --skill composition-patterns --agent codex
# Gemini CLI
npx -y skills add vercel-labs/agent-skills --skill composition-patterns --agent gemini
# Windsurf
npx -y skills add vercel-labs/agent-skills --skill composition-patterns --agent windsurf
# Cline
npx -y skills add vercel-labs/agent-skills --skill composition-patterns --agent cline
```

## Qué hace

- Aplica patrones de composición de React: componentes compuestos, elevación de estado, context providers y variantes explícitas en lugar de props booleanas
- Referencia reglas categorizadas por prioridad (architecture-, state-, patterns-, react19-) con archivos individuales de ejemplos correctos e incorrectos
- Incluye guía sobre nuevas APIs de React 19 como use() en lugar de useContext() y evitar forwardRef

## Cuándo usarla

- Refactorizar componentes con proliferación de props booleanas
- Construir librerías de componentes reutilizables
- Diseñar APIs de componentes flexibles
- Revisar arquitectura de componentes compuestos o context providers

## Qué la activa

- "Este componente tiene demasiadas props booleanas, ayúdame a refactorizarlo"
- "Quiero diseñar un componente compuesto con context provider"
- "Cómo evito usar forwardRef en React 19"

## Archivos

- AGENTS.md — 22 KB
- README.md — 2 KB
- SKILL.md — 3 KB
- metadata.json — 530 B
- rules/_sections.md — 829 B
- rules/_template.md — 329 B
- rules/architecture-avoid-boolean-props.md — 2 KB
- rules/architecture-compound-components.md — 3 KB
- rules/patterns-children-over-render-props.md — 2 KB
- rules/patterns-explicit-variants.md — 2 KB
- rules/react19-no-forwardref.md — 953 B
- rules/state-context-interface.md — 5 KB
- rules/state-decouple-implementation.md — 3 KB
- rules/state-lift-state.md — 3 KB

## SKILL.md

Reproducido tal cual desde vercel-labs/agent-skills bajo MIT. Esta sección es el documento original y está en inglés.

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

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [vercel-labs](https://skillsagentes.com/creators/vercel-labs.md) — 20 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Vercel React View Transitions](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-react-view-transitions.md): Guía para implementar animaciones nativas y fluidas con la View Transition API de React (<ViewTransition>, addTransitionType y pseudo-elementos CSS de view transition), sin librerías de animación de terceros.
- [Vercel Optimize](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-optimize.md): Para optimizar coste y rendimiento en proyectos Vercel desplegados (Next.js, SvelteKit, Nuxt, Astro limitado): recopila métricas, uso y config, investiga solo candidatos respaldados por métricas y produce recomendaciones verificadas.
- [Writing Guidelines](https://skillsagentes.com/skills/vercel-labs/agent-skills/writing-guidelines.md): Revisa documentos o prosa para verificar el cumplimiento de las Writing Guidelines; úsalo al pedir "review my docs", "check writing style" o "audit prose".
- [Vercel Cli With Tokens](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-cli-with-tokens.md): Despliega y gestiona proyectos en Vercel usando autenticación por token. Útil para usar Vercel CLI con access tokens en vez de login interactivo, p. ej. "deploy to vercel", "set up vercel".
- [Vercel React Best Practices](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-react-best-practices.md): Guía de optimización de rendimiento para React y Next.js de Vercel Engineering, con 70 reglas en 8 categorías priorizadas por impacto para refactorizar y generar código.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)