← ClaudeAtlas

extract-static-htmllisted

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'.
coachpo/plugins-claude · ★ 0 · Web & Frontend · score 68
Install: claude install-skill coachpo/plugins-claude
# Extract Static HTML Extract a self-contained static HTML file from any web application. ## Which Strategy to Use Default to **Strategy A** unless the page needs interaction before capture (clicks, form fills, auth) — then use Strategy B. Tell the user which strategy you chose and why. Ask only when neither clearly fits (e.g., the app can't run locally and no browser MCP is available). | | Strategy A (Puppeteer) | Strategy B (Browser MCP) | | :--- | :--- | :--- | | **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 | *** ## 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. > After starting the local server, report the URL and port, then proceed > with the snapshot. If the app fails to render (blank page, console > errors, missing assets), stop and surface the issue to