メニュー
Optimiza imágenes PNG/JPG de evidencia reduciendo tamaño sin perder calidad visual (ejecución automática pre-reporte)
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Configurar sesión de pruebas UI con Playwright MCP. Usar antes de ejecutar cualquier caso de prueba para leer .vscode/config.md, resolver ambiente, abrir el browser, limpiar storage, ejecutar login con las credenciales/selectores del archivo y retornar "Ready". Prohíbe lectura manual de URL/password y navegación previa.
Define carpeta de evidencia jerárquica (Nombre Archivo / Ticket) en evidence. NO genera código; usa herramientas MCP.
Generar el reporte HTML final usando el template oficial y la lista de evidencias; usar al finalizar el test.
Generar casos de prueba E2E desde tickets Jira con formato Playwright. Usar cuando el prompt pida “genera los casos de prueba para el ticket PG-XXXX”, “generá casos para PG-XXXX” o variantes equivalentes.
Capturar screenshots ante errores o validaciones críticas con naming estándar {ticketId}_paso_XX.png dentro de evidence/{sourceFile}/{ticketId}/. Usar herramientas MCP, NO código.
Enforce uso exclusivo de Playwright MCP y bloquear acciones prohibidas (no .spec.ts, no playwright.config.ts, no CLI tests, no herramientas externas).
| name | optimize-images |
| version | 1.1.0 |
| description | Optimiza imágenes PNG/JPG de evidencia reduciendo tamaño sin perder calidad visual (ejecución automática pre-reporte) |
Este skill optimiza automáticamente las capturas de pantalla generadas durante la ejecución de tests, reduciendo su peso significativamente mientras mantiene la calidad visual necesaria para reportes.
Este skill se ejecuta AUTOMÁTICAMENTE como paso previo a la generación del reporte HTML cuando se ejecuta un test con el comando ejecuta el test TC-XXX.
Flujo de ejecución de tests:
El agente ejecuta este skill automáticamente como parte del flujo de testing, inmediatamente después de capturar todas las evidencias y antes de generar el reporte HTML.
node .github/skills/optimize-images/optimize-images.js evidence/{mdFileName}/{ticketId}
Cuando el usuario ejecuta:
ejecuta el test TC-001
El agente ejecuta automáticamente:
# 1. Capturar evidencias → tc001_*.png
# 2. OPTIMIZAR (este skill):
node .github/skills/optimize-images/optimize-images.js evidence/agenda/tc001
# 3. Generar reporte HTML → tc001_reporte.html
También puede ejecutarse manualmente si es necesario:
node .github/skills/optimize-images/optimize-images.js evidence/agenda/tc005
.png, .jpg, .jpeg en la carpeta especificada._opt en el nombre).| Formato | Calidad | Nivel compresión |
|---|---|---|
| JPEG | 80% | mozjpeg enabled |
| PNG | 80% | Level 9, palette |
Nota: Calidad 80 es el punto óptimo entre peso y calidad visual para capturas de interfaz.
{se integra automáticamente con `evidence-generator` en el flujo de testing:
**Secuencia de ejecución (AUTOMÁTICA):**
┌─────────────────────────────────────────────┐ │ Usuario: "ejecuta el test TC-005" │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ 1. Crear carpeta evidencia: │ │ evidence/agenda/tc005 │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ 2. Ejecutar test y capturar screenshots │ │ - tc005_paso1.png │ │ - tc005_paso2.png │ │ - tc005_resultado.png │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ 3. OPTIMIZAR IMÁGENES (optimize-images) │ │ node .github/skills/.../optimize.js ... │ │ → Reducir peso 60-70% │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ 4. Generar reporte HTML │ │ - tc005_reporte.html │ │ - Referencias: tc005_*.png (optimizadas)│ └─────────────────────────────────────────────┘
**Ventajas de la optimización pre-reporte:**
- ✅ Reportes HTML más livianos
- ✅ Carga más rápida en navegador
- ✅ Menor consumo de disco
- ✅ Sin pérdida visual perceptible
Este skill complementa al skill `evidence-generator`. El flujo recomendado es:
1. Ejecutar test case y generar capturas
2. Generar reporte HTML
3. **Ejecutar optimize-images** sobre la carpeta del ticket
4. Verificar que las imágenes en el HTML se vean correctamente
### Ejemplo de flujo completo
```powershell
# Después de completar TC-005 y generar su reporte:
node .github/skills/optimize-images/optimize-images.js evidence/agenda/tc005
📁 Optimizando imágenes en: evidence/agenda/tc005
🔍 Encontradas 4 imágenes. Procesando...
✅ tc005_programacion_previa_creada.png: 245 KB → 89 KB (-63.7%)
✅ tc005_formulario_conflicto_horario.png: 312 KB → 102 KB (-67.3%)
✅ tc005_mensaje_error_inspector_ocupado.png: 156 KB → 51 KB (-67.3%)
✅ tc005_calendario_sin_duplicado.png: 287 KB → 94 KB (-67.2%)
📊 Total: 4 imágenes optimizadas. Ahorro total: 664 KB