# Instrucciones para el agente: Thinking Orbs: estados visuales para interfaces de agentes

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/Jakubantalik/thinking-orbs (licencia MIT)
- Guía completa: https://lab.wisd.ai/hub/thinking-orbs

---

## 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 React ≥18, como exige peerDependencies del paquete, y Node.js/npm compatibles con tu aplicación. Abre la raíz de la app React con su configuración TSX preparada antes de instalar.

### Paso 1: instala el paquete en una app React

Comando del README:

```bash
npm install thinking-orbs
```

### Paso 2: añade el ejemplo mínimo

```tsx
import { ThinkingOrb } from 'thinking-orbs';

function Status() {
  return <ThinkingOrb state="searching" size={64} />;
}
```

### Paso 3: conecta el estado real

Consulta los estados admitidos en el [README](https://github.com/Jakubantalik/thinking-orbs#states). Actualiza la propiedad desde el estado de tu aplicación; no dejes `searching` fijo cuando termine la búsqueda. Para un indicador junto al texto, el tamaño documentado alternativo es 20.

## Comprobación

Comprueba la visibilidad en fondos claros y oscuros y activa la preferencia de movimiento reducido del sistema: debe aparecer un fotograma estático. Revisa que el texto accesible describa la actividad que estás mostrando.

## Si algo falla

Confirma que el componente se monta en el cliente: el README indica que el canvas espera a resolver el tema. Si los colores no encajan, revisa las clases `dark`/`light` o el atributo `data-theme` heredado y las opciones `theme` del README.