save-as-standalone-html

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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>`:

```html
<meta name="ext-resource-dependency" content="<url>" data-resource-id="<id>" />
```

Where:
- `content` is the URL of the resource (relative to the HTML file, or absolute)
- `data-resource-id` is 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:
```html
<!-- 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 `content` are 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:

```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-color` to match the page's background color
- The SVG should use `viewBox` for 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.

From justinlietz93/Perfect_Prompts, MIT.

More from justinlietz93/Perfect_Prompts