por Juanjo LunaPatrones de composición en React
Ayuda a diseñar componentes React más flexibles y reutilizables con patrones de composición. Te sirve cuando quieres evitar muchas propiedades booleanas y organizar mejor la arquitectura de una librería o interfaz.
Descripción original (inglés)
vercel-composition-patterns: 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.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta composition-patterns en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/skills/composition-patterns" ~/.claude/skills/composition-patterns
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de vercel-labs/agent-skills
- Desplegar aplicaciones en Vercel deploy-to-vercel
- Desplegar en Vercel con tokens vercel-cli-with-tokens
- Optimizar costes y rendimiento en Vercel vercel-optimize
- Buenas prácticas de React Native y Expo vercel-react-native-skills
- Animaciones con View Transitions en React vercel-react-view-transitions
- Revisar guías de escritura writing-guidelines
Explicación redactada con ayuda de IA a partir de la descripción original.