# Instrucciones para el agente: Halaska UI: aplica patrones de interfaz a tu producto de IA

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/Halaska-Studio/ui (licencia MIT)
- Guía completa: https://lab.wisd.ai/hub/halaska-ai-product-ui-kit

---

## 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: revisa la integración

Abre la guía oficial https://ui.halaska.com/install.md y elige una pantalla pequeña de tu aplicación React. Identifica qué estilos y componentes sustituirá.

### Paso 2: descarga el kit

El README muestra esta descarga desde el proyecto de destino:

```bash
curl -o src/halaska-kit.jsx https://ui.halaska.com/halaska-kit.jsx
```

El ejemplo de importación oficial es:

```jsx
import { Button, Card, Orb, PlanPreviewPattern, usePal, tokens } from "./halaska-kit";
```

Ajusta la ruta de importación según la ubicación del archivo consumidor.

### Paso 3: adapta una pantalla

Pide al agente que conserve las acciones existentes y cambie su presentación usando el kit. Conecta las props a estados reales; consulta la API en https://ui.halaska.com/llms.txt.

## Comprobación

Abre la pantalla y prueba el recorrido completo, incluido un estado de espera y un error. Confirma que los botones siguen ejecutando la acción correcta y que los estilos no afectan a otras pantallas.

## Si algo falla

Si el kit no carga, comprueba React y react-dom y la ruta de importación. Si un patrón no acepta los datos esperados, revisa si es un componente con props o una implementación de referencia.

Fuente: [documentación del proyecto](https://github.com/Halaska-Studio/ui/blob/f11ab6958de3fb186a4d431e8425bbe43a6dc87b/README.md).