[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GATMREF1FX1AASQAMWWNVY":3,"skill-same:01M6GATMREF1FX1AASQAMWWNVY":88},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":47,"linkOnly":48,"markdownContent":49,"markdownBody":50,"frontMatter":51,"refName":66,"commitSha":67,"skillDirectory":68,"forksCount":69,"repositoryHtmlUrl":70,"repositoryHomepageUrl":6,"ownerHtmlUrl":71,"ownerBlogUrl":6,"ownerDescription":72,"updatedAt":73,"install":74,"resources":87},"01M6GATMREF1FX1AASQAMWWNVY","html-artifact",null,"Build self-contained HTML files to explain, plan, or review.","zapabob\u002FSkills","zapabob","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F130830376?v=4","01M6DBMYZAGRTFQDSQYW3W764P","峯岸 亮","01M6DBMZ3GKDSJ01NZ9XTZD7JD",2,"MIT","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Farchive\u002Fskill-md-reviewed\u002Fsha256\u002F8f\u002F8fa3527f36f3da76e7025b3f165757aeead55af5a2a91ab38f0d960391642ea9\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"html artifact","artifact","html","explainer","design-md","SVG","self","files","p5js","explain","design","plan","code-review","code","diagram","windows","web","prototype","linux","review","2026-11-10 10:12:30",false,"---\r\nname: html-artifact\r\ndescription: Build self-contained HTML files to explain, plan, or review.\r\nversion: 1.0.0\r\nauthor: Anthropic (html-effectiveness gallery, MIT), adapted for Hermes Agent\r\nlicense: MIT\r\nplatforms: [linux, macos, windows]\r\nmetadata:\r\n  hermes:\r\n    tags: [html, artifact, explainer, plan, report, code-review, diagram, svg, design, prototype, editor]\r\n    related_skills: [claude-design, popular-web-designs, design-md, excalidraw, p5js]\r\n---\r\n\r\n# HTML Artifact Skill\r\n\r\nProduce a single self-contained `.html` file — no build step, no dependencies, no\r\nCDN — whenever the deliverable is something a human should *read, share, or poke at*:\r\na concept explainer, an implementation plan, a status\u002Fincident report, a code-review\r\nwalkthrough, a technical or educational diagram, a set of design variants, or a\r\nthrowaway editor that exports its result back to you.\r\n\r\nHTML beats Markdown once a doc has color, layout, diagrams, tables, code, or\r\ninteraction. It opens in any browser, shares as a link, stays readable past 100\r\nlines, and can carry SVG diagrams and live controls Markdown can't. Default to an\r\nHTML artifact when the user says \"make an HTML file\u002Fartifact\", or asks you to\r\n*explain how X works*, *write up a plan\u002FPR\u002Freport*, *diagram* something, *compare*\r\noptions, or *prototype* an interaction — even when they don't say \"HTML\".\r\n\r\n## Why this skill exists (and what it replaced)\r\n\r\nThis skill **supersedes** three former skills — `sketch` (throwaway multi-variant\r\nHTML mockups), `architecture-diagram` (dark-tech infra SVG), and `concept-diagrams`\r\n(educational SVG). They were consolidated for a concrete reason: all three emitted\r\nthe *same artifact* — a single self-contained HTML file with inline CSS\u002FSVG — and\r\noverlapped heavily (three \"diagram\" skills, two \"compare variants\" paths, no shared\r\ntoken system). Folding them into one mode-switched skill removes the\r\nwhich-one-do-I-load ambiguity and gives every output the same house style, while\r\nkeeping each skill's unique value: the fidelity dial + verify loop (from `sketch`),\r\nthe dark infra aesthetic (from `architecture-diagram`), and the 9-ramp educational\r\nsystem + archetype library (from `concept-diagrams`).\r\n\r\nThe consolidation is footprint-safe: this skill has **zero dependencies** (no Node,\r\nFFmpeg, Chromium, or pip packages — it authors plain HTML\u002FCSS\u002FSVG), so even though it\r\nships **bundled** (active by default) where `concept-diagrams` was optional, the only\r\nalways-in-context cost is this skill's one-line description. All references,\r\ntemplates, and the example gallery load on demand. `concept-diagrams` was optional\r\nbecause it was niche, not because it had an install cost — promoting that capability\r\ninto a general-purpose, zero-dep bundled skill is the right home for it. Diagram-style\r\nwork with a *real* install cost (e.g. `hyperframes`: Node + FFmpeg + Chromium)\r\ndeliberately stays optional and is **not** folded in here.\r\n\r\nUse a different skill when: matching a known brand's look → `popular-web-designs`; a\r\nformal design-token spec file → `design-md`; a *bespoke visually-designed* artifact\r\nwhere the look itself is the point → `claude-design`; hand-drawn\u002Fwhiteboard\r\n`.excalidraw` files → `excalidraw`; generative\u002Fanimated canvas art → `p5js`. This\r\nskill is for everything else that ships as a readable, shareable HTML page.\r\n\r\n## Reference files (load on demand)\r\n\r\n- `references\u002Fhouse-style.md` — the canonical `:root` token block, type system,\r\n  card\u002Ftable\u002Fcallout\u002Fcode-block patterns. **Read this before authoring any artifact.**\r\n- `references\u002Fexamples.md` — 20 complete reference HTML files (Anthropic's\r\n  html-effectiveness gallery, MIT) keyed to each mode, plus the script to fetch them.\r\n  Read\u002Ffetch one that matches your task to calibrate the house style from a full example.\r\n- `references\u002Fsvg-diagrams.md` — hand-authored inline SVG: arrow markers, node\r\n  groups, decision diamonds, edge semantics, coordinate-grid discipline. Read for\r\n  any flowchart \u002F architecture \u002F concept diagram.\r\n- `references\u002Fconcept-archetypes.md` — the 9-ramp educational color system + a\r\n  library of diagram archetypes (timeline, tree, quadrant, layered stack,\r\n  before\u002Fafter, hub-spoke, cross-section). Read for educational \u002F non-software visuals.\r\n- `references\u002Fdark-tech.md` — the dark \"infra\" token variant (carries the old\r\n  architecture-diagram aesthetic). Read for cloud\u002Finfra\u002Fsystem architecture diagrams.\r\n- `references\u002Fthrowaway-editors.md` — the single-file editor recipe and the\r\n  copy-to-clipboard export pattern that survives `file:\u002F\u002F`. Read when the artifact\r\n  needs interactive controls that export state back to a prompt.\r\n- `references\u002Ffidelity-and-verify.md` — the throwaway↔presentation fidelity dial,\r\n  the multi-variant comparison layout, and the mandatory browser-vision verify loop.\r\n\r\n## Templates\r\n\r\n- `templates\u002Fbase.html` — document scaffold with the house-style `\u003Cstyle>` block.\r\n- `templates\u002Fdiagram.html` — dual-mode diagram host (light educational + dark infra\r\n  CSS, arrow markers, node\u002Fedge classes). Paste your SVG where marked.\r\n- `templates\u002Feditor.html` — throwaway-editor skeleton (state → render → export).\r\n\r\nLoad one with `skill_view(name=\"html-artifact\", file_path=\"templates\u002Fbase.html\")`.\r\n\r\n## Workflow\r\n\r\n1. **Pick the mode.** Match the request to one artifact type — explainer, plan,\r\n   report, code review, diagram, variants, or editor. The mode decides which\r\n   template, which references, and which worked example to use.\r\n2. **Read the matching example first — every time.** The 20 files in the\r\n   html-effectiveness gallery are the ground truth this skill is built on; the\r\n   prose references describe them but a full example carries density, spacing, and\r\n   structure no summary can. Before writing anything:\r\n   ```\r\n   terminal: bash scripts\u002Ffetch-examples.sh      # idempotent: clones if missing, else pulls\r\n   read_file references\u002Fexamples\u002F\u003Cfile-for-your-mode>.html\r\n   ```\r\n   `references\u002Fexamples.md` has the mode→file map (e.g. code review →\r\n   `03-code-review-pr.html`, diagram → `13-flowchart-diagram.html`, editor →\r\n   `18-editor-triage-board.html`). Read at least the one example closest to your\r\n   task — two if you're combining modes. Only if the fetch genuinely fails (no\r\n   network) do you fall back to the distilled pattern references alone; note that\r\n   you're working without the examples when you do.\r\n3. **Decide fidelity.** Throwaway exploration or presentation-grade deliverable?\r\n   See `references\u002Ffidelity-and-verify.md`. Don't over-polish a quick comparison;\r\n   don't ship a sloppy report.\r\n4. **Start from a template + the house style.** Load `templates\u002Fbase.html` (or\r\n   `diagram.html` \u002F `editor.html`) and `references\u002Fhouse-style.md`. Reuse the\r\n   `:root` tokens — never invent a new palette per file. Mirror the structure of\r\n   the example you read in step 2; adapt it to the content, don't copy it verbatim.\r\n5. **Author the artifact** with `write_file`. Keep everything inline: one `\u003Cstyle>`\r\n   in `\u003Chead>`, at most one `\u003Cscript>` before `\u003C\u002Fbody>`. No `\u003Clink>`, no external\r\n   fonts (use OS-native stacks), no CDN, no `\u003Cimg src>` to remote URLs. All graphics\r\n   are inline SVG or CSS.\r\n6. **Keep JS optional and graceful.** Prefer zero JS. When you need it, keep it to\r\n   a small vanilla IIFE and make the page render meaningfully with JS off (native\r\n   `\u003Cdetails>`, anchor nav, a default-active tab\u002Fnode).\r\n7. **Verify visually.** Open the file and screenshot it — see the verify loop in\r\n   `references\u002Ffidelity-and-verify.md`. This is mandatory for SVG diagrams, where\r\n   hand-placed coordinates drift on edits (overlapping nodes, misaimed arrows).\r\n8. **Report the path.** Tell the user the absolute file path so they can open it.\r\n   Mention any interactive controls \u002F export buttons.\r\n\r\n## Core principles\r\n\r\n**One design system, token-driven.** Warm paper (`--ivory`), near-black ink\r\n(`--slate`), one terracotta accent (`--clay`), olive for success\u002Fadditions, a warm\r\ngray ramp. Semantic convention, held across every mode: **clay = focus\u002Fattention,\r\nolive = success\u002Fadded, rust = error\u002Fremoved, oat = neutral fill, gray-500 =\r\nsecondary text & arrows.** Reference colors only as `var(--…)`.\r\n\r\n**Three fonts by role.** Serif (Georgia stack) for headings, sans (system-ui) for\r\nbody, mono for every label \u002F code \u002F metric \u002F eyebrow \u002F path. All OS-native — zero\r\nfont loading. This serif-heading \u002F mono-label \u002F sans-body split is the house tell.\r\n\r\n**Self-contained, always.** The file must render offline when double-clicked.\r\nInline the style and script; draw graphics as inline SVG or CSS; never reference a\r\nremote asset. This is non-negotiable — it's what makes the artifact shareable.\r\n\r\n**Graceful degradation.** Most great artifacts have *no* JS. When interactivity is\r\nthe point (sliders, drag, editors), the page must still convey its content without\r\nJS, and exports must work from a `file:\u002F\u002F` page (clipboard fallback in\r\n`references\u002Fthrowaway-editors.md`).\r\n\r\n**End interactive artifacts with an export.** A throwaway editor is only useful if\r\nit hands its result back: a Copy-as-markdown \u002F Copy-JSON \u002F Copy-diff \u002F Copy-prompt\r\nbutton that serializes state to the clipboard for pasting into the next prompt.\r\n\r\n## Quick reference — mode → what to build\r\n\r\n| Request | Mode | Template | Read this example | Key reference |\r\n|---|---|---|---|---|\r\n| \"explain how X works\" | explainer | base | `14-research-feature-explainer.html` | house-style, svg-diagrams |\r\n| \"write up the plan \u002F spec\" | plan | base | `16-implementation-plan.html` | house-style |\r\n| \"status \u002F incident report\" | report | base | `11-status-report.html`, `12-incident-report.html` | house-style |\r\n| \"review this PR \u002F diff\" | code review | base | `03-code-review-pr.html`, `17-pr-writeup.html` | house-style (diff section) |\r\n| \"diagram the architecture \u002F pipeline\" | infra diagram | diagram | `13-flowchart-diagram.html`, `04-code-understanding.html` | dark-tech, svg-diagrams |\r\n| \"diagram this concept \u002F process\" (science, physical, educational) | concept diagram | diagram | `13-flowchart-diagram.html`, `10-svg-illustrations.html` | concept-archetypes, svg-diagrams |\r\n| \"show me N takes \u002F compare options\" | variants | base | `01-exploration-code-approaches.html`, `02-exploration-visual-designs.html` | fidelity-and-verify |\r\n| \"let me tune \u002F triage \u002F edit X and copy it out\" | editor | editor | `18-editor-triage-board.html`, `19-editor-feature-flags.html`, `20-editor-prompt-tuner.html` | throwaway-editors |\r\n\r\n## Pitfalls\r\n\r\n- **Don't skip the example.** The single biggest quality lever is reading the\r\n  matching gallery file before you write (`bash scripts\u002Ffetch-examples.sh` then\r\n  `read_file references\u002Fexamples\u002F\u003Cfile>.html`). The prose references are a map; the\r\n  examples are the territory. Authoring from memory of \"what good HTML looks like\"\r\n  is exactly how the output drifts generic.\r\n- **Don't invent a palette.** Reuse the `:root` tokens from `house-style.md`. A\r\n  per-file color scheme breaks the consistency that makes these artifacts feel pro.\r\n- **Don't reach for a library.** No Mermaid, D3, Tailwind CDN, Prism, or web fonts.\r\n  Diagrams are hand-authored SVG; syntax highlighting is hand-marked `\u003Cspan>`s; the\r\n  token block does the job of a build-time theme.\r\n- **Don't skip the visual check on diagrams.** Manually computed SVG coordinates\r\n  are the #1 source of broken output — arrows landing in whitespace, overlapping\r\n  boxes, text overflow. Screenshot and fix before reporting done.\r\n- **Don't add a JS export where a static `\u003Cpre>` suffices.** If the deliverable is\r\n  one snippet, a hand-selectable code block is the bulletproof \"export\".\r\n- **Don't let JS be load-bearing for content.** If the prose only exists inside a\r\n  `render()` call, the page is blank with JS off. Put real content in the HTML;\r\n  use JS to enhance, not to populate.\r\n","# HTML Artifact Skill\r\n\r\nProduce a single self-contained `.html` file — no build step, no dependencies, no\r\nCDN — whenever the deliverable is something a human should *read, share, or poke at*:\r\na concept explainer, an implementation plan, a status\u002Fincident report, a code-review\r\nwalkthrough, a technical or educational diagram, a set of design variants, or a\r\nthrowaway editor that exports its result back to you.\r\n\r\nHTML beats Markdown once a doc has color, layout, diagrams, tables, code, or\r\ninteraction. It opens in any browser, shares as a link, stays readable past 100\r\nlines, and can carry SVG diagrams and live controls Markdown can't. Default to an\r\nHTML artifact when the user says \"make an HTML file\u002Fartifact\", or asks you to\r\n*explain how X works*, *write up a plan\u002FPR\u002Freport*, *diagram* something, *compare*\r\noptions, or *prototype* an interaction — even when they don't say \"HTML\".\r\n\r\n## Why this skill exists (and what it replaced)\r\n\r\nThis skill **supersedes** three former skills — `sketch` (throwaway multi-variant\r\nHTML mockups), `architecture-diagram` (dark-tech infra SVG), and `concept-diagrams`\r\n(educational SVG). They were consolidated for a concrete reason: all three emitted\r\nthe *same artifact* — a single self-contained HTML file with inline CSS\u002FSVG — and\r\noverlapped heavily (three \"diagram\" skills, two \"compare variants\" paths, no shared\r\ntoken system). Folding them into one mode-switched skill removes the\r\nwhich-one-do-I-load ambiguity and gives every output the same house style, while\r\nkeeping each skill's unique value: the fidelity dial + verify loop (from `sketch`),\r\nthe dark infra aesthetic (from `architecture-diagram`), and the 9-ramp educational\r\nsystem + archetype library (from `concept-diagrams`).\r\n\r\nThe consolidation is footprint-safe: this skill has **zero dependencies** (no Node,\r\nFFmpeg, Chromium, or pip packages — it authors plain HTML\u002FCSS\u002FSVG), so even though it\r\nships **bundled** (active by default) where `concept-diagrams` was optional, the only\r\nalways-in-context cost is this skill's one-line description. All references,\r\ntemplates, and the example gallery load on demand. `concept-diagrams` was optional\r\nbecause it was niche, not because it had an install cost — promoting that capability\r\ninto a general-purpose, zero-dep bundled skill is the right home for it. Diagram-style\r\nwork with a *real* install cost (e.g. `hyperframes`: Node + FFmpeg + Chromium)\r\ndeliberately stays optional and is **not** folded in here.\r\n\r\nUse a different skill when: matching a known brand's look → `popular-web-designs`; a\r\nformal design-token spec file → `design-md`; a *bespoke visually-designed* artifact\r\nwhere the look itself is the point → `claude-design`; hand-drawn\u002Fwhiteboard\r\n`.excalidraw` files → `excalidraw`; generative\u002Fanimated canvas art → `p5js`. This\r\nskill is for everything else that ships as a readable, shareable HTML page.\r\n\r\n## Reference files (load on demand)\r\n\r\n- `references\u002Fhouse-style.md` — the canonical `:root` token block, type system,\r\n  card\u002Ftable\u002Fcallout\u002Fcode-block patterns. **Read this before authoring any artifact.**\r\n- `references\u002Fexamples.md` — 20 complete reference HTML files (Anthropic's\r\n  html-effectiveness gallery, MIT) keyed to each mode, plus the script to fetch them.\r\n  Read\u002Ffetch one that matches your task to calibrate the house style from a full example.\r\n- `references\u002Fsvg-diagrams.md` — hand-authored inline SVG: arrow markers, node\r\n  groups, decision diamonds, edge semantics, coordinate-grid discipline. Read for\r\n  any flowchart \u002F architecture \u002F concept diagram.\r\n- `references\u002Fconcept-archetypes.md` — the 9-ramp educational color system + a\r\n  library of diagram archetypes (timeline, tree, quadrant, layered stack,\r\n  before\u002Fafter, hub-spoke, cross-section). Read for educational \u002F non-software visuals.\r\n- `references\u002Fdark-tech.md` — the dark \"infra\" token variant (carries the old\r\n  architecture-diagram aesthetic). Read for cloud\u002Finfra\u002Fsystem architecture diagrams.\r\n- `references\u002Fthrowaway-editors.md` — the single-file editor recipe and the\r\n  copy-to-clipboard export pattern that survives `file:\u002F\u002F`. Read when the artifact\r\n  needs interactive controls that export state back to a prompt.\r\n- `references\u002Ffidelity-and-verify.md` — the throwaway↔presentation fidelity dial,\r\n  the multi-variant comparison layout, and the mandatory browser-vision verify loop.\r\n\r\n## Templates\r\n\r\n- `templates\u002Fbase.html` — document scaffold with the house-style `\u003Cstyle>` block.\r\n- `templates\u002Fdiagram.html` — dual-mode diagram host (light educational + dark infra\r\n  CSS, arrow markers, node\u002Fedge classes). Paste your SVG where marked.\r\n- `templates\u002Feditor.html` — throwaway-editor skeleton (state → render → export).\r\n\r\nLoad one with `skill_view(name=\"html-artifact\", file_path=\"templates\u002Fbase.html\")`.\r\n\r\n## Workflow\r\n\r\n1. **Pick the mode.** Match the request to one artifact type — explainer, plan,\r\n   report, code review, diagram, variants, or editor. The mode decides which\r\n   template, which references, and which worked example to use.\r\n2. **Read the matching example first — every time.** The 20 files in the\r\n   html-effectiveness gallery are the ground truth this skill is built on; the\r\n   prose references describe them but a full example carries density, spacing, and\r\n   structure no summary can. Before writing anything:\r\n   ```\r\n   terminal: bash scripts\u002Ffetch-examples.sh      # idempotent: clones if missing, else pulls\r\n   read_file references\u002Fexamples\u002F\u003Cfile-for-your-mode>.html\r\n   ```\r\n   `references\u002Fexamples.md` has the mode→file map (e.g. code review →\r\n   `03-code-review-pr.html`, diagram → `13-flowchart-diagram.html`, editor →\r\n   `18-editor-triage-board.html`). Read at least the one example closest to your\r\n   task — two if you're combining modes. Only if the fetch genuinely fails (no\r\n   network) do you fall back to the distilled pattern references alone; note that\r\n   you're working without the examples when you do.\r\n3. **Decide fidelity.** Throwaway exploration or presentation-grade deliverable?\r\n   See `references\u002Ffidelity-and-verify.md`. Don't over-polish a quick comparison;\r\n   don't ship a sloppy report.\r\n4. **Start from a template + the house style.** Load `templates\u002Fbase.html` (or\r\n   `diagram.html` \u002F `editor.html`) and `references\u002Fhouse-style.md`. Reuse the\r\n   `:root` tokens — never invent a new palette per file. Mirror the structure of\r\n   the example you read in step 2; adapt it to the content, don't copy it verbatim.\r\n5. **Author the artifact** with `write_file`. Keep everything inline: one `\u003Cstyle>`\r\n   in `\u003Chead>`, at most one `\u003Cscript>` before `\u003C\u002Fbody>`. No `\u003Clink>`, no external\r\n   fonts (use OS-native stacks), no CDN, no `\u003Cimg src>` to remote URLs. All graphics\r\n   are inline SVG or CSS.\r\n6. **Keep JS optional and graceful.** Prefer zero JS. When you need it, keep it to\r\n   a small vanilla IIFE and make the page render meaningfully with JS off (native\r\n   `\u003Cdetails>`, anchor nav, a default-active tab\u002Fnode).\r\n7. **Verify visually.** Open the file and screenshot it — see the verify loop in\r\n   `references\u002Ffidelity-and-verify.md`. This is mandatory for SVG diagrams, where\r\n   hand-placed coordinates drift on edits (overlapping nodes, misaimed arrows).\r\n8. **Report the path.** Tell the user the absolute file path so they can open it.\r\n   Mention any interactive controls \u002F export buttons.\r\n\r\n## Core principles\r\n\r\n**One design system, token-driven.** Warm paper (`--ivory`), near-black ink\r\n(`--slate`), one terracotta accent (`--clay`), olive for success\u002Fadditions, a warm\r\ngray ramp. Semantic convention, held across every mode: **clay = focus\u002Fattention,\r\nolive = success\u002Fadded, rust = error\u002Fremoved, oat = neutral fill, gray-500 =\r\nsecondary text & arrows.** Reference colors only as `var(--…)`.\r\n\r\n**Three fonts by role.** Serif (Georgia stack) for headings, sans (system-ui) for\r\nbody, mono for every label \u002F code \u002F metric \u002F eyebrow \u002F path. All OS-native — zero\r\nfont loading. This serif-heading \u002F mono-label \u002F sans-body split is the house tell.\r\n\r\n**Self-contained, always.** The file must render offline when double-clicked.\r\nInline the style and script; draw graphics as inline SVG or CSS; never reference a\r\nremote asset. This is non-negotiable — it's what makes the artifact shareable.\r\n\r\n**Graceful degradation.** Most great artifacts have *no* JS. When interactivity is\r\nthe point (sliders, drag, editors), the page must still convey its content without\r\nJS, and exports must work from a `file:\u002F\u002F` page (clipboard fallback in\r\n`references\u002Fthrowaway-editors.md`).\r\n\r\n**End interactive artifacts with an export.** A throwaway editor is only useful if\r\nit hands its result back: a Copy-as-markdown \u002F Copy-JSON \u002F Copy-diff \u002F Copy-prompt\r\nbutton that serializes state to the clipboard for pasting into the next prompt.\r\n\r\n## Quick reference — mode → what to build\r\n\r\n| Request | Mode | Template | Read this example | Key reference |\r\n|---|---|---|---|---|\r\n| \"explain how X works\" | explainer | base | `14-research-feature-explainer.html` | house-style, svg-diagrams |\r\n| \"write up the plan \u002F spec\" | plan | base | `16-implementation-plan.html` | house-style |\r\n| \"status \u002F incident report\" | report | base | `11-status-report.html`, `12-incident-report.html` | house-style |\r\n| \"review this PR \u002F diff\" | code review | base | `03-code-review-pr.html`, `17-pr-writeup.html` | house-style (diff section) |\r\n| \"diagram the architecture \u002F pipeline\" | infra diagram | diagram | `13-flowchart-diagram.html`, `04-code-understanding.html` | dark-tech, svg-diagrams |\r\n| \"diagram this concept \u002F process\" (science, physical, educational) | concept diagram | diagram | `13-flowchart-diagram.html`, `10-svg-illustrations.html` | concept-archetypes, svg-diagrams |\r\n| \"show me N takes \u002F compare options\" | variants | base | `01-exploration-code-approaches.html`, `02-exploration-visual-designs.html` | fidelity-and-verify |\r\n| \"let me tune \u002F triage \u002F edit X and copy it out\" | editor | editor | `18-editor-triage-board.html`, `19-editor-feature-flags.html`, `20-editor-prompt-tuner.html` | throwaway-editors |\r\n\r\n## Pitfalls\r\n\r\n- **Don't skip the example.** The single biggest quality lever is reading the\r\n  matching gallery file before you write (`bash scripts\u002Ffetch-examples.sh` then\r\n  `read_file references\u002Fexamples\u002F\u003Cfile>.html`). The prose references are a map; the\r\n  examples are the territory. Authoring from memory of \"what good HTML looks like\"\r\n  is exactly how the output drifts generic.\r\n- **Don't invent a palette.** Reuse the `:root` tokens from `house-style.md`. A\r\n  per-file color scheme breaks the consistency that makes these artifacts feel pro.\r\n- **Don't reach for a library.** No Mermaid, D3, Tailwind CDN, Prism, or web fonts.\r\n  Diagrams are hand-authored SVG; syntax highlighting is hand-marked `\u003Cspan>`s; the\r\n  token block does the job of a build-time theme.\r\n- **Don't skip the visual check on diagrams.** Manually computed SVG coordinates\r\n  are the #1 source of broken output — arrows landing in whitespace, overlapping\r\n  boxes, text overflow. Screenshot and fix before reporting done.\r\n- **Don't add a JS export where a static `\u003Cpre>` suffices.** If the deliverable is\r\n  one snippet, a hand-selectable code block is the bulletproof \"export\".\r\n- **Don't let JS be load-bearing for content.** If the prose only exists inside a\r\n  `render()` call, the page is blank with JS off. Put real content in the HTML;\r\n  use JS to enhance, not to populate.\r\n",{"name":5,"author":52,"license":15,"version":53,"metadata":54,"platforms":64,"description":7},"Anthropic (html-effectiveness gallery, MIT), adapted for Hermes Agent","1.0.0",{"hermes":55},{"tags":56,"related_skills":60},[29,28,30,38,57,39,41,58,37,44,59],"report","svg","editor",[61,62,31,63,35],"claude-design","popular-web-designs","excalidraw",[45,65,42],"macos","main","0d1434f89f4bc6b07e9d272accd8c1013768820f","archive\u002Fskill-md-reviewed\u002Fsha256\u002F8f\u002F8fa3527f36f3da76e7025b3f165757aeead55af5a2a91ab38f0d960391642ea9",0,"https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills","https:\u002F\u002Fgithub.com\u002Fzapabob","The Open University of JAPAN　2019-now\r\n\r\nTokyo University of Science　2007-2010","2026-10-26 16:29:01",{"source":8,"skillName":5,"commands":75,"prompt":85,"zipAvailable":86},[76,79,82],{"tool":77,"command":78},"npx","npx skills add zapabob\u002FSkills --skill html-artifact",{"tool":80,"command":81},"bunx","bunx skills add zapabob\u002FSkills --skill html-artifact",{"tool":83,"command":84},"pnpm","pnpm dlx skills add zapabob\u002FSkills --skill html-artifact","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Farchive\u002Fskill-md-reviewed\u002Fsha256\u002F8f\u002F8fa3527f36f3da76e7025b3f165757aeead55af5a2a91ab38f0d960391642ea9\u002FSKILL.md",true,[],[89,120,151,178,205,222],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":104,"publishedAt":47},"01M6GJTE1GESGGF9K028Y7753E","xurl","X\u002FTwitter via xurl CLI: post, search, DM, media, v2 API.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fxurl\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[95,98,99],{"categoryNo":96,"categoryName":97,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":100,"categoryName":101,"taxonomyType":102,"taxonomyTypeDesc":103},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[91,105,65,106,107,45,42,108,109,110,111,112,113,114,115,116,66,117,118,119],"openclaw","cli","github","official","search","https","social-media","api","Media","hermes","hermes agent","twitter","social","via","post",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":137,"publishedAt":47},"01M6GJT8S1PXQ8WPXT1HSNBWH2","writing-plans","Write implementation plans: bite-sized tasks, paths, code.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fwriting-plans\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[126,129,132,133,134],{"categoryNo":127,"categoryName":128,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":130,"categoryName":131,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":100,"categoryName":101,"taxonomyType":102,"taxonomyTypeDesc":103},{"categoryNo":135,"categoryName":136,"taxonomyType":102,"taxonomyTypeDesc":103},"01JBSEEDCAT000000000000036","内容创作者",[138,139,140,37,65,46,45,141,42,142,143,144,40,145,39,146,147,148,149,150],"writing","writing plans","plans","workflow","documentation","tasks","development","planning","subagent","write","superpowers","paths","test-driven-development",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":155,"categories":156,"keywords":160,"publishedAt":47},"01M6GJST0H5X7WHBJ3BZK0DVKH","whisper","OpenAI's general-purpose speech recognition model. Supports 99 languages, transcription, translation to English, and language identification. Six model sizes from tiny (39M params) to large (1550M params). Use for speech-to-text, podcast transcription, or multilingual audio processing. Best for robust, multilingual ASR.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fwhisper\u002Fvariants\u002Fhermes-agent-optional\u002FSKILL.md",[157],{"categoryNo":158,"categoryName":159,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[153,65,45,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177],"openai","speech","multimodal","Transformers","ASR","Audio","text","model","speech recognition","use","general","multilingual","translation","english","identification","processing","Audio Processing",{"skillNo":179,"name":180,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":187,"publishedAt":47},"01M6GJSMRQ8EETZTYMG72P70EA","weights-and-biases","W&B: log ML experiments, sweeps, model registry, dashboards.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fweights-and-biases\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[184],{"categoryNo":185,"categoryName":186,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化",[188,65,189,190,42,191,192,193,194,195,196,168,197,198,199,200,201,202,203,204],"weights and biases","tensorflow","experiments","pytorch","visualization","registry","real-time","tuning","dashboards","experiment","log","time","Experiment Tracking","Model Registry","Hyperparameter Tuning","WandB","Real-Time Visualization",{"skillNo":206,"name":207,"nameZh":6,"description":208,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":209,"categories":210,"keywords":212,"publishedAt":47},"01M6GJS19KDPRY112JTR326S06","watchers","Poll RSS, JSON APIs, and GitHub with watermark dedup.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fwatchers\u002Fvariants\u002Fhermes-agent-optional\u002FSKILL.md",[211],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[207,65,213,107,45,214,215,216,217,218,219,114,115,220,221],"terminal","automation","http","monitoring","cron","json","rss","devops","with",{"skillNo":223,"name":224,"nameZh":6,"description":225,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":226,"categories":227,"keywords":230,"publishedAt":47},"01M6GJRHJD2A6Q830SWF9W48BC","serving-llms-vllm","vLLM: high-throughput LLM serving, OpenAI API, quantization.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fvllm\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[228,229],{"categoryNo":96,"categoryName":97,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":100,"categoryName":101,"taxonomyType":102,"taxonomyTypeDesc":103},[231,232,233,45,234,161,235,236,237,164,238,112,239,240,241,242,243,244,245,246],"llms","vLLM","serving llms vllm","research","openai api","tensor","Inference Serving","Production","llm serving","High Throughput","PagedAttention","Continuous Batching","Quantization","Tensor Parallelism","high-throughput","throughput"]