Extrae HTML estático autocontenido de una app web o componentes React, inlineando CSS e imágenes, para capturar una vista o subirla a Stitch.
Reemplaza a: Copiar manualmente el DOM renderizado desde DevTools, Flatten manual de componentes React en MockPage.jsx
stitch*:*bashreadwriteweb_fetchen todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
78 tok en reposo
112 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add google-labs-code/stitch-skills --skill extract-static-html --agent claude-codeSe instala solo en este repositorio.
Este skill runs shell commands, writes to your files, makes network requests, reads environment config.
Di cualquiera de estas frases y el agente debería cargar este skill.
Extract a self-contained static HTML file from any web application.
You MUST ask the user to choose which strategy to use before proceeding. Present the options clearly, recommend Strategy A as the preferred default, and provide a brief pros/cons summary for each option to help them make an informed decision.
| Strategy A (Puppeteer) | Strategy B (Browser Subagent) | |
|---|---|---|
| When | App runs locally, no auth wall | Need to interact with page first (click, fill forms) |
| Fidelity | Highest — computed styles resolved | High — rendered DOM |
| Setup | Zero — no mock needed | Zero — no mock needed |
| Framework | Any | Any |
| Output | Writes to file — no size limit | May truncate in agent context |
[!WARNING] Checkpoint — User Confirmation Required. You MUST ask the user which strategy they prefer before proceeding. Present the comparison table above, recommend Strategy A as the default, and wait for explicit approval. Do NOT make the decision yourself or proceed until the user confirms.
Launches headless Chrome, captures the fully rendered DOM, and produces a self-contained HTML file with all CSS inlined and images as base64. Works with any framework — no MockPage.jsx needed.
npm run dev)puppeteer available (check: node -e "require('puppeteer')")Start the App and note the port.
[!WARNING] Checkpoint — User Confirmation Required. After starting the local server, you MUST pause and ask the user for confirmation before running the snapshot script or launching a browser subagent. Report the URL and port to the user so they can verify the app is running and rendering correctly. Do NOT proceed to the snapshot step until the user confirms.
Run the Snapshot Script:
npx tsx <SKILL_DIR>/scripts/snapshot.ts \
--url http://localhost:5173 \
--output .stitch/home.html \
--wait 2000
Multiple pages — run once per route:
npx tsx <SKILL_DIR>/scripts/snapshot.ts \
--url http://localhost:5173 --output .stitch/home.html --wait 2000
npx tsx <SKILL_DIR>/scripts/snapshot.ts \
--url http://localhost:5173/pricing --output .stitch/pricing.html --wait 2000
npx tsx <SKILL_DIR>/scripts/snapshot.ts \
--url http://localhost:5173/dashboard --output .stitch/dashboard.html --wait 2000 --html-class dark
Clean Up Dev Server: If a local dev server was started specifically for snapshot extraction, make sure to stop the server process or terminate the background task once extraction is completed.
| Flag | Default | Description |
|---|---|---|
--url |
(required) | URL to capture |
--output |
(required) | Output file path |
--wait |
1000 |
Extra wait (ms) after network idle. Increase for lazy-loading apps. |
--viewport |
1280x800 |
Viewport size as WIDTHxHEIGHT |
--html-class |
— | Class(es) for <html> element (e.g., dark) |
--remove-fixed |
false |
Remove fixed/sticky elements (cookie banners, chat widgets) |
--full-height |
false |
Resize viewport to full scroll height |
--title |
— | Override page title (set to the route path, e.g. /dashboard or /settings/profile) |
--auth-script |
— | Path to a JS/TS module that exports a default async (page) => void function for authentication |
--inline-canvas |
false |
Convert <canvas> elements (ECharts, Chart.js, D3) to base64 <img> tags |
document.styleSheets (preserves dynamic Vite/Tailwind dev styles and CSS-in-JS)<link rel="stylesheet"> → <style> blocks<img> src and srcset → base64 data URIs (skips external fonts)@font-face) as base64 data URIs so ligatures never render as ASCII text<source srcset> URLs as base64srcset entries so the browser falls back to the inlined src<script> tags, Vite HMR dev style blocks (createHotContext, import.meta.hot), and dev overlaysurl() paths before inlining| Framework | Notes |
|---|---|
| React + Vite | Works out of the box. --wait 1000. |
| Next.js | --wait 3000 for SSR hydration. URL: http://localhost:3000. <img srcset> from /_next/image is auto-inlined as base64. |
| Angular (@angular/cli / v17+) | Works out of the box with ng serve (default URL: http://localhost:4200). --wait 2000 for Angular Material / PrimeNG animation hydration and lazy-loaded routes. |
| Vue / Nuxt | Works out of the box. |
| Svelte / SvelteKit | Works out of the box. |
| Storybook | Use story URL: --url http://localhost:6006/?path=/story/... |
| SSR (Webpack) | May need longer --wait. |
| Issue | Solution |
|---|---|
| Images missing | Increase --wait |
| Images show as broken after server stops | Verify srcset was inlined — check log for "Inlined N images". If srcset URLs failed, they are auto-removed so src (inlined) is used. |
| Icons display as text / Serif unstyled font | Ensure snapshot.ts captures CSSOM from document.styleSheets (step 0) and same-origin icon fonts (@font-face) are inlined as base64 data URIs. |
Next.js /_next/image not inlined |
Ensure the dev server is running when snapshot runs — the script fetches optimized images from the running server. |
| Dark mode not applied | --html-class dark |
| Cookie banner in output | --remove-fixed |
| Page requires login | Use --auth-script ./auth.ts (see Auth-Gated Pages below) |
| Charts/graphs show as blank boxes | Use --inline-canvas to serialize <canvas> to base64 <img> |
Cannot find module 'puppeteer' |
npm install -g puppeteer |
For apps with login guards (Vue Router beforeEach, React ProtectedRoute, etc.), create a small auth script that runs in the Puppeteer session:
// auth-myapp.ts
import type { Page } from 'puppeteer';
export default async function authenticate(page: Page) {
// Example 1: Fill and submit a login form
await page.type('#username', 'admin');
await page.type('#password', 'password123');
await page.click('#login-button');
await page.waitForNavigation({ waitUntil: 'networkidle2' });
// Example 2: Inject cookies/localStorage directly
// await page.evaluate(() => {
// localStorage.setItem('token', 'mock-jwt-token');
// });
// Example 3: Call the app's own login API via module injection (Vue/Vite)
// await page.evaluate(() => {
// return new Promise((resolve) => {
// const script = document.createElement('script');
// script.type = 'module';
// script.textContent = `
// import { useUserStore } from '/src/store/modules/user.ts';
// import { fetchLogin } from '/src/api/auth.ts';
// const res = await fetchLogin({ userName: 'Admin', password: '123456' });
// useUserStore().setToken(res.token, res.refreshToken);
// window.dispatchEvent(new CustomEvent('auth-done'));
// `;
// document.head.appendChild(script);
// window.addEventListener('auth-done', () => resolve(true), { once: true });
// });
// });
}
Then use it:
npx tsx <SKILL_DIR>/scripts/snapshot.ts \
--url http://localhost:5173/#/dashboard \
--output .stitch/dashboard.html \
--auth-script ./auth-myapp.ts \
--inline-canvas \
--wait 5000
The script navigates to the --url first (which may redirect to login), runs your auth function, then re-navigates to the original --url with the authenticated session.
Use when you need to interact with the page (click buttons, fill forms, navigate tabs) before capturing. The browser subagent gives you full control but output may truncate for large pages.
Start the App locally.
Navigate using a browser subagent.
Interact as needed (click, scroll, fill forms).
Extract DOM: document.documentElement.outerHTML
[!WARNING] Large pages may truncate. To handle this:
- Remove
<style>tags before extraction:document.querySelectorAll('style').forEach(el => el.remove())- Re-add styles statically (Tailwind CDN link, source CSS)
Save to file.
[!NOTE] This method is a last resort for when the app cannot run locally (broken deps, missing backend, auth walls with no bypass). It requires manually flattening React components into a single JSX file. Prefer Strategy A whenever possible.
npx tsx <SKILL_DIR>/scripts/extract_inline_html.ts \
--index-css src/css/App.css \
--extra-css index.html \
--outdir .stitch \
--page src/MockPage.jsx:Page.html:"Page Title"
Key flags: --no-tailwind (non-Tailwind apps), --html-class dark (dark mode), --css-files (extra CSS files).
Auto-detection: Tailwind config is auto-detected. @apply directives automatically use <style type="text/tailwindcss">.
App.js first)&& guards{variable} with concrete values, unroll .map() loops<img> with local paths (post-process will inline them)Inline local images:
npx tsx <SKILL_DIR>/scripts/post_process.ts \
.stitch/Page.html --base-dir <app-directory>
Reproducido de google-labs-code/stitch-skills bajo licencia Apache-2.0. Leer esta página en markdown.
4 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Requiere Node.js con puppeteer instalado y la app corriendo localmente (por ejemplo con npm run dev).
Necesita en el PATH:npx
Variables de entorno:MAX_REDIRECTS
Este repo incluye 15 skills. Si instalas uno, normalmente ya tienes los demás.
Convierte diseños de Stitch en componentes modulares de Vite y React, o sincroniza/actualiza componentes React existentes con los últimos diseños de Stitch, usando red a nivel de sistema y validación basada en AST.
Convierte diseños HTML de Stitch en componentes React Native, o sincroniza/actualiza componentes nativos existentes según los últimos diseños de Stitch, usando StyleSheet.
Convierte código frontend (Vite, React, Angular, Vue, etc.) en un Stitch Design encadenando extracción de HTML estático, extracción del sistema de diseño y subida de archivos.
Sube assets locales (imágenes, mockups, HTML extraído, markdown de diseño) a un proyecto de Stitch, útil cuando las llamadas MCP fallan o se truncan por límites de tokens en base64.
Guía experta para integrar y construir aplicaciones con componentes de shadcn/ui: descubrimiento, instalación, personalización y buenas prácticas.
Extrae un sistema de diseño completo (DESIGN.md) directamente del código fuente frontend —React, Vue, Svelte, Angular, HTML/CSS— analizando componentes, hojas de estilo, configs de Tailwind y tokens de diseño.
Úsalo al empezar trabajo de feature que necesita aislamiento del workspace actual, o antes de ejecutar planes de implementación: asegura un workspace aislado vía herramientas nativas o fallback a git worktree.
Úsala al crear nuevas skills, editar skills existentes o verificar que funcionan antes de desplegarlas.
Parte un plan, una spec o la conversación actual en tickets tracer-bullet, cada uno declarando sus aristas de bloqueo, publicados en el tracker configurado.
