asgeirtj
asgeirtj/system_prompts_leaks
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/asgeirtj/system_prompts_leaks --skill save-as-standalone-html命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| 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.
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.
基于 SOC 职业分类