DEMO RUNBOOK — Día de Grabación

Guía operacional para ejecutar el demo del video sin improvisación. Leer completo antes de grabar.

CHECKLIST PRE-GRABACIÓN (48h antes)

DECISIÓN DE VISUALIZACIÓN — DECIDIR ANTES

Opción A: tmux (recomendado para el video)

brew install tmux  # si no está instalado

# Nueva sesión
tmux new-session -s demo

# Dividir en 4 panes:
# Ctrl+B, %   → split vertical
# Ctrl+B, "   → split horizontal
# Ctrl+B, o   → cambiar entre panes

Layout para el demo:

Pane 1 (arriba izq): Lead
Pane 2 (arriba der): Arquitecto
Pane 3 (abajo izq): Revisor
Pane 4 (abajo der): Optimizador

Claude Code detecta tmux y distribuye teammates automáticamente.

Opción B: Modo in-process (más simple)

Todo en una sola ventana. Cambiar entre teammates: Shift+Down. Sin setup adicional.

SETUP DEL DEMO

1. Verificar Hermit corriendo

curl -s http://localhost:8080/api/v1/skills -H "Authorization: Bearer dev-admin-token"
# Debe responder [] o lista de skills

Si no responde:

docker compose up -d  # desde el directorio de Hermit
# Esperar 10-15 segundos

2. Resetear el portal (portal vacío para el demo)

# Ver skills actuales
curl -s http://localhost:8080/api/v1/skills \
  -H "Authorization: Bearer dev-admin-token" | jq '.[] | {id, name}'

# Borrar cada skill por ID
curl -X DELETE http://localhost:8080/api/v1/skills/<ID> \
  -H "Authorization: Bearer $(grep HERMIT_TOKEN .env | cut -d= -f2)"

Portal vacío al finalizar:

curl -s http://localhost:8080/api/v1/skills -H "Authorization: Bearer dev-admin-token"
# []

3. Verificar flag Agent Teams

cat ~/.claude/settings.json | grep AGENT_TEAMS
# Debe mostrar: "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"

4. Verificar scripts

./validate.sh skills/cloudflare-tunnels
# ✅ Validación pasada

SECUENCIA DEL DEMO EN VIVO

Momento 1 — Mostrar el CLAUDE.md (minuto 10:30)

cat CLAUDE.md

Destacar:

La sección “Flujo de trabajo” — las DOS FASES
El Lead: “lanza primero el Investigador, luego spawnea el equipo”
La asimetría: “Los teammates no tienen acceso al Task tool”
La definición del Optimizador: “substrae, no agrega”
La regla anti-hardcode

Momento 2 — Mostrar la task list vacía y diagrama de fases (minuto 13:00)

claude
# Solo mostrar la interfaz — que el viewer vea que no hay nada pre-cargado
# Salir con /exit

Mostrar el diagrama de dos fases en pantalla (del CLAUDE.md).

Momento 3 — Setup rápido (minuto 17:00)

cat ~/.claude/settings.json   # mostrar la flag
open http://localhost:8080    # portal vacío
ls -la                        # estructura del repo

Momento 4 — PROMPT DEL DEMO (minuto 20:00) ← NÚCLEO #1

Abrir Claude Code — 1 solo pane tmux al inicio (Lead solo, FASE 1):

claude

Escribir el prompt:

Necesito una skill para configurar Cloudflare Tunnels desde cero.

Activa el Agent Team con estos roles:
- Arquitecto: diseña la skill como instrucciones para Claude —
  no para humanos. Usa el research que te proveo.
  Si falta información para algún paso, dilo.
- Revisor: cuestiona si Claude ejecutaría esto correctamente.
  ¿Hay instrucciones ambiguas? ¿Valores hardcodeados que deberían
  ser placeholders? ¿El description incluye el trigger de cuándo
  usarla? Si no encuentras problemas, explica por qué.
- Optimizador: toma el borrador aprobado y elimina todo lo que
  Claude ya sabe. Solo quedan comandos específicos de cloudflared,
  edge cases reales, y errores no obvios.

No intervengo en el debate, salvo si inventan comandos sin fuente
o hardcodean valores del usuario.

Cuando lleguen a consenso, usa subagentes para validar y publicar en Hermit.

SECUENCIA ESPERADA — FASE 1:

Lead pregunta el proveedor (Cloudflare) → Responder confirmando Cloudflare
Lead lanza el Investigador (subagente solo, sin teammates)
Investigador busca en developers.cloudflare.com — URLs visibles en pantalla
Investigador devuelve resultados al Lead

