#257 by GitHub stars

QingYunA/answer-me-with-html

Turns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page. Use it proactively and liberally in replies to the user, without being asked, whenever a page would help the reader more than plain text, even if plain text would also

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

skills/answer-me-with-html/SKILL.md

Week of Nov 2, 2026 · +4 / −2 lines

Before Network or broad shell → After Network or broad shell

b5df804c17e8 → aab9ea19f50f

- 67 In Claude Code, the path above is replaced with this skill's directory automatically. If you see the variable unreplaced (other agents), replace it with the absolute path of the directory that contains this SKILL.md. When the skill was loaded with a "Base directory for this skill" line (DeepSeek Harness), that path is this directory. If the user installed the `am` command globally, you can also use `am` directly.
+ 67 In Claude Code, `${CLAUDE_SKILL_DIR}` is replaced with this skill's directory before you read this file, so that command and every path in this file already carry it; run them as written.
+ 68 
+ 69 On every other host the token is left as it stands or comes out empty. There, before your first command of the turn, write the absolute path of the directory that holds this `SKILL.md` in place of `${CLAUDE_SKILL_DIR}` in every command you run and in every path you read, in this file and in the files under `references/`, and check the path once with `test -f "<that directory>/scripts/am.mjs"`. Do not put the path in a shell variable and use it in a later call: the Bash tool keeps no variable from one call to the next and a file-read tool never expands one, so a `SKILL_DIR` set in one call is empty in the next and the command becomes `/scripts/am.mjs`. The directory is the one holding `SKILL.md` and `scripts/`: `~/.agents/skills/answer-me-with-html` after `npx skills add`, `~/.claude/skills/answer-me-with-html` for a Claude Code skill install, `skills/answer-me-with-html` in the plugin checkout for a plugin install, and the path printed on the host's "Base directory for this skill" line (DeepSeek Harness). If `test -f` fails, that path is not this skill's directory: find the right one before you run anything. If the user installed the `am` command globally, you can also use `am` directly.
- 170 - Use `ask` only for a fork that changes what you do next, such as a plan or a choice between options: 1 to 5 per page, each in the panel it changes, the question in 15 words or fewer. Mark the option you would pick with `*`. Every page has a Reply button: the user picks options, comments on any panel and copies one reply back. When a page has asks, say in your reply how many decisions are open and that the suggested options are what you would do. If your host can ask questions (Claude Code's AskUserQuestion), put those asks to the user with that choice tool after the reply, never before it: the reply carries the page link, and the user should be able to open the page before answering.
+ 172 - Use `ask` only for a fork that changes what you do next, such as a plan or a choice between options: 1 to 5 per page, each in the panel it changes, the question in 15 words or fewer. These numbers are writing advice the CLI does not check: more decisions mean more asks (each in the panel it changes) or splitting the page, and the CLI enforces 2 to 6 options per ask. Mark the option you would pick with `*`. Every page has a Reply button: the user picks options, comments on any panel and copies one reply back. When a page has asks, say in your reply how many decisions are open and that the suggested options are what you would do. If your host can ask questions (Claude Code's AskUserQuestion), put those asks to the user with that choice tool after the reply, never before it: the reply carries the page link, and the user should be able to open the page before answering.

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → b5df804c17e8

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit aab9ea19f50f038054eeb60475bbb7ea26f149e3

git clone --filter=blob:none --no-checkout https://github.com/QingYunA/answer-me-with-html.git .hotskills/qingyuna-answer-me-with-html && git -C .hotskills/qingyuna-answer-me-with-html checkout --detach aab9ea19f50f038054eeb60475bbb7ea26f149e3 # Copy each selected skill directory from .hotskills/qingyuna-answer-me-with-html into .claude/skills/<skill-name>/
5.7kGitHub stars
818stars in 7 days
1skill in this repository
201commits in 30 days

Heat

8.5
  • Star growth, last 7 daysAhead of 99% of tracked repositories
  • Star growth, last 24 hoursAhead of 100% of tracked repositories
  • Rank movement, last 7 daysAhead of 93% of tracked repositories
  • Commits, last 30 daysAhead of 97% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Sep 27, 2026Nov 6, 20265,717

Individual skills in this repository

How it works

answer-me-with-html

When your agent uses it

Turns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page. Use it proactively and liberally in replies to the user, without being asked, whenever a page would help the reader more than plain text, even if plain text would also work: any explanation of how something works or how parts relate (flow, request path, architecture, code or folder structure, state machine, lifecycle, history); any comparison, trade-off or decision with pros and cons; any diagnosis, review or investigation, especially with several causes or findings to rank; any answer with a table, a numbered or ranked list, steps, branches or several sections; or when the user says "I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图". When in doubt, use it: a page is quick and cheap to make. Also for explainer videos ("make a video", "做个视频") and for changing its settings. Skip only for small talk, a trivial one-line answer, or when the user asks for plain text.

What it loads into context

Frontmatter

277 tokens

Always available to the agent

SKILL.md

6,426 tokens

When the skill is activated

Reference documents

1,763 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. 0. When the user wants to change settings
  2. 1. Decide: produce a page or not
  3. 2. Workflow (one Bash call)
  4. 3. Draft format quick reference
  5. 4. Choose components by the shape of the information
  6. 5. When the user pastes a reply from a page
  7. 6. Say less (the text in the draft)
  8. 7. Explainer videos (am video, 3Blue1Brown style)

Scripts executed separately

  • scripts/am.mjs

Files

  • ../../.claude-plugin/marketplace.jsonasset485 bytes
  • ../../.claude-plugin/plugin.jsonasset545 bytes
  • SKILL.mdcore25,763 bytes
  • SKILL.mdcore25,763 bytes
  • SKILL.mdcore25,763 bytes
  • SKILL.mdcore25,763 bytes
  • SKILL.mdcore25,763 bytes
  • SKILL.mdcore25,763 bytes
  • licenses/OFL-Bangers.txtdoc4,386 bytes
  • references/settings.mddoc3,457 bytes
  • references/video.mddoc3,615 bytes
  • scripts/am.mjsruns1,003,418 bytes
Read SKILL.md

# Answer me with HTML: answer a complex question with one HTML page

You write only the **content draft** (extended Markdown). The `am` CLI does all layout, colours, dark mode and diagram coordinates. **Do not hand-write HTML / CSS / SVG.**

Reply to the user, and write the draft, in the user's language.

## 0. When the user wants to change settings

Arguments for this call: `$ARGUMENTS`

When the arguments start with `config`, `clean` or `update`, or the user asks to change a setting, clean up pages or update this skill: read `${CLAUDE_SKILL_DIR}/references/settings.md` and follow it. That turn produces no page.

## 1. Decide: produce a page or not
View the complete source on GitHub

Skills included

  • answer-me-with-html

Repository facts

License
MIT
Created
Oct 2, 2026
Last pushed
Nov 5, 2026
Forks
361
Open issues
6
Project activity
Active

Rank over the last 12 weeks

Now #257 · best #257 · up 177 in 30 days

  1. #276 on Oct 29
  2. #274 from Oct 30 to Oct 31
  3. #272 from Nov 1 to Nov 2
  4. #270 on Nov 3
  5. #268 from Nov 4 to Nov 5
  6. #257 since Nov 6
24 earlier periods
  1. #908 on Sep 27
  2. #894 on Oct 2
  3. #835 on Oct 3
  4. #604 on Oct 4
  5. #513 on Oct 5
  6. #473 on Oct 6
  7. #434 on Oct 7
  8. #415 on Oct 8
  9. #392 on Oct 9
  10. #365 on Oct 10
  11. #354 on Oct 11
  12. #335 on Oct 12
  13. #326 on Oct 13
  14. #322 on Oct 14
  15. #312 from Oct 15 to Oct 16
  16. #306 on Oct 17
  17. #296 on Oct 18
  18. #286 on Oct 19
  19. #279 on Oct 20
  20. #278 from Oct 21 to Oct 22
  21. #277 on Oct 23
  22. #274 on Oct 24
  23. #276 on Oct 25
  24. #278 on Oct 28

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 2, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 30 notes
  • skills/answer-me-with-html/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • skills/answer-me-with-html/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • skills/answer-me-with-html/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • skills/answer-me-with-html/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • skills/answer-me-with-html/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • skills/answer-me-with-html/scripts/am.mjs:27 [Credential-related source omitted]
  • skills/answer-me-with-html/scripts/am.mjs:25 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:26 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:639 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:637 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:638 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:729 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:727 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:730 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:728 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:739 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:737 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:738 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:1116 Analysis incomplete: physical or joined line exceeds character limit
  • skills/answer-me-with-html/scripts/am.mjs:1114 Analysis incomplete: physical or joined line exceeds character limit
Show all 47 signals by file

.claude-plugin/plugin.json

  • Network accessline 6
    "name": "QingYunA"   },   "homepage": "https://github.com/QingYunA/answer-me-with-html",
  • Network accessline 7
    },   "homepage": "https://github.com/QingYunA/answer-me-with-html",   "repository": "https://github.com/QingYunA/answer-me-with-html",
  • Network accessline 8
    "homepage": "https://github.com/QingYunA/answer-me-with-html",
  • Network accessline 9
    "repository": "https://github.com/QingYunA/answer-me-with-html",

