En los propios términos del Skill
Genera un único archivo HTML autocontenido a partir de una aplicación web en ejecución, lanzando Chrome headless mediante Puppeteer, capturando el DOM completamente renderizado, insertando las reglas CSSOM en línea y convirtiendo las imágenes en URIs de datos base64. Funciona con cualquier framework — React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook — sin necesidad de MockPage.jsx.
La skill obliga al agente a preguntar cuál de las dos estrategias de captura usar antes de continuar, recomendando la instantánea de Puppeteer, y a pausar para confirmación después de que el servidor local se inicie. Los flags cubren el tiempo de espera, el viewport, el modo oscuro, la eliminación de elementos fijos, la inserción en línea de canvas y un script de autenticación para páginas con inicio de sesión. Un apéndice documentado reduce los componentes de React a un MockPage.jsx manual cuando la aplicación no puede ejecutarse localmente.
Qué produce
- Un archivo HTML autocontenido por cada ruta capturada, con los estilos insertados en línea y las imágenes incluidas como base64.
- Un archivo por ruta cuando captura varias vistas, por ejemplo inicio, precios y panel.
- Gráficos serializados desde elementos canvas en imágenes base64 cuando se usa el flag de canvas.
Cómo funciona
- 01Deje que el usuario elija una estrategia
Antes de cualquier extracción, el agente presenta la comparación A/B, recomienda la ruta de Puppeteer y espera una elección explícita.
- 02Ejecute el script de instantánea por ruta
Un comando por URL, que escribe cada captura en su propio archivo dentro de .stitch con una espera fija tras la inactividad de red.
- 03Deje que el script inserte la página en línea
Las reglas CSSOM, las hojas de estilo enlazadas, las imágenes, las fuentes srcset y las fuentes de iconos del mismo origen se pliegan dentro del archivo, de modo que nada depende de un servidor en ejecución.
- 04Ajuste los flags al framework
Los tiempos de espera y las URLs difieren según el stack, por ejemplo una espera más larga cuando el framework hidrata el markup renderizado en el servidor.
- 05Autentique páginas con acceso restringido
Un módulo de autenticación se ejecuta dentro de la sesión de Puppeteer, tras lo cual el script vuelve a la URL original con la sesión ya establecida.
- 06Recurra a un mock solo si es necesario
Cuando la aplicación no puede arrancar en absoluto, la ruta del apéndice reduce los componentes a un único archivo JSX en lugar de capturar un render en vivo.