SKILL.md.tmpl

---
name: gstack
preamble-tier: 1
version: 1.1.0
description: |
  Navegador headless rápido para pruebas QA y pruebas de uso propio en sitios. Navega páginas, interactúa con
  elementos, verifica estados, compara antes/después, toma screenshots anotados, prueba diseños
  responsive, formularios, subidas de archivos, diálogos y captura evidencia de errores. Úsalo cuando
  te pidan abrir o probar un sitio, verificar un despliegue, probar un flujo de usuario o reportar
  un error con screenshots.
allowed-tools:
  - Bash
  - Read
  - AskUserQuestion

---

{{PREAMBLE}}

Si `PROACTIVE` es `false`: NO sugieras proactivamente otros skills de gstack durante esta sesión.
Solo ejecuta los skills que el usuario invoque explícitamente. Esta preferencia persiste entre sesiones
mediante `gstack-config`.

Si `PROACTIVE` es `true` (por defecto): sugiere skills de gstack relacionados cuando sean relevantes
para la etapa del flujo de trabajo del usuario:
- Lluvia de ideas → /office-hours
- Estrategia → /plan-ceo-review
- Arquitectura → /plan-eng-review
- Diseño → /plan-design-review o /design-consultation
- Auto-revisión → /autoplan
- Depuración → /investigate
- QA → /qa
- Revisión de código → /review
- Auditoría visual → /design-review
- Lanzamiento → /ship
- Documentación → /document-release
- Retrospectiva → /retro
- Segunda opinión → /codex
- Seguridad en producción → /careful o /guard
- Ediciones con alcance limitado → /freeze o /unfreeze
- Actualizaciones → /gstack-upgrade

Si el usuario rechaza las sugerencias, ejecuta `gstack-config set proactive false`.
Si vuelve a aceptarlas, ejecuta `gstack-config set proactive true`.

# gstack browse: Pruebas QA y Uso propio (dogfooding)

Chromium headless persistente. La primera llamada inicia automáticamente (~3s), luego ~100-200ms por comando.
Se apaga automáticamente tras 30 min de inactividad. El estado persiste entre llamadas (cookies, pestañas, sesiones).

{{BROWSE_SETUP}}

## IMPORTANTE

- Usa el binario compilado mediante Bash: `$B <command>`
- NUNCA uses las herramientas `mcp__claude-in-chrome__*`. Son lentas y poco fiables.
- El navegador persiste entre llamadas — las cookies, sesiones de inicio de sesión y pestañas se mantienen.
- Los diálogos (alert/confirm/prompt) se aceptan automáticamente por defecto — sin bloqueo del navegador.
- **Mostrar screenshots:** Después de `$B screenshot`, `$B snapshot -a -o` o `$B responsive`, usa siempre la herramienta Read sobre los PNG generados para que el usuario pueda verlos. Sin esto, los screenshots son invisibles.

## Flujos de trabajo QA

### Probar un flujo de usuario (login, registro, checkout, etc.)

```bash
# 1. Ir a la página
$B goto https://app.example.com/login

# 2. Ver qué es interactivo
$B snapshot -i

# 3. Rellenar el formulario usando refs
$B fill @e3 "test@example.com"
$B fill @e4 "password123"
$B click @e5

# 4. Verificar que funcionó
$B snapshot -D              # el diff muestra qué cambió tras hacer clic
$B is visible ".dashboard"  # confirmar que apareció el dashboard
$B screenshot /tmp/after-login.png
```

### Verificar un despliegue / comprobar producción

```bash
$B goto https://yourapp.com
$B text                          # leer la página — ¿carga correctamente?
$B console                       # ¿errores de JS?
$B network                       # ¿peticiones fallidas?
$B js "document.title"           # ¿título correcto?
$B is visible ".hero-section"    # ¿elementos clave presentes?
$B screenshot /tmp/prod-check.png
```

### Probar una funcionalidad de extremo a extremo (uso propio / dogfooding)

```bash
# Navegar a la funcionalidad
$B goto https://app.example.com/new-feature

# Tomar screenshot anotado — muestra cada elemento interactivo con etiquetas
$B snapshot -i -a -o /tmp/feature-annotated.png

# Encontrar TODOS los elementos clicables (incluyendo divs con cursor:pointer)
$B snapshot -C

# Recorrer el flujo
$B snapshot -i          # línea base
$B click @e3            # interactuar
$B snapshot -D          # ¿qué cambió? (diff unificado)

# Comprobar estados de elementos
$B is visible ".success-toast"
$B is enabled "#next-step-btn"
$B is checked "#agree-checkbox"

# Revisar la consola en busca de errores después de las interacciones
$B console
```

### Probar diseños responsive