TRANSICIÓN A FASE 2 — el momento visual más importante:

Los 3 panes de tmux aparecen simultáneamente
Narrar: “El Lead spawnea al equipo con el research ya cargado”

NO TOCAR NADA mientras el team trabaja.

Momento 5 — Si el Revisor aprueba sin objeciones

Intervenir con:

Revisor, ¿hay valores hardcodeados que deberían ser placeholders?
¿El description dice cuándo usar esta skill, no solo qué hace?

Momento 6 — Análisis post-demo del SKILL.md (minuto 37:30)

cat skills/cloudflare-tunnels/SKILL.md | wc -l
# Mostrar que quedó bajo 100 líneas vs el formato verbose anterior

Comparar con el backup si aplica:

diff skills/cloudflare-tunnels/SKILL.md skills/cloudflare-tunnels/SKILL.md.backup

Momento 7 — NUEVA SESIÓN USANDO LA SKILL (minuto 40:00) ← MEGA PAYOFF

Este es el cierre del video. Abrir una nueva ventana de Claude Code:

# Nueva ventana/tab — sesión completamente nueva
claude

Prompt para mostrar que la skill funciona:

Necesito exponer mi app de Node.js que corre en localhost:3000.
Quiero que sea accesible desde internet con HTTPS.

Claude cargará automáticamente la skill cloudflare-tunnels (si está en el skill path configurado) y ejecutará el flujo sin que el usuario explique nada más.

Qué mostrar: Claude pregunta <DOMAIN> y <PORT>, el usuario responde, Claude ejecuta los pasos.

Narración: “4 agentes construyeron estas instrucciones. Ahora Claude las usa solo.”

PLAN B — SI EL DEMO FALLA

Si Claude Code no levanta los teammates

cat ~/.claude/settings.json | grep AGENT_TEAMS
# Si falta: agregar "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"
# Reiniciar Claude Code

Si el Lead no pregunta el proveedor

Intervenir:

Lead, ¿no necesitas saber el proveedor de DNS antes de crear las tareas?

Si el Investigador no encuentra docs reales

El Arquitecto debe indicarlo. Si no lo hace, intervenir:

Arquitecto, ¿el Investigador encontró fuente primaria para esos comandos?
¿De qué URL obtuviste esa información?

Si el publish.sh falla

# Diagnóstico
./publish.sh skills/cloudflare-tunnels

# Si falla por token:
cat .env  # verificar HERMIT_TOKEN

# Si Hermit está caído:
curl -s http://localhost:8080/api/v1/skills -H "Authorization: Bearer dev-admin-token"

# Publicar manualmente la skill de backup:
./publish.sh skills/cloudflare-tunnels

Si el demo completo falla — usar el backup

# Publicar directamente la skill pre-construida
./publish.sh skills/cloudflare-tunnels

# Verificar en el portal
curl -s http://localhost:8080/api/v1/skills \
  -H "Authorization: Bearer dev-admin-token" | jq '.[] | .name'
open http://localhost:8080

Para el video: mostrar la skill publicada y hacer el análisis con el SKILL.md en pantalla.

COMANDOS DE VERIFICACIÓN RÁPIDA

# Portal Hermit activo
curl -s http://localhost:8080/api/v1/skills -H "Authorization: Bearer dev-admin-token" | jq 'length'

# Skill publicada con éxito
curl -s http://localhost:8080/api/v1/skills \
  -H "Authorization: Bearer dev-admin-token" | jq '.[] | {name, version}'

# Validar skill antes de publicar
./validate.sh skills/cloudflare-tunnels

# Publicar skill
./publish.sh skills/cloudflare-tunnels

# Flag Agent Teams activa
cat ~/.claude/settings.json | python3 -m json.tool | grep AGENT

# Docker Hermit corriendo
docker ps | grep hermit

CHECKLIST POST-GRABACIÓN

Skill aparece en el portal (curl ... | jq '.[] | .name')
Capturado: portal vacío → portal con skill (cierre visual)
Capturado: Lead preguntando el proveedor antes de crear tareas
Capturado: debate Arquitecto ↔ Revisor en terminal
Capturado: Optimizador eliminando líneas (before/after del SKILL.md)
Capturado: nueva sesión de Claude usando la skill sin explicación
Capturado: task list con cambios de estado

Runbook v2.0 | 2026-03-03 — Nueva estructura: Optimizador reemplaza Redactor, Lead pregunta ambigüedades, demo con dos momentos