Nos termos do próprio skill
Produz um único arquivo HTML autocontido a partir de um app web em execução, iniciando o Chrome headless via Puppeteer, capturando o DOM totalmente renderizado, incorporando regras CSSOM e convertendo imagens em data URIs base64. Funciona com qualquer framework — React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook — sem necessidade de MockPage.jsx.
A skill obriga o agente a perguntar qual das duas estratégias de captura usar antes de continuar, recomendando o snapshot via Puppeteer, e a pausar para confirmação após o servidor local iniciar. As flags cobrem tempo de espera, viewport, modo escuro, remoção de elementos fixos, incorporação de canvas e um script de autenticação para páginas com login. Um apêndice documentado converte componentes React em um MockPage.jsx manual quando o app não pode ser executado localmente.
O que ele produz
- Um arquivo HTML autocontido para cada rota capturada, com estilos incorporados e imagens embutidas como base64.
- Um arquivo por rota quando você captura várias visualizações, por exemplo home, pricing e dashboard.
- Gráficos serializados a partir de elementos canvas em imagens base64 quando a flag de canvas é usada.
Como funciona
- 01Deixe o Usuário Escolher uma Estratégia
Antes de qualquer extração, o agente apresenta a comparação A/B, recomenda a rota via Puppeteer e espera por uma escolha explícita.
- 02Execute o Script de Snapshot por Rota
Um comando por URL, gravando cada captura em seu próprio arquivo em .stitch com uma espera fixa após o network idle.
- 03Deixe o Script Incorporar a Página
Regras CSSOM, folhas de estilo vinculadas, imagens, fontes srcset e fontes de ícones da mesma origem são incorporadas ao arquivo, de modo que nada dependa de um servidor em execução.
- 04Ajuste as Flags ao Framework
Os tempos de espera e URLs variam por stack, por exemplo uma espera mais longa quando o framework hidrata markup renderizado no servidor.
- 05Autentique Páginas Protegidas
Um módulo de autenticação é executado dentro da sessão do Puppeteer, após o qual o script retorna à URL original com a sessão já estabelecida.
- 06Recorra a um Mock Apenas se Necessário
Quando o app não consegue inicializar de forma alguma, a rota do apêndice converte componentes em um único arquivo JSX em vez de capturar uma renderização real.