stitch::extract-static-html
An agent skill by google-labs-code, from google-labs-code/stitch-skills. Tags: automation, design, documents, html, web.
What it does
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'.
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add google-labs-code/stitch-skills --skill 'stitch::extract-static-html'Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/google-labs-code/stitch-skills
cp -r stitch-skills/plugins/stitch-design/skills/extract-static-html ~/.claude/skills/'stitch::extract-static-html'Safety box score
Grade C, moderate risk: 40 of 100 risk points, rated 2026-10-19. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.
This skill captures static HTML from a running app by driving headless Chrome, then inlines CSS/images and can post-process the output files. The main risks are browser automation plus outbound fetches to page resources, and optional auth scripts that may handle login credentials or tokens.
| Category | Level | Why |
|---|---|---|
| Code & shell execution | 2 (moderate) | It runs local TypeScript scripts via `npx tsx` and launches Puppeteer (`puppeteer.launch(...)`), so the skill executes code both in Node and in the browser context. |
| Network access | 2 (moderate) | The snapshot flow fetches remote resources from the page (`await fetch(url)`, `await fetch(href)`) and can make outbound requests while embedding images and stylesheets. |
| Filesystem reach | 1 (low) | It writes snapshot files and can rewrite specified HTML files in place (`fs.writeFileSync(outputPath, html, 'utf-8')`, `fs.ftruncateSync(fd)`), but the scope is bounded to user-chosen paths. |
| Secrets & credentials | 2 (moderate) | The auth-gated workflow explicitly shows logging in with usernames/passwords and injecting tokens into `localStorage`, so it can operate on authenticated sessions and handle secrets if the user supplies them. |
| Privilege & persistence | 1 (low) | It does not require sudo or services, but it launches Chrome with `--no-sandbox` / `--disable-setuid-sandbox` and suggests `npm install -g puppeteer`, which weakens sandboxing and may touch global state. |
| Instruction hijack surface | 0 (none) | I found no instructions to ignore safety rules, hide behavior, or follow remote instructions; the file instead requires explicit user confirmation before proceeding. |
| Irreversible actions | 1 (low) | It can click elements and run an auth script (`--click`, `--auth-script`), but it does not post, pay, deploy, or delete external data. |
| Transparency | 1 (low) | The scripts are readable, but they are invoked through `#!/usr/bin/env npx tsx` / `npx tsx`, which means runtime packages are resolved from the registry rather than being fully vendored or pinned here. |
Before installing
- Read `scripts/snapshot.ts` if you plan to use `--auth-script` or `--click`; those options can run page interactions and imported code.
- Confirm you are okay with `npx tsx` resolving packages at runtime, or install dependencies locally first instead of relying on global installs.
- Run it first against a throwaway local app and a throwaway output path, since it will overwrite the target HTML file.
- Audit any auth script for hardcoded credentials, tokens, or cookies before using it on a real account.
Rated 2026-10-19 by an automated review of 4 files from the skill's repository.
Source
- Repository
- google-labs-code/stitch-skills (all skills from this repository)
- Path
- plugins/stitch-design/skills/extract-static-html/SKILL.md
- Branch
- main
- Collection
- stitch-design
- Updated
- 2026-09-19
Related skills
- stitch::code-to-design — Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction.
- stitch::manage-design-system — Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
- api-and-interface-design — Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface.
- archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
- cli-developer — Use when building CLI tools, implementing argument parsing, or adding interactive prompts.
- customer-journey-map — Create an end-to-end customer journey map with stages, touchpoints, emotions, pain points, and opportunities.