extract-static-htmllisted
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