stitch::extract-static-htmlby Google Labs

Stitch Extract Static HTML Skill.

A Claude Code and Codex skill for UI design: extracts self-contained static HTML snapshots with inlined CSS and images.

Web & UI
HTML

google-labs-code/stitch-skills · plugins/stitch-design/skills/extract-static-html/SKILL.mdSKILL.md

--- name: stitch::extract-static-html 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'. --- ## Which Strategy to Use ## Strategy A: Puppeteer Snapshot (Recommended) ## Strategy B: Browser Subagent Capture ## Appendix: Static Fallback (MockPage.jsx)

Front matter and section headings read from the upstream file on 2026-09-14 · 10,732 characters in full

01 What it does

What the stitch::extract-static-html Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Produces a single self-contained HTML file from a running web app by launching headless Chrome through Puppeteer, capturing the fully rendered DOM, inlining CSSOM rules and converting images to base64 data URIs. It works with any framework — React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook — with no MockPage.jsx required.

The skill forces the agent to ask which of two capture strategies to use before proceeding, recommending the Puppeteer snapshot, and to pause for confirmation after the local server starts. Flags cover wait time, viewport, dark mode, fixed-element removal, canvas inlining and an auth script for login-gated pages. A documented appendix flattens React components into a manual MockPage.jsx when the app cannot run locally.

What it produces

A self-contained HTML file per captured route, with styles inlined and images embedded as base64.
One file per route when you capture several views, for example home, pricing and dashboard.
Charts serialized from canvas elements into base64 images when the canvas flag is used.

See the example prompt ↗

How It Works

01
Let the User Pick a Strategy
Before any extraction the agent presents the A/B comparison, recommends the Puppeteer route and waits for an explicit choice.
02
Run the Snapshot Script per Route
One command per URL, writing each capture to its own file in .stitch with a fixed wait after network idle.
03
Let the Script Inline the Page
CSSOM rules, linked stylesheets, images, srcset sources and same-origin icon fonts are folded into the file so nothing depends on a running server.
04
Adjust Flags to the Framework
Wait times and URLs differ by stack, for example a longer wait when the framework hydrates server-rendered markup.
05
Authenticate Gated Pages
An auth module runs inside the Puppeteer session, after which the script returns to the original URL with the session in place.
06
Fall Back to a Mock Only if Needed
When the app cannot boot at all, the appendix route flattens components into one JSX file instead of capturing a live render.

02 Find your fit

When to Use the stitch::extract-static-html Skill

Use the stitch::extract-static-html skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

You need to capture a particular UI state and hand someone a static version of the page.
You are preparing assets to upload into Stitch.
The app runs locally in any framework and you would rather not write a MockPage.jsx.
You have to click, fill or navigate before the page reaches the state you want.
You want a single Storybook story rather than a whole app route.

Know the Boundaries

Large pages captured through the browser subagent can be cut off by the agent context window.
The manual flattening route is discouraged whenever the app can actually be started.
External fonts are not converted to data URIs, only same-origin and relative assets are.
UI states unreachable by navigation, such as error screens and empty states, need the mock route instead.

What to Provide

Your choice of strategyThe agent will not start without an explicit decision between the Puppeteer snapshot and the browser subagent.
The app running on localhostA server you can reach, for example started with the project's dev script, since the script fetches from the live page.
An output file path--output is required, so decide where each captured route lands, typically under .stitch.
An auth module for gated pagesA JS/TS file whose default export is an async function receiving the Puppeteer page, used for login forms, tokens or module injection.
A Node environment with puppeteerThe snapshot script is run with npx tsx and needs puppeteer resolvable in that environment.

03 Inside the skill

