` and `.doc-title` - `{{SUBTITLE}}` - `{{DOC_TYPE}}` → universal uppercase code: `PLAN`, `SPEC`, `SYSTEM DESIGN`, `RFC`, `RUNBOOK`, `POSTMORTEM`, `BRAINSTORM`, `NOTES` - `{{SOURCE_FILE}}` → basename of source, e.g. `plan.md` - `{{DATE}}` → ISO date or localized "Updated <today>" - `{{READ_TIME}}` → localized reading time - `{{BRAND_LABEL}}` → localized doc-type label for the topbar - `{{PRINT_TOOLTIP}}` → localized print tooltip - `{{THEME_TOOLTIP}}` → localized theme-toggle tooltip - `{{TOC_TITLE}}` → localized TOC title - `{{CLOSE_LABEL}}` → localized "Close" - `{{SKIP_LINK_LABEL}}` → localized skip-to-content link text - `{{FOOTER_NOTE}}` → localized source attribution #### Phase 3: Replace TOC and content slot 1. Replace `` with one `<a>` per H2/H3 (see §2 in `components.md`). 2. Replace only the content between `` and `` with generated section HTML. 3. Preserve the `` and `` markers in the output file. 4. Do not modify anything outside known placeholders, ``, or the content slot. Guidelines per section: - Start with `<h2 id="...">` or `<h3 id="...">` matching the TOC entry. - Use ONE primary component per logical chunk. - Preserve original meaning and technical identifiers. - Use snippets from `components.md`; do not invent CSS classes. - Write LaTeX formulas as semantic text. `template.html` already contains KaTeX assets and render logic. ### Step 4 — Verify After writing, do a targeted sanity check: - Every `id="..."` referenced in the TOC exists on a heading. - No leftover `{{PLACEHOLDER}}` strings. - `` is gone. - The content slot contains generated section HTML between `` and ``. - Mermaid blocks have valid syntax (use `flowchart`, `sequenceDiagram`, `erDiagram`, `stateDiagram-v2`, or `gantt` — never bare `graph` without direction). - No `<script>` or `<style>` tags were added during generation. Mermaid, Highlight.js, and KaTeX are already part of `template.html`. After verification passes, **automatically open the output file** in the user's default browser: - macOS: `open <file>.html` - Linux: `xdg-open <file>.html` Then report back to the user with: - Output file path - 1-line summary of what changed (e.g. *"Rendered 7 sections: 1 mermaid flow, 2 step timelines, 4 callouts. ~6 phút đọc."*) ## Critical rules 1. **Never paraphrase technical content into vague prose.** A step `chạy migration 0042_user_schema.sql` must remain that exact filename — don't change to `chạy migration mới`. 2. **One component per chunk.** Don't wrap a callout inside a step card inside a collapsible. Keep nesting flat. 3. **Mermaid > prose for any flow ≥ 3 hops.** If the source says "A gọi B, B gọi C, C ghi DB", make a diagram. 4. **Key-point highlights are rare.** Max 1 per H2 section, ideally 2-3 total per document. 5. **UI text follows the detected source language** — including for non-EN/non-VI sources (Chinese, Japanese, Korean, Spanish, etc). Use the language sample table in Step 2 or translate equivalently. Code, commands, file names, library names, error messages stay verbatim regardless of language. 6. **External assets are restricted.** Do not add external file references during generation. Mermaid, Highlight.js, and KaTeX are already included in `template.html`. 7. **Do not modify `template.html` or `components.md` while generating output** — those are the skill's source of truth. Only edit the copied output `.html`. 8. **Use SVG icons only — never emojis.** Every icon is `<svg class="..."><use href="#i-NAME"/></svg>` referencing the sprite at the top of `<body>`. See §13 in `components.md` for the catalog. No emoji glyphs anywhere in callouts, doc-meta, topbar, or body content. 9. **Anchor links and copy-to-clipboard auto-inject via JS** — do NOT add them manually. Just give H2/H3 a proper `id`, and put code in `<pre><code>`. The template's boot script handles the rest. 10. **Wrap wide tables in `.table-wrap`** — see components.md §14b. Tables ≥ 4 columns or with long cells need the wrapper for mobile scroll. 11. **Use `<figure>` + `<figcaption>` for images** with descriptive `alt`. See components.md §14a. 12. **LaTeX formulas must remain semantic text.** When formulas are present, use LaTeX delimiters and KaTeX rendering as defined in `latex.md`; do not convert formulas to images, SVG drawings, screenshots, or vague prose. ## Cross-AI compatibility This skill is designed to run identically on: - **Claude Code** — install at `~/.claude/skills/md2html/` (this directory, symlinked or copied). Invoke with `/md2html <file>`. - **Codex CLI** — copy `SKILL.md` content to `~/.codex/prompts/md2html.md`, keep `template.html` and `components.md` at a stable absolute path, update the file references in SKILL.md if needed. Invoke with `/md2html`. - **Antigravity** — add SKILL.md as a custom prompt/agent instruction, ensure the agent has Read/Write tool access to the skill folder. The default external dependencies are `mermaid`, `highlight.js`, and `KaTeX` via CDN (resolved at HTML open time, not at skill execution time). No npm/pip install is required for the skill itself. ## Edge cases - **Source has no headings** — wrap content in one `<h2 id="content">Nội dung</h2>` and infer logical breaks from blank lines + topic shifts. - **Source has existing mermaid code blocks** — keep them, just rewrap in `<figure class="diagram">` with caption. - **Source has HTML embedded** — pass through as-is inside `<div>` if safe, else escape. - **Source is very short (< 200 words)** — leave `` empty and keep the template structure intact. The template script hides the empty TOC. - **Source is very long (> 5000 words)** — collapse low-priority sections by default with `<details>`. - **Output file already exists** — overwrite. The source `.md` is canonical; HTML is regenerated artifact. ## Anti-patterns - ❌ Rewriting the template by hand — copy `template.html` to the output path and replace only known placeholders, ``, and the content slot. - ❌ Reading the full `template.html` into the conversation — use the placeholder contract and stable content markers instead. - ❌ Adding new CSS via `<style>` in generated output — extend `template.html` instead and tell the user. - ❌ Translating proper nouns or code identifiers. - ❌ "Improving" the source by adding info not in the original. - ❌ Reporting success without running Step 4 verification.

`, ``, ``, and `