Nelle parole della skill
Genera un singolo file HTML autonomo a partire da una web app in esecuzione, avviando Chrome headless tramite Puppeteer, catturando il DOM completamente renderizzato, inserendo inline le regole CSSOM e convertendo le immagini in data URI base64. Funziona con qualsiasi framework — React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook — senza bisogno di MockPage.jsx.
La skill obbliga l'agente a chiedere quale delle due strategie di acquisizione utilizzare prima di procedere, raccomandando lo snapshot con Puppeteer, e a fermarsi per una conferma dopo l'avvio del server locale. I flag riguardano il tempo di attesa, il viewport, la modalità scura, la rimozione degli elementi fissi, l'inlining dei canvas e uno script di autenticazione per le pagine protette da login. Un'appendice documentata riduce i componenti React a un MockPage.jsx manuale quando l'app non può essere eseguita in locale.
Che cosa produce
- Un file HTML autonomo per ogni route acquisita, con gli stili inseriti inline e le immagini incorporate come base64.
- Un file per route quando si acquisiscono più viste, ad esempio home, pricing e dashboard.
- Grafici serializzati dagli elementi canvas in immagini base64 quando si utilizza il flag canvas.
Come funziona
- 01Lasciare Scegliere la Strategia all'Utente
Prima di qualsiasi estrazione l'agente presenta il confronto A/B, raccomanda la strada di Puppeteer e attende una scelta esplicita.
- 02Eseguire lo Script di Snapshot per Ogni Route
Un comando per ogni URL, che scrive ogni acquisizione nel proprio file in .stitch con un'attesa fissa dopo l'inattività di rete.
- 03Lasciare che lo Script Inserisca la Pagina Inline
Le regole CSSOM, i foglio di stile collegati, le immagini, le sorgenti srcset e i font icona dello stesso dominio vengono incorporati nel file, così nulla dipende da un server in esecuzione.
- 04Adattare i Flag al Framework
I tempi di attesa e gli URL variano in base allo stack, per esempio un'attesa più lunga quando il framework effettua l'hydration di markup renderizzato dal server.
- 05Autenticare le Pagine Protette
Un modulo di autenticazione viene eseguito all'interno della sessione Puppeteer, dopo il quale lo script ritorna all'URL originale con la sessione già impostata.
- 06Ricorrere a un Mock Solo se Necessario
Quando l'app non può essere avviata in alcun modo, l'appendice riduce i componenti a un unico file JSX invece di acquisire un rendering live.