save-as-standalone-html
Single self-contained file that works offline
git clone --depth 1 https://github.com/asgeirtj/system_prompts_leaks /tmp/save-as-standalone-html && cp -r /tmp/save-as-standalone-html/Anthropic/claude-design/skills/save-as-standalone-html ~/.claude/skills/save-as-standalone-htmlSKILL.md
# 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.Deep research harness — fan-out web searches, fetch sources, adversarially verify claims, synthesize a cited report.
Author or improve the run-<unit> skill - a per-project skill that tells agents how to build, launch, and drive this project's app. Use when the user asks to set up the project, get it running, write run instructions, or verify build/run steps work from a clean environment.
Runtime capabilities a published Artifact page can be granted — behavior static HTML cannot provide on its own, such as the page reading live or connected data, remembering what people do on it (a poll, a sign-up sheet, a checklist, a document edited in place — it saves new versions of itself), keeping state shared across viewers, knowing who is viewing, asking Claude a question of its own, storing files people add, or handing the viewer a file to save. Serves this user's live capability roster and the typed call definitions. Load it whenever the user asks for an artifact needing any such runtime behavior.
Design guidance and fundamentals for Artifacts.
Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.
Research and plan a large-scale change, then execute it in parallel across 5–30 isolated worktree agents that each open a PR.
Automates your Chrome browser to interact with web pages - clicking elements, filling forms, capturing screenshots, reading console logs, and navigating sites. Opens pages in new tabs within your existing Chrome session. Requires site-level permissions before executing (configured in the extension).
Review the current diff, or a PR number/branch/path target, for correctness bugs and reuse/simplification/efficiency cleanups at the given effort level (low/medium: fewer, high-confidence findings; high→max: broader coverage, may include uncertain findings; ultra: deep multi-agent review in the cloud); with no level given, it reuses the level you typed last. Pass --comment to post findings as inline PR comments, or --fix to apply the findings to the working tree after the review. For ultra on a GitHub.com PR target, --post asks to post the finished review’s findings to the PR as a single comment from the user’s GitHub account (not a review; the launch dialog still confirms in interactive sessions, while non-interactive mode posts on the flag alone) and --no-post hides that option.