Guide · Agent skill

How to use the Extract Static HTML agent skill

Updated 2026-11-02 · written with AI from the project's own documentation and checked against our catalogue data

The Extract Static HTML skill (stitch::extract-static-html) lets an AI agent take a web page that is running locally and save it as one HTML file with its CSS and images built in, so the file opens without the original project. It is useful for front-end developers, designers and teams who want a frozen copy of a UI state to share or review. This guide explains what the skill does, how to install it, how to ask for it, and what to check before running it.

Extract Static HTMLgoogle-labs-code/stitch-skills · Apache-2.0 Download the skill

Quick start

1Download and unzip the skill. Download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
2Check prerequisites. Confirm Node.js and the puppeteer package are available, and that npx tsx can run.
3Start your local app. Run your dev server, such as npm run dev, and note the URL and port.
4Make a natural request. Ask the agent to save the HTML or mock the view of a page, then choose Strategy A or B when asked.
5Confirm before capture. When the agent reports the URL and port, verify the page looks right and approve the snapshot.
6Review the output file. Open the saved HTML file, such as .stitch/home.html, in a browser and check images, icons and styling.

What is an agent skill and what does this one do?

An agent skill is a folder of instructions and scripts that an AI agent can load when a task matches the skill's description. This skill covers one job: turning a built web application or its React components into a single static HTML file.

The output is a snapshot. It is fixed HTML, so it will not update with new data or server behaviour. The skill's own description says it is meant for capturing a specific UI state, sharing a static version of a page, or preparing assets for Stitch upload.

Install the Extract Static HTML skill

Download the skill as a ZIP from this page and unzip it. Then choose one of these locations:

You can install it for yourself across all projects by unzipping it into ~/.claude/skills/. You can also install it for a single project by unzipping it into that project's .claude/skills/ folder.

If you use the Claude apps, you can upload the skill instead under Settings → Capabilities → Skills.

Personal: ~/.claude/skills/
Single project: .claude/skills/ inside the project
Claude apps: Settings → Capabilities → Skills (upload)

Check the requirements before you run it

The snapshot script runs on Node.js and needs npx tsx and the puppeteer npm package, which drives headless Chrome. The page you want to capture must already be running locally, for example with npm run dev.

If the page is behind a login, you need to write your own auth script. The source does not name a required Stitch account; it only implies one is needed for uploading output.

Node.js
npx tsx
puppeteer (npm package, with headless Chrome)
A locally running web app to capture
Optional: an auth script you write for login-protected pages

node -e "require('puppeteer')"

Ask the agent for it with natural requests

You do not need to name the skill. The skill triggers when you ask to capture a specific UI state, share a static version of a page, prepare assets for Stitch upload, or even just save the HTML or mock the view.

Before it runs anything, the agent must ask you to choose a capture strategy and wait for your approval. Strategy A (Puppeteer snapshot) is the recommended default. Strategy B uses a browser subagent and is better when you need to click or fill forms first. After you start your local server, the agent will also pause and report the URL and port so you can confirm the page renders correctly.

"Save the HTML of the dashboard running on localhost:5173."
"Mock the view of the settings page so I can share it."
"Prepare the home page as static HTML for Stitch upload."

Run a snapshot yourself with the script

The skill calls scripts/snapshot.ts. Each route needs its own run. The --output flag sets the file path, and --wait sets the extra time in milliseconds after network idle. A dark-mode route can add --html-class dark.

--url (required): URL to capture
--output (required): output file path
--wait (default 1000): extra wait in ms, increase for lazy-loading apps
--viewport (default 1280x800): size as WIDTHxHEIGHT
--html-class: class(es) for the html element, e.g. dark
--remove-fixed: remove fixed or sticky elements such as cookie banners and chat widgets
--full-height: resize viewport to full scroll height
--title: override the page title, e.g. /dashboard
--auth-script: path to a module exporting a default async (page) function
--inline-canvas: convert canvas charts (ECharts, Chart.js, D3) to base64 img tags

npx tsx <SKILL_DIR>/scripts/snapshot.ts \
  --url http://localhost:5173 \
  --output .stitch/home.html \
  --wait 2000

Fix common problems

Most problems come from the page loading too quickly. Increasing --wait fixes missing images in many cases. If you see a cookie banner, add --remove-fixed. If charts show as blank boxes, add --inline-canvas. If the script reports Cannot find module 'puppeteer', the source suggests running npm install -g puppeteer.

Stop any dev server you started only for extraction once the capture is done.

Missing images: increase --wait
Dark mode missing: --html-class dark
Cookie banner in output: --remove-fixed
Blank chart boxes: --inline-canvas
Login required: --auth-script with your own file

What people use it for

Sharing a static copy of a page with a reviewer who does not run the project.
Capturing a dashboard in dark mode using --html-class dark.
Freezing a route such as /pricing or /settings/profile as a separate HTML file.
Preparing page assets for upload to Stitch.
Capturing a Storybook story by passing its story URL to --url.

Frequently asked questions

Is the Extract Static HTML skill free?

The source is published under the Apache-2.0 licence, which is stated on this page. The source does not mention pricing. Check the licence text in the repository for the full terms.

What do I need to install before using this skill?

You need Node.js, npx tsx, and the puppeteer npm package with headless Chrome. The web app you want to capture must be running locally, for example with npm run dev.

Where do I put the skill folder?

Unzip the downloaded ZIP into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings → Capabilities → Skills.

Can it capture pages that require a login?

Yes, with the --auth-script flag. You write a small module that exports a default async function taking a Puppeteer page, which fills a login form, sets cookies or localStorage, or calls the app's login code.

Will the saved HTML update when my data changes?

No. The output is a fixed snapshot of the rendered page. Run the script again to capture a new state.

Does the skill run code and use the network?

Yes. It runs bundled scripts, including scripts/snapshot.ts, and it loads the page in a headless browser. The saved HTML contains everything rendered, so check it before sharing, especially for pages with sensitive data.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are a front-end developer, designer or team that needs a frozen, shareable HTML copy of a locally running page, including dark-mode or specific routes. Pick something else if you need live data, server behaviour, or a tool that handles sensitive logged-in pages without writing captured content to disk.

Download the skill