HTML Explainer Pages
Turns an answer into a one-page visual HTML explainer when a page helps more.
Install
npx skills add QingYunA/answer-me-with-html --skill answer-me-with-html -g -a claude-code -y- Repository
- QingYunA/answer-me-with-html5k
- Category
- Documents
- Updated
- 4d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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
Produce a page if any of these is true:
- There are ≥3 interrelated concepts, and the reader needs to see how they relate.
- There is a flow, protocol, call chain or state transition (especially with branches or several actors).
- There is a comparison across ≥3 dimensions, a trade-off between options, or a "can / cannot" list.
- There is a hierarchy or an evolution over time.
Otherwise answer in plain text. When unsure: the more the question "needs a picture to understand", the more it calls for a page.
Automatic pages are for replies to the user. An internal report returned to another agent is not one:
- If a parent agent or a coordinator delegated research, implementation, a review or a progress report, return the text or structure it asked for, with the findings and the evidence. Render no page.
- The parent consolidates the reports. Its reply to the user follows the normal rules of this section.
- If the delegated task explicitly asks for a page, render it, and return the page path together with the verification details the parent asked for. A video needs an explicit video request; delegation alone never authorizes one.
- Judge this by who receives the reply and what was asked for, not by the host or agent name.
