⚙️ Skill para generar GIFs animados de la aplicación web

[0GiS0]

✨ Descripción

Crear una skill para los agentes de IA que permita grabar la aplicación web "Sopla el Cartucho" en funcionamiento y generar un GIF animado optimizado. El objetivo es incluir este GIF en el README.md para mostrar la demo de forma visual y atractiva.

🎯 ¿Por qué es necesario?

• Un GIF animado en el README aumenta significativamente el impacto visual del proyecto frente a capturas estáticas.
• Permite mostrar la interfaz retro Game Boy en acción sin que el visitante tenga que ejecutar la app.
• Automatizar la generación del GIF facilita mantenerlo actualizado con cada cambio visual relevante.
• Los agentes de IA podrían regenerar el GIF automáticamente cuando se detecten cambios en la UI.

📐 Solución propuesta

1. Implementar la skill

Crear un script/skill que:

1. Arranque el servidor de desarrollo (npm run dev)
2. Use Playwright para navegar por la app y capturar una secuencia de frames
3. Convierta los frames en un GIF optimizado usando ffmpeg o gifski

# Ejemplo de uso de la skill
genera-gif --url (localhost/redacted) --output docs/screenshots/demo.gif --duration 5

2. Integración como herramienta MCP

Exponer la skill como herramienta MCP para que el agente pueda invocarla directamente:

{
  "name": "generate_gif",
  "description": "Graba la app web y genera un GIF animado",
  "parameters": {
    "url": "URL de la app",
    "output": "Ruta del GIF resultante",
    "duration": "Duración en segundos"
  }
}

3. Guardar el resultado

El GIF generado se guarda en docs/screenshots/demo.gif (ya referenciado en el README.md).

🔗 Referencias útiles

• [Playwright Screenshots & Video]((playwright.dev/redacted) — Para capturar frames de la app web con control total de la navegación
• [ffmpeg: crear GIF desde vídeo]((ffmpeg.org/redacted) — Conversión de vídeo a GIF optimizado con paleta de colores
• [gifski]((gif.ski/redacted) — Compresor de GIFs de alta calidad, ideal para interfaces con colores planos (pixel art)
• [Model Context Protocol (MCP)]((modelcontextprotocol.io/redacted) — Documentación oficial para exponer la skill como herramienta MCP

📝 Notas adicionales

• El README.md ya referencia docs/screenshots/demo.gif y docs/screenshots/demo.webm, por lo que el script debe respetar esas rutas.
• Valorar si la skill debe generar también el .webm como alternativa al GIF.
• La interfaz tiene animaciones CSS (estética Game Boy) que deben capturarse correctamente — asegurarse de que Playwright espera a que las animaciones estén visibles.
• Puede añadirse como tarea en package.json: "generate:gif": "node scripts/generate-gif.mjs"

---

🤖 Issue mejorado automáticamente por Copilot. Autor original: @0GiS0

Generated by Mejorador de Issues for issue #91 · ◷