# Stitch::extract Static HTML

Extract self-contained static HTML from a built web application or React components by...

- Repository: https://github.com/google-labs-code/stitch-skills (8654 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-08-17
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add google-labs-code/stitch-skills --skill stitch::extract-static-html -g -a claude-code -y`
Codex: `npx skills add google-labs-code/stitch-skills --skill stitch::extract-static-html -g -a codex -y`
Cursor: `npx skills add google-labs-code/stitch-skills --skill stitch::extract-static-html -g -a cursor -y`
Gemini CLI: `npx skills add google-labs-code/stitch-skills --skill stitch::extract-static-html -g -a gemini-cli -y`

## Description

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'.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

The rest: https://github.com/google-labs-code/stitch-skills/blob/HEAD/plugins/stitch-design/skills/extract-static-html/SKILL.md