skills.rest
tranhoainam298
tranhoainam298COMMUNITY
Explore all skills by this author →
GitHub

stitch::extract-static-html

Extract self-contained static HTML from running web apps by inlining CSS and images.

1|Updated Jun 27, 2026
Search Tags:#react#puppeteer#stitch#html extraction#base64 images#css inlining#static snapshot
One-click install
npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-extract-static-html-tranhoainam298
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch::extract-static-html
Source: https://github.com/tranhoainam298/qr-parking-booking-system/tree/main/.claude/plugins/stitch-design/skills/extract-static-html
Command: npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-extract-static-html-tranhoainam298

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, @babel/parser, @babel/traverse, @babel/generator, tsx, and includes scripts (resource) components.

What problem does it solve? Capturing a specific UI state from a live web application as a single portable HTML file is difficult because styles, images, and scripts are spread across many resources. This Skill produces a fully self-contained HTML snapshot with all CSS inlined and images embedded as base64, ready to share or upload to Stitch. ## Core Features & Use Cases - Puppeteer Snapshot: Launch headless Chrome against a locally running app (React, Vue, Next.js, Svelte, Storybook) and capture the fully rendered DOM with computed styles resolved. - Browser Subagent Capture: Interact with the page first (click, fill forms, navigate tabs) before extracting the rendered DOM for states unreachable by URL alone. - Static Fallback: Convert a hand-flattened MockPage.jsx into HTML via Babel AST parsing when the app cannot run locally, then inline local images with a post-processing script. - Use Case: Run your Vite dev server, snapshot the home, pricing, and dashboard routes into .stitch/*.html files, and upload them to Stitch without any backend dependency. ## Quick Start Ask the assistant to extract a static HTML snapshot of the app running at http://localhost:5173 and save it to .stitch/home.html.

Frequently Asked Questions about stitch::extract-static-html

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture a static HTML snapshot of a React app?▼

Start your dev server, then run the snapshot script with npx tsx scripts/snapshot.ts --url http://localhost:5173 --output .stitch/home.html. Puppeteer renders the page, inlines all stylesheets, and converts images to base64 data URIs.

Puppeteer snapshot vs browser subagent capture, which should I use?▼

Use the Puppeteer snapshot when the app runs locally without an auth wall; it produces the highest fidelity with computed styles resolved. Use the browser subagent when you must interact with the page first, such as clicking buttons or filling forms.

Does the snapshot script work with Next.js and other frameworks?▼

Yes, it works with any framework including Next.js, Vue, Nuxt, Svelte, and Storybook. For Next.js, increase --wait to 3000ms for SSR hydration, and keep the dev server running so /_next/image URLs can be inlined.

Why are images missing or broken in my extracted HTML?▼

Missing images usually mean the page had not finished loading; increase the --wait flag. If images break after the server stops, verify srcset URLs were inlined, since failed srcset entries are removed so the inlined src is used.

What can I do if the app cannot run locally or requires login?▼

Use the static fallback: manually flatten the React components into a MockPage.jsx with hardcoded data, then run extract_inline_html.ts to convert it to HTML and post_process.ts to inline local images as base64.

Related Skills

Explore More Design & Creative Skills→
thojavathojava

preview-import

Verify local HTML previews against original pages using AEM CLI.

Community
Intermediate
EigenwiseEigenwise
20

architecture-diagram

Generate self-contained architecture diagrams as standalone HTML files with inline SVG and CSS.

Community
Intermediate
chroniicallydiistractedchroniicallydiistracted

playwright-cli

Automate browser interactions using Playwright CLI commands and snapshot element targeting.

Community
Advanced
magnusrodsethmagnusrodseth
2

capture-inspo

Capture full-page website screenshots matching aesthetic vibes via Playwright.

Community
Advanced