Skip to content
Get packs

Extract Static HTML

Save a running web app page as one self-contained HTML file with styles and images inlined

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
4 files

What it does

When installed, the agent can take a web page that is running locally (for example a React, Vue or Angular app started with npm run dev) and save it as a single HTML file with its CSS and images embedded inside, so it opens anywhere without the original project. It runs a bundled script that loads the page in a headless Chrome browser via Puppeteer, captures the rendered result, and writes it to a file. It asks the user to choose between two capture methods and to confirm before it starts a browser or script.

Great for

  • Front-end developers who want a static snapshot of a UI state to share or review
  • Designers preparing page assets for upload to Stitch
  • Teams that need a frozen copy of a route, such as a dashboard in dark mode

Skip it if

  • Apps that need live data or server behaviour, since the saved file is a static picture and will not update (reason: output is fixed HTML)
  • Pages behind real logins or sensitive data, because the saved HTML contains everything rendered and may be shared unintentionally (reason: captured content is written to disk in plain form)

Try asking

  • “Save the home page of my local React app as a static HTML file for Stitch”
  • “Snapshot the /pricing and /dashboard routes in dark mode with the cookie banner removed”
  • “Capture the settings page of my Vue app, which requires login, using an auth script”
Step-by-step guide: how to use Extract Static HTMLInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the Apache-2.0 licence and an attribution note.

    extract-static-html.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip extract-static-html.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip extract-static-html.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Start the app first and confirm the URL and port, since the skill pauses for your approval before capturing.
  • Increase --wait for lazy-loaded or server-rendered apps if images or content are missing.
  • Review the generated HTML before sharing it, since it embeds everything rendered on the page, including any personal data shown.

What's inside

  • scripts/extract_inline_html.ts
  • scripts/post_process.ts
  • scripts/snapshot.ts
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.