Stitch Static HTML Extractor
Turn a rendered web page into a self-contained HTML snapshot for sharing or Stitch upload.
The documentation requires confirmation before strategy selection and before browser capture, and discloses image inlining; the scripts include protocol checks, private IPv4 blocking, redirect limits, timeouts, and file-size limits. Points are deducted because allowed-tools includes Bash, Write, and web_fetch, outbound resources are still fetched, sensitive-data handling, credential isolation, complete DNS/IPv6 SSRF protection, and rollback are not specified, and post_process rewrites files in place.
The scripts include argument validation, timeouts, concurrency limits, fallbacks, warnings, and partial machine-readable statistics, so the main paths are statically coherent. Points are deducted because no tests or execution evidence are provided, dependencies are installed through npx or the environment without pinned versions, framework/authentication/iframe/CSS/JSX edge coverage is incomplete, and some failures continue with placeholder images or warnings that can yield incomplete output.
The target scenarios, two capture strategies, fallback method, parameters, and several limitations are documented. Points are deducted because trigger conditions remain broad, non-fit boundaries for private pages, complex interaction, cross-origin assets, and dynamic behavior are not precise, Chinese-language interaction is not documented, and Stitch MCP, remote assets, and Puppeteer network reachability from mainland China are not addressed.
SKILL.md is layered into strategies, prerequisites, workflows, flags, framework notes, and troubleshooting; repository materials provide Apache-2.0 licensing, installation guidance, and examples. Points are deducted because the skill does not identify maintainers, versioning policy, changelog, upgrade path, or a standalone dependency manifest, and the documented Strategy B may not fully match the script capabilities.
The skill clearly targets self-contained HTML with inlined CSS and images and offers Puppeteer, browser interaction, and MockPage fallback workflows; the intended artifact is potentially directly usable for sharing or Stitch upload. Points are deducted because no third-party execution evidence or representative output is included, dynamic state, fonts, cross-origin assets, authentication, and complex JSX may require manual repair, and static materials do not sufficiently prove complete snapshot fidelity.
The source code, parameters, validation logic, and security handling are auditable, with comments explaining some design choices. Points are deducted because the supplied material shows no key-path test suite, CI results, pinned-dependency verification, or independent reproduction report; evidence is confined to one repository and cannot meet the stronger executable-reproduction standard.
- Confirm that captured pages do not contain personal, session, or confidential data; the scripts may request and inline remote images.
- post_process overwrites HTML files in place by default; create a backup first.
- No execution evidence is supplied; validate separately with the target framework, authentication state, cross-origin assets, and mainland-China network conditions.
What does this skill do, and when should you use it?
This skill supports Google Stitch MCP workflows by extracting self-contained static HTML from built web applications or React components. It inlines CSS and converts images to Base64 data URIs. Its preferred method uses Puppeteer to capture a rendered page, while a browser-subagent method handles pages that require interaction first. It is a good fit for developers who need to preserve a UI state, share a static page, or prepare HTML for Stitch.
It accesses a locally running web application, uses Puppeteer to capture the rendered DOM, inlines linked stylesheets and relative CSS URLs, converts img, srcset, and source srcset images to Base64 data URIs, removes scripts and development overlays, and writes a static HTML file. For interactive pages, a browser subagent can click, fill forms, navigate, and extract document.documentElement.outerHTML. If the application cannot run, the documented fallback uses a flattened MockPage.jsx with extract_inline_html.ts and post_process.ts.
- A frontend developer needs a complete snapshot of a route on a local development server.
- A designer or product team wants to share a specific UI state as a static file.
- A Stitch user needs to prepare a web page as uploadable HTML.
- A page requires button clicks, form entry, or tab navigation before capture.
- An application has an authentication wall or broken runtime and needs a manually flattened fallback page.
What are this skill's strengths and limitations?
- Produces self-contained HTML with inlined CSS and images for sharing or upload.
- The Puppeteer method resolves computed styles and is documented as the highest-fidelity option.
- Includes notes for React, Vue, Svelte, Next.js, Storybook, and SSR applications.
- Supports multiple routes, dark mode, full-page height, and removal of fixed elements.
- The documented workflow requires user confirmation when choosing a capture strategy and after starting the local server.
- The main workflow depends on a locally running app, Node.js, Puppeteer, and tsx.
- Browser-subagent extraction may truncate large pages in the agent context.
- The source provides no test suite, version compatibility matrix, or empirical platform test results.
How do you install this skill?
The skill is located at plugins/stitch-design/skills/extract-static-html/ in the repository. To install skills selectively from the repository, run: npx skills add google-labs-code/stitch-skills. The README also documents registering the Stitch Skills marketplace and installing the stitch-design plugin. Before use, configure and run the Stitch MCP server in the agent environment; the source does not document a separate one-skill installation command.
How do you use this skill?
Start the application locally and verify that Node.js can load puppeteer. Use a prompt such as “Extract a static HTML snapshot of http://localhost:3000/profile.” Choose between the documented Puppeteer and browser-subagent strategies: Puppeteer is intended for locally running pages without an auth wall, while the browser subagent is intended for pages requiring interaction. A Puppeteer example is: npx tsx <SKILL_DIR>/scripts/snapshot.ts --url http://localhost:5173 --output .stitch/home.html --wait 2000. If the application cannot run, use the documented extract_inline_html.ts and post_process.ts fallback workflow.
How does this skill compare with similar options?
The documentation presents Puppeteer snapshotting and browser-subagent capture as the two main alternatives. Puppeteer is for locally running pages without interaction, offers higher computed-style fidelity, and writes directly to a file; the browser subagent is for pages requiring clicks or form entry but may truncate large output. MockPage.jsx is described as a last-resort fallback when the application cannot run.