```bash
# Rápido: 3 screenshots en móvil/tablet/escritorio
$B goto https://yourapp.com
$B responsive /tmp/layout

# Manual: viewport específico
$B viewport 375x812     # iPhone
$B screenshot /tmp/mobile.png
$B viewport 1440x900    # Escritorio
$B screenshot /tmp/desktop.png

# Screenshot de elemento (recortar a un elemento específico)
$B screenshot "#hero-banner" /tmp/hero.png
$B snapshot -i
$B screenshot @e3 /tmp/button.png

# Recorte por región
$B screenshot --clip 0,0,800,600 /tmp/above-fold.png

# Solo viewport (sin scroll)
$B screenshot --viewport /tmp/viewport.png
```

### Probar subida de archivos

```bash
$B goto https://app.example.com/upload
$B snapshot -i
$B upload @e3 /path/to/test-file.pdf
$B is visible ".upload-success"
$B screenshot /tmp/upload-result.png
```

### Probar formularios con validación

```bash
$B goto https://app.example.com/form
$B snapshot -i

# Enviar vacío — comprobar que aparecen errores de validación
$B click @e10                        # botón de envío
$B snapshot -D                       # el diff muestra que aparecieron mensajes de error
$B is visible ".error-message"

# Rellenar y reenviar
$B fill @e3 "valid input"
$B click @e10
$B snapshot -D                       # el diff muestra que los errores desaparecieron, estado exitoso
```

### Probar diálogos (confirmaciones de eliminación, prompts)

```bash
# Configurar el manejo de diálogos ANTES de activarlos
$B dialog-accept              # aceptará automáticamente el siguiente alert/confirm
$B click "#delete-button"     # activa el diálogo de confirmación
$B dialog                     # ver qué diálogo apareció
$B snapshot -D                # verificar que el elemento fue eliminado

# Para prompts que necesitan entrada de texto
$B dialog-accept "my answer"  # aceptar con texto
$B click "#rename-button"     # activa el prompt
```

### Probar páginas autenticadas (importar cookies del navegador real)

```bash
# Importar cookies de tu navegador real (abre un selector interactivo)
$B cookie-import-browser

# O importar un dominio específico directamente
$B cookie-import-browser comet --domain .github.com

# Ahora probar páginas autenticadas
$B goto https://github.com/settings/profile
$B snapshot -i
$B screenshot /tmp/github-profile.png
```

### Comparar dos páginas / entornos

```bash
$B diff https://staging.app.com https://prod.app.com
```

### Cadena de múltiples pasos (eficiente para flujos largos)

```bash
echo '[
  ["goto","https://app.example.com"],
  ["snapshot","-i"],
  ["fill","@e3","test@test.com"],
  ["fill","@e4","password"],
  ["click","@e5"],
  ["snapshot","-D"],
  ["screenshot","/tmp/result.png"]
]' | $B chain
```

## Patrones rápidos de aserción

```bash
# El elemento existe y es visible
$B is visible ".modal"

# El botón está habilitado/deshabilitado
$B is enabled "#submit-btn"
$B is disabled "#submit-btn"

# Estado del checkbox
$B is checked "#agree"

# El campo de entrada es editable
$B is editable "#name-field"

# El elemento tiene el foco
$B is focused "#search-input"

# La página contiene texto
$B js "document.body.textContent.includes('Success')"

# Cantidad de elementos
$B js "document.querySelectorAll('.list-item').length"

# Valor de un atributo específico
$B attrs "#logo"    # devuelve todos los atributos como JSON

# Propiedad CSS
$B css ".button" "background-color"
```

## Sistema de Snapshot

{{SNAPSHOT_FLAGS}}

## Referencia de comandos

{{COMMAND_REFERENCE}}

## Consejos

1. **Navega una vez, consulta muchas veces.** `goto` carga la página; luego `text`, `js`, `screenshot` acceden a la página cargada al instante.
2. **Usa `snapshot -i` primero.** Ve todos los elementos interactivos, luego haz clic/rellena por ref. Sin adivinar selectores CSS.
3. **Usa `snapshot -D` para verificar.** Línea base → acción → diff. Ve exactamente qué cambió.
4. **Usa `is` para aserciones.** `is visible .modal` es más rápido y fiable que analizar el texto de la página.
5. **Usa `snapshot -a` como evidencia.** Los screenshots anotados son ideales para reportes de errores.
6. **Usa `snapshot -C` para interfaces complejas.** Encuentra divs clicables que el árbol de accesibilidad no detecta.
7. **Revisa `console` después de las acciones.** Detecta errores de JS que no se manifiestan visualmente.
8. **Usa `chain` para flujos largos.** Un solo comando, sin sobrecarga de CLI por cada paso.