Rules the stitch::extract-static-html Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Never Pick the Strategy Yourself
The agent must not choose between Puppeteer and the browser subagent on the user's behalf, or continue until the user confirms.
Strategy a Is the Stated Default
The options must be presented clearly with Strategy A recommended and a short pros/cons summary for each.
Checkpoint Before Snapshotting
After starting the local server the agent must pause and get confirmation before running the snapshot script or launching a browser subagent.
Kill the Dev Server Afterwards
A dev server started only for extraction has to be stopped or its background task terminated once capture is complete.
Wait 1000 Ms by Default
--wait defaults to 1000 ms after network idle and must be raised for lazy-loading apps; --viewport defaults to 1280x800.
Ship No Scripts
The output carries no script tags; Vite HMR dev style blocks (createHotContext, import.meta.hot) and dev overlays are stripped.
Fixed Elements Are opt-in
--remove-fixed defaults to false and is the flag for clearing cookie banners and chat widgets out of the capture.
Flatten Everything for the Mock Path
The appendix fallback is not a live capture; it requires manually flattening React components into a single JSX file.

04 Put it to work

Install stitch::extract-static-html in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add stitch::extract-static-html to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-static-html

Generic skills CLI form for plugins/stitch-design/skills/extract-static-html/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

The app is running at http://localhost:5173. Snapshot the [dashboard] route to .stitch/dashboard.html with --html-class dark and --inline-canvas, and pass --wait 5000 because the ECharts graphs load late. That page sits behind a login guard, so run it with my [auth-myapp.ts] script first.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Stop the dev server and open the saved file: if images break, the srcset inlining did not hold and the fallback to the inlined src matters.
Read the script log for the count of inlined images before trusting the output.
If icons come out as text or a serif fallback font, the CSSOM capture or the @font-face inlining did not happen.
A light page despite asking for dark means the html-class flag was missing from the run.
Graphs rendering as empty boxes mean the canvas flag was not passed.
On Next.js, optimized images only inline while the dev server is still up during capture.

In OpenDesign import stitch::extract-static-html from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill file: plugins/stitch-design/skills/extract-static-html/SKILL.md Content checksum recorded at verification; commit 0337446
License: Apache-2.0 From LICENSE.
Repository stars: 8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for stitch::extract-static-html.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Which Strategy to UseComparison table of Puppeteer vs browser subagent; the agent must get user approval before proceeding.
Strategy A: Puppeteer Snapshot (Recommended)Headless Chrome snapshot, self-contained HTML, works with any framework, no MockPage.jsx required.
Script FlagsDefaults for the url, output, wait, viewport, html-class, remove-fixed, full-height, title, auth-script and inline-canvas flags.
What It Does AutomaticallyCSSOM capture, stylesheet and image inlining, srcset cleanup, script and HMR removal, url() resolution.
Framework NotesWait times and default URLs for React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook and SSR.
TroubleshootingSymptom-to-flag table covering missing images, icon fonts, dark mode, cookie banners, auth and canvases.
Auth-Gated PagesWriting a Puppeteer auth module; the script re-navigates after login to the original url.
Strategy B: Browser Subagent CaptureSubagent navigates and interacts, then extracts outerHTML; large pages may truncate in agent context.
Appendix: Static Fallback (MockPage.jsx)Last-resort extract_inline_html.ts run against a hand-flattened MockPage.jsx when the app cannot run.
MockPage.jsx RulesInclude full layout, flatten conditionals, hardcode data, preserve logos, drop floating elements.
Post-Processingpost_process.ts inlines local images using the app directory as base-dir.

The Skill's Own 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'.”

Front-matter description from SKILL.md. The full file is about 10,732 characters. Read the full file on GitHub.

Stitch Extract Static HTML

Run stitch::extract-static-html on a Real UI Design Task.

Download OpenDesign, import stitch::extract-static-html from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-static-html

What the stitch::extract-static-html Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the stitch::extract-static-html Skill

Good Fit

Know the Boundaries

What to Provide

Rules the stitch::extract-static-html Skill Gives Claude Code and Codex

Never Pick the Strategy Yourself

Strategy a Is the Stated Default

Checkpoint Before Snapshotting

Kill the Dev Server Afterwards

Wait 1000 Ms by Default

Ship No Scripts

Fixed Elements Are opt-in

Flatten Everything for the Mock Path