Dans les termes du Skill
Produit un fichier HTML autonome unique à partir d'une application web en cours d'exécution en lançant Chrome headless via Puppeteer, en capturant le DOM entièrement rendu, en intégrant les règles CSSOM et en convertissant les images en URI de données base64. Il fonctionne avec n'importe quel framework — React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook — sans MockPage.jsx requis.
Le skill oblige l'agent à demander laquelle des deux stratégies de capture utiliser avant de poursuivre, en recommandant l'instantané Puppeteer, puis à s'arrêter pour confirmation une fois le serveur local démarré. Les flags couvrent le temps d'attente, le viewport, le mode sombre, la suppression des éléments fixes, l'intégration du canvas et un script d'authentification pour les pages protégées par connexion. Une annexe documentée aplatit les composants React en un MockPage.jsx manuel lorsque l'application ne peut pas s'exécuter localement.
Ce qu'il produit
- Un fichier HTML autonome par route capturée, avec les styles intégrés et les images encodées en base64.
- Un fichier par route lorsque vous capturez plusieurs vues, par exemple l'accueil, les tarifs et le tableau de bord.
- Des graphiques sérialisés à partir d'éléments canvas en images base64 lorsque le flag canvas est utilisé.
Fonctionnement
- 01Laisser l'utilisateur choisir une stratégie
Avant toute extraction, l'agent présente la comparaison A/B, recommande la voie Puppeteer et attend un choix explicite.
- 02Exécuter le script d'instantané par route
Une commande par URL, écrivant chaque capture dans son propre fichier dans .stitch avec un temps d'attente fixe après l'inactivité du réseau.
- 03Laisser le script intégrer la page
Les règles CSSOM, les feuilles de style liées, les images, les sources srcset et les polices d'icônes de même origine sont intégrées dans le fichier afin que rien ne dépende d'un serveur en cours d'exécution.
- 04Ajuster les flags au framework
Les temps d'attente et les URL diffèrent selon la stack, par exemple une attente plus longue lorsque le framework hydrate un balisage rendu côté serveur.
- 05Authentifier les pages protégées
Un module d'authentification s'exécute dans la session Puppeteer, après quoi le script retourne à l'URL d'origine avec la session en place.
- 06Se rabattre sur un mock seulement si nécessaire
Lorsque l'application ne peut pas démarrer du tout, la voie de l'annexe aplatit les composants en un seul fichier JSX au lieu de capturer un rendu réel.