# Instrucciones para el agente: shadcn: consulta e incorpora componentes desde tu agente

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

- Dificultad: intermedio
- Proyecto: https://github.com/shadcn-ui/ui (licencia MIT)
- Guía completa: https://lab.wisd.ai/hub/shadcn-agent-registry

---

## Para el agente: cómo acompañar al usuario

1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

---

## Pasos de configuración

### Preparación

Comprueba Node.js ≥20.18.1 y npm/npx, según el paquete shadcn publicado, y Claude Code. Entra en la raíz de un proyecto configurado para tu framework con sus dependencias instaladas antes de añadir MCP.

### Paso 1: prepara el proyecto

Sigue la [instalación oficial](https://ui.shadcn.com/docs/installation) correspondiente a tu framework. No apliques una receta de React a un proyecto de otro ecosistema.

### Paso 2: configura MCP

Para Claude Code, desde la raíz del proyecto, la [guía oficial](https://ui.shadcn.com/docs/mcp) publica:

```bash
npx shadcn@latest mcp init --client claude
```

Reinicia Claude Code y revisa la conexión con `/mcp`. Para otro cliente sigue su apartado específico de la guía.

### Paso 3: prueba un componente

Pide al agente buscar un elemento del registro y mostrar qué archivos y dependencias incorporaría. Revisa la propuesta antes de añadirlo.

## Comprobación

Comprueba que el cliente descubre el servidor, que encuentra el elemento pedido y que el código incorporado aparece en el proyecto. Valida el componente con los controles habituales de tu aplicación.

## Si algo falla

Si el registro no responde, comprueba su URL y sus requisitos de acceso. Si el componente no encaja, revisa la guía del framework y el contenido del registro antes de modificar estilos al azar.

Consulta el [README oficial](https://github.com/shadcn-ui/ui#readme) para el procedimiento completo y los cambios de versión.