Save As Standalone Html

Name: Save As Standalone Html
Author: imMamdouhaboammar

ASecurity

Use when bundling web applications into single-file self-contained HTML assets

3 stars

0 votes

0 copies

0 views

Added 9/3/2026

ai-agentsjavascriptgojavareactapi

Works with

api

Security Analysis

A100/100

Scanned 9/3/2026

Install to Claude Code

$npx -y skills add imMamdouhaboammar/get-fable --skill save-as-standalone-html --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Save As Standalone Html?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Save As Standalone Html

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/immamdouhaboammar-save-as-standalone-html/badge)](https://www.skillsdirectory.com/skills/immamdouhaboammar-save-as-standalone-html)

More formats (shields.io, HTML) on the badges page.

Files

SKILL.md

---
name: save-as-standalone-html
description: Use when bundling web applications into single-file self-contained HTML assets
---

# 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.

Save As Standalone Html

Works with

Security Analysis

Attribution

Comments (0)