save-as-standalone-html
GitHub将当前设计导出为完全离线的单文件 HTML，通过提取 JS/JSX 中的资源引用并注入 meta 标签，辅助 bundler 实现内联打包。
Trigger Scenarios
Install
npx skills add asgeirtj/system_prompts_leaks --skill save-as-standalone-html -g -y
SKILL.md
Frontmatter
{
"name": "save-as-standalone-html",
"description": "Single self-contained file that works offline",
"user-invocable": true
}
Save as standalone HTML
Export the current design as a single self-contained HTML file that works completely offline — no external dependencies.
How it works
There is a deterministic bundler (super_inline_html tool) that can inline resources referenced directly in HTML attributes — img src/srcset, source src/srcset, video/audio/track src, video poster, SVG <image href>/<use href>, link href (stylesheets, favicons), script src, CSS url() and @import, inline style attributes. However, it CANNOT discover resources that are only referenced as strings in JavaScript or JSX code — for example:
- An image src set in React:
<img src={"./hero.png"} /> - A background URL in a styled-component:
background: url('./pattern.svg') - A dynamically imported script
Your job is to prepare the HTML file so the bundler can capture everything, then run it.
Step 1: Make a copy of the HTML file and update code-referenced resources
Copy the current HTML file. Read it. Copy its dependencies. Look through ALL the code (inline scripts, imported JSX files, styled-components, etc) for any resource URL that is referenced as a string in code rather than as an HTML attribute. This includes:
- Image URLs in React/JSX (
<img src={...} />,style={{ backgroundImage: ... }}) - URLs in CSS-in-JS (styled-components, inline styles set via JS)
- Script tags that import other scripts which themselves reference resources
- Any fetch() or XMLHttpRequest calls that load assets
- Audio/video sources set programmatically
Note: if you use the Anthropic API in the project, it will not work standalone. If this is core to the project, STOP and tell the user!
Step 2: Add ext-resource-dependency meta tags
For EACH resource found in step 1, add a <meta> tag in the <head>:
<meta name="ext-resource-dependency" content="<url>" data-resource-id="<id>" />
Where:
contentis the URL of the resource (relative to the HTML file, or absolute)data-resource-idis a short, unique identifier (e.g. "heroImage", "patternSvg")
Then update the code to reference window.__resources[id] instead of the hardcoded URL. At runtime in the bundled file, window.__resources[id] will contain a blob URL pointing to the inlined resource data.
Example:
<!-- In <head>: -->
<meta name="ext-resource-dependency" content="./hero.png" data-resource-id="heroImg" />
<meta name="ext-resource-dependency" content="./pattern.svg" data-resource-id="patternBg" />
<!-- In code, replace: -->
<!-- <img src={"./hero.png"} /> -->
<!-- with: -->
<!-- <img src={window.__resources.heroImg} /> -->
IMPORTANT:
- The relative paths in
contentare relative to the HTML page itself - You must also do this for any external script tags that are imported and themselves reference resources — those scripts will be inlined by the bundler, but their resource references need to be lifted too
- Be thorough! Missing even one resource means a broken image or missing asset in the final file
Step 3: Create a thumbnail (REQUIRED — the bundler will reject the file without it)
Create a lightweight SVG thumbnail that acts as a splash screen while the bundled file unpacks. This SVG should be a simplified, representative preview of the design — e.g. the key shapes, layout silhouette, or a branded loading visual. It doesn't need to be pixel-perfect, just visually representative so the user sees something meaningful instantly. It will be displayed TINY so a simple glyph on a vibrant color BG is enough.
Add it as a <template> tag in the source HTML:
<template id="__bundler_thumbnail" data-bg-color="#0a5e3e">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
<!-- Simplified icon -->
</svg>
</template>
- Set
data-bg-colorto match the page's background color - The SVG should use
viewBoxfor proper aspect-fit scaling - Keep it simple — this is just a loading placeholder, not a full reproduction
- Use the design's actual colors so the transition feels seamless
The bundler will extract this and display it fullscreen (aspect-fit with the background color) while unpacking assets, then replace it with the real page. It also remains visible as the permanent fallback when JavaScript is disabled.
Step 4: Run the bundler
If you made changes in steps 1-3, save the modified HTML file first. Then (or if no changes were needed) call:
super_inline_html({ input_path: "<path-to-html>", output_path: "My Deck.html" })
Give the output file a friendly human name.
Step 5: Verify (internal check only)
Read the tool result first — if any asset couldn't be resolved, super_inline_html lists it directly in its output ("N asset(s) could not be bundled: - asset not found: ./foo.png"). That's the authoritative miss list; fix those references and re-run before opening anything.
Then open the bundled output with show_html TO CHECK IT WORKS — this is a private verification step for YOU, not the delivery mechanism. Check get_webview_logs for runtime errors (JS exceptions, failed decodes). If there are issues, fix the source file and re-run.
Step 6: Present for download — MANDATORY
You MUST deliver the final file using present_fs_item_for_download pointing directly at the inlined HTML output. This is the ONLY correct way to hand off a standalone export.
- Do NOT use show_html / show_to_user as the delivery step — those are preview tools, not download tools. The user cannot save the file from them.
- Do NOT ask whether they want to download it — just call present_fs_item_for_download.
- If you skip this step, the user has no way to get the file. This step is non-negotiable.
Version History
- 481967c Current 2026-08-20 17:03
