102.7K+Download
Skip to the usage guide
stitch::extract-static-htmlby Google Labs

Stitch Extract Static HTML Skill.

A skill for capturing static HTML snapshots with inlined CSS and images; external resources may still need network access.

  • Web & UI
  • HTML
Download OpenDesignView usage guide
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 static HTML snapshot per route, with captured styles and images embedded; external fonts may still require network access.
  • 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

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

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

  3. 03
    Let the Script Inline the Page

    The Puppeteer path inlines styles, images, srcset entries and same-origin icon fonts. External fonts may remain network-dependent; inspect the saved result rather than assuming every resource is embedded.

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

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

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

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

  2. Strategy a Is the Stated Default

    The options must be presented clearly with Strategy A recommended and a short pros/cons summary for each.

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

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

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

  6. Ship No Scripts

    The output carries no script tags; Vite HMR dev style blocks (createHotContext, import.meta.hot) and dev overlays are stripped.

  7. Removing Fixed Elements Is Opt-in

    --remove-fixed defaults to false and is the flag for clearing cookie banners and chat widgets out of the capture.

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

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

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

  • Open the saved file with the capture-only server stopped, or otherwise test it separately from the app, and inspect missing resources. Do not stop a shared development server.
  • Check the image-inlining log and inspect src/srcset if images are missing.
  • Inspect captured CSSOM and font resources if icons appear as text or fallback glyphs.
  • If dark mode is missing, check --html-class and whether the app uses another theme mechanism.
  • If charts are blank, check --inline-canvas and whether the chart finished rendering before capture.
  • For Next.js optimized images, keep the app server available during extraction.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead 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

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

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

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