Agent skill · software engineering · google-labs-code
stitch::extract-static-html
Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.
Why this skill is useful
Adds a Puppeteer script for capturing static HTML with inlined assets that the AI wouldn't reliably generate on its own.
What it needs
Requires node, puppeteer installed locally. About 6k tokens when loaded. Last updated 2026-07-30. 7,933 stars on the source repository.
What this skill does
Extract Static HTML Extract a self-contained static HTML file from any web application. Which Strategy to Use You MUST ask the user to choose which strategy to use before proceeding. Present the options clearly, recommend Strategy A as the preferred default, and provide a brief pros/cons summary for each option to help them make an informed decision. Strategy A (Puppeteer) Strategy B (Browser Subagent) :--- :--- :--- When App runs locally, no auth wall Need to interact with page first (click, fill forms) Fidelity Highest — computed styles resolved High — rendered DOM Setup Zero — no mock needed Zero — no mock needed Framework Any Any Output Writes to file — no size limit May truncate in agent context [!WARNING] Checkpoint — User Confirmation Required. You MUST ask the user which strategy they prefer before proceeding. Present the comparison table above, recommend Strategy A as the default, and wait for explicit approval. Do NOT make the decision yourself or proceed until the user confirms. Strategy A: Puppeteer Snapshot (Recommended) Launches headless Chrome, captures the fully rendered DOM, and produces a self-contained HTML file with all CSS inlined and images as base64. Works with any framework — no MockPage.jsx needed. Prerequisites App running locally (e.g., npm run dev) Node.js with puppeteer available (check: node -e "require('puppeteer')") Workflow 1. Start the App and note the port. [!WARNING] Checkpoint — User Confirmation Required. After starting the local server, you MUST pause and ask the user for confirmation before running the snapshot script or launching a browser subagent. Report the URL and port to the user so they can verify the app is running and rendering correctly. Do NOT proceed to the snapshot step until the user confirms. 2. Run the Snapshot Script: 3. Multiple pages — run once per route: 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills google-labs-code/extract-static-html