메뉴
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/asgeirtj/system_prompts_leaks --skill save-as-standalone-html명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Reference for writing a Workflow tool script (script API and gotchas, resume, quality patterns, worked examples). Load before authoring a script for a workflow the user already opted into; it does not itself authorize running one.
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.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | save-as-standalone-html |
| description | Single self-contained file that works offline |
| user-invocable | true |
Export the current design as a single self-contained HTML file that works completely offline — no external dependencies.
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:
<img src={"./hero.png"} />background: url('./pattern.svg')Your job is to prepare the HTML file so the bundler can capture everything, then run it.
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:
<img src={...} />, style={{ backgroundImage: ... }})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!
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:
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:
<!-- 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:
content are relative to the HTML page itselfCreate 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>
data-bg-color to match the page's background colorviewBox for proper aspect-fit scalingThe 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.
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.
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.
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.