# Instrucciones para el agente: Bencho: incorpora bloques React interactivos con ayuda de 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: principiante
- Proyecto: https://github.com/cabralorenzo/bencho (licencia NOASSERTION)
- Guía completa: https://lab.wisd.ai/hub/bencho-interactive-blocks

---

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

### Paso 1: elige un bloque

Prueba el bloque en https://bencho.dev y lee su README y THIRD_PARTY.md. Descarga el repositorio desde GitHub para disponer de sus carpetas.

### Paso 2: copia el ejemplo Like

Abre la carpeta de tu aplicación React y comprueba que npm está disponible. Copia `Like.tsx` y `Like.css` desde `blocks/like/` del repositorio descargado a `src/components/like/` de tu aplicación, como indica el [README del bloque](https://github.com/cabralorenzo/bencho/blob/main/blocks/like/README.md). Copia también `tokens.css` a `src/tokens.css` para que coincida con la importación del ejemplo siguiente.

Desde la raíz de tu aplicación, instala sus dependencias:

```bash
npm install framer-motion lucide-react
```

### Paso 3: importa el componente y sus estilos

En un componente situado directamente bajo `src/`, usa las rutas del ejemplo adaptadas a los archivos que acabas de copiar:

```tsx
import "./tokens.css";
import { Like } from "./components/like/Like";
import "./components/like/Like.css";

export default function Page() {
  return <Like color="Ink" burst={70} />;
}
```

Para otro bloque usa su README, no las dependencias de Like por defecto.

## Comprobación

Prueba el control con ratón, teclado y pantalla táctil cuando corresponda. Revisa tema claro y oscuro y confirma que el evento del bloque se conecta al estado real de tu aplicación.

## Si algo falla

Si faltan colores, revisa tokens.css y el tema del contenedor. Si faltan módulos, consulta las dependencias del bloque. Un componente que se ve bien todavía necesita comprobar sus acciones.

Fuente: [documentación del proyecto](https://github.com/cabralorenzo/bencho/blob/30ab35a575eb83eed8f086a6893d4d6426f4fa91/README.md).