skills.rest
qapdex-maker
qapdex-makerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

stitch::extract-static-html

Extract fully rendered HTML from web applications or React components.

Updated Jul 9, 2026
Search Tags:#html generation#React#web scraping#static files#UI capture
One-click install
npx skills add https://github.com/qapdex-maker/stitch-skills-collection --skill stitch-extract-static-html-qapdex-maker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch::extract-static-html
Source: https://github.com/qapdex-maker/stitch-skills-collection/tree/main/plugins/stitch-design/skills/extract-static-html
Command: npx skills add https://github.com/qapdex-maker/stitch-skills-collection --skill stitch-extract-static-html-qapdex-maker

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) components.

What problem does it solve?

This Skill helps in creating static HTML files from dynamic web applications and React components, making it easier to share specific UI states or prepare assets for upload without the need for live servers.

Core Features & Use Cases

  • Static HTML Generation: Extracts self-contained HTML from a built web application or React components.
  • Inlined CSS and Images: Converts CSS to inlined style blocks and images to base64 for inclusion in the HTML.
  • Strategies: Offers two strategies to capture static HTML, Puppeteer Snapshot for local apps and Browser Subagent for pages requiring interaction.
  • Use Case: For a web application with complex UI components, this Skill can be used to capture the design and functionality for documentation or static deployment.

Quick Start

Run the snapshot script for your local app:

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

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 generate static HTML from a React web application?▼

Generate static HTML from a React web application by running a Puppeteer snapshot script that extracts fully rendered HTML, inlines CSS, and converts images to base64 for a self-contained file.

What's the best way to capture UI states for documentation without a live server?▼

Capture UI states for documentation without a live server by extracting static HTML from your local web application, which inlines CSS and base64 images to create shareable, self-contained assets.

Do I need Puppeteer to extract static files from web applications?▼

You need Puppeteer or a browser subagent to extract static files from web applications, as these tools interact with and capture the fully rendered HTML from your local running app.

Can I capture static HTML from web pages that require user interaction?▼

Capture static HTML from web pages requiring user interaction by using the browser subagent strategy, which navigates and interacts with the page before extracting the rendered HTML.

How do I handle CSS and images when scraping static HTML from React components?▼

When scraping static HTML from React components, CSS is converted to inlined style blocks and images are converted to base64 strings, ensuring the extracted HTML file is fully self-contained.

Related Skills

Explore More Software Engineering Skills→
Cissou34730Cissou34730

webapp-testing

Automate end-to-end testing of local web applications with Playwright and Python.

Community
Intermediate
live-codeslive-codes
1.5k

livecodes/self-hosting

Deploy LiveCodes to static servers, GitHub Pages, or Docker.

Official
Intermediate
NguyenvanleNguyenvanle

agent-browser

Drive browser automation for AI agents via CLI commands.

Community
Advanced
cyyehcyyeh
1

interactive-dashboard-builder

Build self-contained HTML dashboards with Chart.js and client-side filters.

Community
Intermediate