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.
How do you install this skill?
- 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.
- Shell / CLI
- Network access
- Local filesystem
- MCP Server
Node.jspuppeteertsx
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.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/stitch-design/skills/extract-static-html" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Extract a static HTML snapshot of http://localhost:3000/profile.
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.
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 does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Stitch Static HTML Extractor this page | 49 · Use with care | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch React Component Builder | 45 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Frontend Design Extractor | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Prompt Refiner | 49 · Use with care | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Design System Synthesizer | 45 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
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.
How did FollowSkills review this skill?
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.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →