Stitch::extract Static HTML
Extract self-contained static HTML from a built web application or React components by...
Install
npx skills add google-labs-code/stitch-skills --skill stitch::extract-static-html -g -a claude-code -y- Repository
- google-labs-code/stitch-skills8.7k
- Category
- Design
- Updated
- 3mo ago
- License
- Apache-2.0
- Context cost
- Mediumabout 2,569 tokens
- Runs scripts
- Yes, review before use
What it does
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'.
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
puppeteeravailable (check:node -e "require('puppeteer')")
Workflow
- Start the App and note the port.
