skills.rest
mjun0812
mjun0812COMMUNITY
Explore all skills by this author โ†’
Website๐•@mjun0812GitHub

exhtml

Generate self-contained HTML explainer pages with glossary, table of contents, and diagrams.

1|Updated Aug 24, 2026
Search Tags:#documentation#html#mermaid#technical writing#glossary#svg#explainer
One-click install
npx skills add https://github.com/mjun0812/skills --skill exhtml-mjun0812
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: exhtml
Source: https://github.com/mjun0812/skills/tree/main/skills/docs/exhtml
Command: npx skills add https://github.com/mjun0812/skills --skill exhtml-mjun0812

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve? Explaining a concept, mechanism, or investigation result often ends up as a wall of Markdown that readers must scroll through without structure. This Skill turns that content into a single self-contained HTML page with a glossary, auto-generated table of contents, diagrams, and code blocks, so readers can understand the topic without reading the original source. ## Core Features & Use Cases - Template-based generation: Fill a fixed HTML template (dark/light theme, left TOC, right glossary) with placeholders for title, lede, summary, body, and glossary, keeping visual design consistent. - Diagram and code support: Hand-drawn SVG figures, Mermaid diagrams (flowchart, sequence, ER, state), syntax-highlighted code via Shiki, and MathJax formulas, with strict design rules enforced. - Automated validation: A bundled check script verifies template integrity, heading IDs, glossary links, banned elements (emoji, external images, extra scripts), and optional block consistency before delivery. - Use Case: After investigating how a caching layer works, ask for an HTML explainer; the Skill produces one file with a glossary of terms, SVG architecture diagram, and code diffs, validated and ready to open in a browser. ## Quick Start Explain the architecture we just discussed as a self-contained HTML page using the exhtml skill.

Frequently Asked Questions about exhtml

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a self-contained HTML explainer page?โ–ผ

Copy the bundled template.html and fill its placeholders: title, created/updated dates, model name, lede, summary items, body, and glossary. Then run the check_exhtml.py validation script and fix any reported violations before delivering the file.

How do I add diagrams to an HTML documentation page?โ–ผ

Use hand-drawn SVG inside .ex-figure-frame for node relationships and layered structures, or Mermaid for flowcharts, sequence diagrams, ER diagrams, and state transitions. Colors must use the c1-c4 category classes, and every figure needs a figcaption explaining it.

Does the HTML output require a build step or server?โ–ผ

No build step is required. The output is a single self-contained HTML file that opens directly in a browser, with MathJax, Shiki, and Mermaid loaded from CDNs only when the corresponding content is actually used.

Why does the exhtml validation script report errors?โ–ผ

The script fails when placeholders remain, the template style block was modified, headings lack IDs, glossary links are broken, or banned elements like emoji, external images, extra scripts, or raw SVG colors are present. Fix each reported violation and rerun until it prints ok.

When should I not use exhtml for documentation?โ–ผ

Do not use it for plain Markdown summaries, standalone diagrams, or slide decks; it is designed only for full explainer pages. Simple linear procedures should be numbered lists rather than diagrams, and content without glossary-worthy terms may not fit the format.

Related Skills

Explore More Content & Communication Skillsโ†’
juliancktjulianckt

research

Investigate questions against primary sources and write cited findings to Markdown files.

Community
Basic
solaiussolaius

knowledge-hub-create

Build a multi-page HTML knowledge hub from distributed product sources.

Community
Advanced
w-pinkietechw-pinkietech
1

japanese-tech-writing

Enforces Japanese technical writing style rules for drafting and revising documents.

Official
Intermediate
ai-ecoverseai-ecoverse

presentations

Generate interactive Reveal.js slide decks from user briefs via a data contract.

Official
Advanced