# Vercel Composition Patterns

> Patrones de composición en React que escalan. Úsalo al refactorizar componentes con exceso de props booleanas, construir librerías de componentes o diseñar APIs reutilizables. Incluye React 19.

Fuente: https://skillsagentes.com/skills/calesthio/openmontage/vercel-composition-patterns
Markdown: https://skillsagentes.com/skills/calesthio/openmontage/vercel-composition-patterns.md

Repositorio: https://github.com/calesthio/OpenMontage
Autor: calesthio
Licencia: MIT
Actualizado: el mes pasado
Coste de contexto: 78 tok instalada, 806 tok al activarse, 12.5k tok con todos los archivos del bundle
Bundle: 13 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 calesthio/OpenMontage --skill vercel-composition-patterns --agent claude-code
# Cursor
npx -y skills add calesthio/OpenMontage --skill vercel-composition-patterns --agent cursor
# Codex
npx -y skills add calesthio/OpenMontage --skill vercel-composition-patterns --agent codex
# Gemini CLI
npx -y skills add calesthio/OpenMontage --skill vercel-composition-patterns --agent gemini
# Windsurf
npx -y skills add calesthio/OpenMontage --skill vercel-composition-patterns --agent windsurf
# Cline
npx -y skills add calesthio/OpenMontage --skill vercel-composition-patterns --agent cline
```

## Qué hace

- Reúne patrones de composición en React que escalan, con las reglas ordenadas por prioridad
- Arquitectura de componentes: evitar la proliferación de props booleanas y usar componentes compuestos
- Gestión de estado: interfaces de contexto y proveedores
- Patrones de implementación como render props
- Cubre los cambios de API de React 19

## Cuándo usarla

- Refactorizar componentes con muchas props booleanas
- Construir librerías de componentes reutilizables
- Diseñar APIs de componente flexibles
- Revisar la arquitectura de componentes o trabajar con componentes compuestos y proveedores de contexto

## Qué la activa

- "Este componente tiene diez props booleanas, refactorízalo"
- "Conviértelo en componentes compuestos"
- "Revisa la arquitectura de esta librería de componentes"

## Archivos

- AGENTS.md — 22 KB
- README.md — 2 KB
- SKILL.md — 3 KB
- 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 calesthio/OpenMontage 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.

> **Extended reference:** [`AGENTS.md`](AGENTS.md) in this directory is the long-form upstream guide (vendored from Vercel). It is supplementary reference material scoped to this skill only — `SKILL.md` is the loadable entry point and the authority. It does not override or extend the repository-root `AGENTS.md` / `AGENT_GUIDE.md`.

## 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: [calesthio](https://skillsagentes.com/creators/calesthio.md) — 0 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

- [Seedance 2 5](https://skillsagentes.com/skills/calesthio/openmontage/seedance-2-5.md): Genera vídeo cinematográfico de 4-30 s con ByteDance Seedance 2.5 por fal.ai, Volcengine Ark, Runway o ComfyUI. Cubre el contrato de prompt 2.5, cortes duros, locks de continuidad y voz.
- [Comfyui](https://skillsagentes.com/skills/calesthio/openmontage/comfyui.md): Úsalo al trabajar con workflows de ComfyUI en OpenMontage: comfyui_image/video/music, workflows propios, selección de output_node, modelos que faltan, LoRAs, poca VRAM e importación de workflows de la comunidad.
- [Fish Audio Tts](https://skillsagentes.com/skills/calesthio/openmontage/fish-audio-tts.md): Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id.
- [Minimax H3](https://skillsagentes.com/skills/calesthio/openmontage/minimax-h3.md): Genera vídeo con MiniMax H3 (Hailuo 3.0) por la API oficial v2, fal.ai, Runway, nodos partner de ComfyUI o pesos abiertos locales. Clips de 4-15s a 2K con animación de primer/último fotograma.
- [Gemini Omni](https://skillsagentes.com/skills/calesthio/openmontage/gemini-omni.md): Genera y edita conversacionalmente vídeos cortos con Google Gemini Omni Flash: itera con ediciones en lenguaje natural, clips de 3-10s a 720p con audio y texto en pantalla, e imágenes de referencia por etiquetas.

---

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