skills/answer-me-with-html/SKILL.md

  • Network accessline 187
    Every sentence on the page gives the reader one fact they need. The idea comes from [ASD-STE100](https://www.asd-ste100.org/) (Simplified Technical English), a controlled English for aircraft manuals. This section takes its principles, not 
  • Network accessline 199
    - Sentence length: steps (ordered lists) 20 words in English / 35 characters in Chinese; descriptions 25 words / 45 characters. The Chinese limits are a little looser than the 30 / 40 of [Simplified Technical Chinese](https://github.com/mzo

skills/answer-me-with-html/licenses/OFL-Bangers.txt

  • Network accessline 1
    Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers)
  • Network accessline 3
    This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
  • Network accessline 5
    http://scripts.sil.org/OFL

skills/answer-me-with-html/references/settings.md

  • Network accessline 15
    When the user asks for a ready-made theme ("use the comic theme", "install the manga theme"): run `am theme add <name> --use`. Names come from the catalog at https://answer-me-with-html.com/themes/ (at the time of writing: `comic`, `manga`,

skills/answer-me-with-html/references/video.md

  • Access to secretsline 34
    [Credential-related source omitted]

skills/answer-me-with-html/scripts/am.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Network accessline 2
    // answer-me-with-html CLI — generated by scripts/build.mjs, do not edit. Source: https://github.com/QingYunA/answer-me-with-html
  • Dangerous shell operationline 27
    [Credential-related source omitted]
  • Possible obfuscationline 27
    [Credential-related source omitted]
  • Possible obfuscationline 640
    var DIFF_CSS = "/* Diff block (only on pages that have one): red and green lines, a hunk row, and two gutters, old and new, drawn from data-o / data-n.\n   The hues are fixed and mixed into the theme's own --fill and --ink, so they read as 
  • Possible obfuscationline 729
    var RTL_CSS = '/* Right-to-left pages (html[dir="rtl"]: Hebrew, Arabic, Persian, Urdu, Yiddish). base.css uses logical properties, so the layout\n   mirrors by itself; this file holds only what logical properties cannot say. A left-to-right
  • Possible obfuscationline 730
    var CHART_CSS = '/* Charts (src/components/chart.js). Only a page with a chart carries this file, the way only a page with math carries the math styles.\n   Series colors are the diagram tokens --series-1 to --series-6 (docs/reference.md, "
  • Network accessline 803
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><defs><marker id='a' markerHeight='5' markerUnits='strokeWidth' markerWidth='7' orient='auto' refX='7' refY='2.5'><path fill='black' d='m0 0 7 2.5L0 5z'/></
  • Network accessline 804
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><defs><marker id='a' markerHeight='5' markerUnits='strokeWidth' markerWidth='7' orient='auto' refX='7' refY='2.5'><path fill='black' d='m0 0 7 2.5L0 5z'/></marker><
  • Network accessline 1114
    } `; var FONT_CSS = { "bangers": '/* Bangers, Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers), SIL Open Font License 1.1 (https://openfontlicense.org) */\n@font-face {\n  font-family: "Bangers";\n  font-s
  • Network accessline 1115
    `; var FONT_CSS = { "bangers": '/* Bangers, Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers), SIL Open Font License 1.1 (https://openfontlicense.org) */\n@font-face {\n  font-family: "Bangers";\n  font-sty
  • Network accessline 1116
    var FONT_CSS = { "bangers": '/* Bangers, Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers), SIL Open Font License 1.1 (https://openfontlicense.org) */\n@font-face {\n  font-family: "Bangers";\n  font-style:
  • Possible obfuscationline 1117
    var DELTA_JS = "\n// \u2500\u2500 Change markers: the Before / Changes / After switch \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// The switch starts hidden because it needs this script. It swaps the am-
  • Possible obfuscationline 1118
    var UPDATE_CSS = "/* New-version button and popover (src/render.js adds this file only to a page that has the button). The popover sits under the\n   toolbar and stays hidden unless open, so a browser without native popovers never shows it.
  • Network accessline 1356
    var VIDEO_EXPORT_JS = "// The export engine for the path that has no ffmpeg: the player page drives its own render(t), rasterizes the stage\n// into a canvas, encodes the picture and the narration with WebCodecs and muxes the WebM container
  • Network accessline 2110
    family: "Bangers",     file: "@fontsource/bangers/files/bangers-latin-400-normal.woff2",     notice: "Bangers, Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers), SIL Open Font License 1.1 (https://openfontl
  • Network accessline 2111
    file: "@fontsource/bangers/files/bangers-latin-400-normal.woff2",     notice: "Bangers, Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers), SIL Open Font License 1.1 (https://openfontlicense.org)"   }
  • Network accessline 2112
    notice: "Bangers, Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers), SIL Open Font License 1.1 (https://openfontlicense.org)"
  • Possible obfuscationline 2517
    var x = { codeRemoveIndent: /^(?: {0,3}\t| {1,4})/gm, outputLinkReplace: /\\([\[\]])/g, indentCodeCompensation: /^(\s+)(?:```)/, beginningSpace: /^\s+/, endingHash: /#$/, startingSpaceChar: /^ /, endingSpaceChar: / $/, endingSpaceTabChar: /
  • Network accessline 3766
    return (n) => {       if (n.message += ` Please report this to https://github.com/markedjs/marked.`, e) {
  • Network accessline 3767
    if (n.message +=  Please report this to https://github.com/markedjs/marked.`, e) {
  • Network accessline 3768
    Please report this to https://github.com/markedjs/marked.`, e) {
  • Network accessline 4871
    const h2 = Math.ceil(height);   const direction = dir === "rtl" ? ' direction="rtl"' : "";   return `<svg viewBox="0 0 ${w} ${h2}" width="${w}" height="${h2}" role="img" aria-label="${esc(label)}"${direction} xmlns="http://www.w3.org/2000/s
  • Network accessline 4872
    const direction = dir === "rtl" ? ' direction="rtl"' : "";   return `<svg viewBox="0 0 ${w} ${h2}" width="${w}" height="${h2}" role="img" aria-label="${esc(label)}"${direction} xmlns="http://www.w3.org/2000/svg">`; }
  • Network accessline 4873
    return `<svg viewBox="0 0 ${w} ${h2}" width="${w}" height="${h2}" role="img" aria-label="${esc(label)}"${direction} xmlns="http://www.w3.org/2000/svg">`;
  • Access to secretsline 9291
    [Credential-related source omitted]
  • Access to secretsline 9295
    [Credential-related source omitted]
  • Network accessline 9764
    } function colophon(language) {   const repo = "https://github.com/QingYunA/answer-me-with-html";
  • Network accessline 9765
    function colophon(language) {   const repo = "https://github.com/QingYunA/answer-me-with-html";   const link = `<a href="${repo}" target="_blank" rel="noopener">Answer me with HTML</a>`;
  • Network accessline 9766
    const repo = "https://github.com/QingYunA/answer-me-with-html";
  • Network accessline 9793
    <p class="am-update-label">${esc(t.agent)}</p> ${row(t.agentText, false)} <a href="https://github.com/QingYunA/answer-me-with-html/releases" target="_blank" rel="noopener">${esc(t.notes)}</a>
  • Network accessline 9794
    ${row(t.agentText, false)} <a href="https://github.com/QingYunA/answer-me-with-html/releases" target="_blank" rel="noopener">${esc(t.notes)}</a> </div>
  • Network accessline 9795
    <a href="https://github.com/QingYunA/answer-me-with-html/releases" target="_blank" rel="noopener">${esc(t.notes)}</a>
  • Access to secretsline 9928
    [Credential-related source omitted]
  • Network accessline 10041
    var CATALOG = Object.freeze({   url: "https://answer-me-with-html.com/themes/index.json",
  • Network accessline 10042
    url: "https://answer-me-with-html.com/themes/index.json",

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Combined signals: 1 fact
Declared and executed: 5 facts
Signal confidence: 43 facts

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeNativeManifest .claude-plugin/marketplace.json.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md skills/answer-me-with-html/SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md skills/answer-me-with-html/SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md skills/answer-me-with-html/SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md skills/answer-me-with-html/SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md skills/answer-me-with-html/SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

QingYunA/answer-me-with-html: #257 on hotskills, 5.7k stars

[![QingYunA/answer-me-with-html on hotskills](https://hotskills.dev/badge/qingyuna-answer-me-with-html.svg)](https://hotskills.dev/skill/qingyuna-answer-me-with-html/)