md2html

Name: md2html
Author: haidang1810

46installs27forks

How to install md2html?

haidang1810/md2html/md2html

$npx -y skills add haidang1810/md2html --skill md2html

Installs into the current project.

Summary

Convert long-form Markdown (plan, spec, system design, RFC, runbook, postmortem, brainstorm, notes) into a single self-contained HTML page with Mermaid diagrams, step timelines, callouts, sidebar TOC. Claude-orange light+dark theme. Multi-language. Portable across Claude Code / C

Files · 1

View on GitHub

SKILL.md

1	# /md2html
2
3	Convert a verbose Markdown document into a single, self-contained HTML file that a tired human can actually scan: diagrams instead of paragraphs, step cards instead of numbered lists, callouts for the parts that matter.
4
5	## Usage
6
7	```
8	/md2html <file.md> # output <file>.html next to source
9	/md2html <file.md> --out X.html # custom output path
10	/md2html # if no arg, ask user which file
11	```
12
13	## Skill files (resolved relative to this SKILL.md)
14
15	- `template.html` — HTML skeleton with embedded CSS (Claude orange light+dark), Mermaid CDN, theme toggle, TOC sidebar, footer. Contains `{{PLACEHOLDER}}` strings and `<!-- COMMENT -->` slots.
16	- `components.md` — catalog of HTML snippets you must copy verbatim (step cards, callouts, mermaid blocks, pros-cons, comparison cards, collapsibles).
17	- `examples/` — at least one reference `<doc>.md` → `<doc>.html` pair. Read one to calibrate output quality before starting.
18
19	You MUST read all three before writing output. Do not invent CSS classes or skip the catalog.
20
21	## What you must do when invoked
22
23	Follow these steps in order. Do not skip.
24
25	### Step 1 — Resolve inputs
26
27	1. Determine the source file from the user's invocation. If none given, ask: "Tệp `.md` nào cần convert?" and stop.
28	2. Read the source `.md` fully.
29	3. Read `template.html` and `components.md` from the same directory as this SKILL.md.
30	4. Read one example pair under `examples/` to calibrate.
31
32	### Step 2 — Analyze the source document
33
34	Do this analysis silently in your head (or as one short summary line to the user). Identify:
35
36	- Language of the source — detect from the actual prose, not the filename. Set `<html lang="...">` to the ISO 639-1 code (`en`, `vi`, `zh`, `ja`, `ko`, `es`, `fr`, `de`, `ru`, `ar`, `th`, …) and translate every UI label to that language.
37
38	Common samples (extend to any language using the same scheme):
39
40	\| Key \| EN \| VI \| ZH (中文) \| JA (日本語) \| KO (한국어) \| ES (Español) \|
41	\|--- \|--- \|--- \|--- \|--- \|--- \|--- \|
42	\| TOC title \| Contents \| Mục lục \| 目录 \| 目次 \| 목차 \| Contenido \|
43	\| Read-time \| ~N min read \| ~N phút đọc \| ~N 分钟阅读 \| ~N 分で読了 \| ~N분 소요 \| ~N min de lectura \|
44	\| Recommended \| ★ Recommended \| ★ Đề xuất \| ★ 推荐 \| ★ 推奨 \| ★ 추천 \| ★ Recomendado \|
45	\| Key point \| Key point \| Ý chính \| 要点 \| 要点 \| 핵심 \| Idea clave \|
46	\| Pros \| ✓ Pros \| ✓ Ưu điểm \| ✓ 优点 \| ✓ 長所 \| ✓ 장점 \| ✓ Ventajas \|
47	\| Cons \| ✕ Cons \| ✕ Nhược điểm \| ✕ 缺点 \| ✕ 短所 \| ✕ 단점 \| ✕ Desventajas \|
48	\| Print tooltip \| Print / Save PDF \| In / Lưu PDF \| 打印 / 保存 PDF \| 印刷 / PDF 保存 \| 인쇄 / PDF 저장 \| Imprimir / Guardar \|
49	\| Theme tooltip \| Toggle theme \| Đổi theme \| 切换主题 \| テーマ切替 \| 테마 전환 \| Cambiar tema \|
50	\| Source: prefix \| Source: \| Nguồn: \| 来源: \| ソース: \| 소스: \| Fuente: \|
51
52	For any language not listed, translate using the same conventions. The "Recommended" badge is configured via the `--rec-label` CSS variable set on `<html>` (no per-language CSS needed) — see `{{REC_LABEL}}` below.
53
54	RTL languages (Arabic, Hebrew, Persian) — current template is LTR-only. If source is RTL, also add `dir="rtl"` to `<html>` and consider it a known visual limitation (sidebar will stay on the left).
55
56	- Title — from first H1 or filename. Title should be ≤ 80 chars.
57	- Subtitle — first paragraph after H1, or the document's TL;DR sentence. ≤ 200 chars.
58	- Doc type — infer one of: `PLAN`, `SPEC`, `SYSTEM DESIGN`, `RFC`, `RUNBOOK`, `POSTMORTEM`, `BRAINSTORM`, `NOTES`. Pick the closest match based on the document's purpose, not its filename. Brainstorm = exploring options with rationale; Plan = ordered steps to a goal; Spec = exact behavior contract; System design = architecture + tradeoffs; RFC = proposal seeking feedback; Runbook = operational procedure; Postmortem = incident review. The uppercase code in the eyebrow stays universal; the topbar `BRAND_LABEL` localizes (Plan / Kế hoạch / 计划 / etc).

People who liked this also viewed

6 picks

Type

md2html

46installs27forks

View on GitHub

How to install md2html?

haidang1810/md2html/md2html

$npx -y skills add haidang1810/md2html --skill md2html

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# /md2html
2
3	Convert a verbose Markdown document into a single, self-contained HTML file that a tired human can actually scan: diagrams instead of paragraphs, step cards instead of numbered lists, callouts for the parts that matter.
4
5	## Usage
6
7	```
8	/md2html <file.md> # output <file>.html next to source
9	/md2html <file.md> --out X.html # custom output path
10	/md2html # if no arg, ask user which file
11	```
12
13	## Skill files (resolved relative to this SKILL.md)
14
15	- `template.html` — HTML skeleton with embedded CSS (Claude orange light+dark), Mermaid CDN, theme toggle, TOC sidebar, footer. Contains `{{PLACEHOLDER}}` strings and `<!-- COMMENT -->` slots.
16	- `components.md` — catalog of HTML snippets you must copy verbatim (step cards, callouts, mermaid blocks, pros-cons, comparison cards, collapsibles).
17	- `examples/` — at least one reference `<doc>.md` → `<doc>.html` pair. Read one to calibrate output quality before starting.
18
19	You MUST read all three before writing output. Do not invent CSS classes or skip the catalog.
20
21	## What you must do when invoked
22
23	Follow these steps in order. Do not skip.
24
25	### Step 1 — Resolve inputs
26
27	1. Determine the source file from the user's invocation. If none given, ask: "Tệp `.md` nào cần convert?" and stop.
28	2. Read the source `.md` fully.
29	3. Read `template.html` and `components.md` from the same directory as this SKILL.md.
30	4. Read one example pair under `examples/` to calibrate.
31
32	### Step 2 — Analyze the source document
33
34	Do this analysis silently in your head (or as one short summary line to the user). Identify:
35
36	- Language of the source — detect from the actual prose, not the filename. Set `<html lang="...">` to the ISO 639-1 code (`en`, `vi`, `zh`, `ja`, `ko`, `es`, `fr`, `de`, `ru`, `ar`, `th`, …) and translate every UI label to that language.
37
38	Common samples (extend to any language using the same scheme):
39
40	\| Key \| EN \| VI \| ZH (中文) \| JA (日本語) \| KO (한국어) \| ES (Español) \|
41	\|--- \|--- \|--- \|--- \|--- \|--- \|--- \|
42	\| TOC title \| Contents \| Mục lục \| 目录 \| 目次 \| 목차 \| Contenido \|
43	\| Read-time \| ~N min read \| ~N phút đọc \| ~N 分钟阅读 \| ~N 分で読了 \| ~N분 소요 \| ~N min de lectura \|
44	\| Recommended \| ★ Recommended \| ★ Đề xuất \| ★ 推荐 \| ★ 推奨 \| ★ 추천 \| ★ Recomendado \|
45	\| Key point \| Key point \| Ý chính \| 要点 \| 要点 \| 핵심 \| Idea clave \|
46	\| Pros \| ✓ Pros \| ✓ Ưu điểm \| ✓ 优点 \| ✓ 長所 \| ✓ 장점 \| ✓ Ventajas \|
47	\| Cons \| ✕ Cons \| ✕ Nhược điểm \| ✕ 缺点 \| ✕ 短所 \| ✕ 단점 \| ✕ Desventajas \|
48	\| Print tooltip \| Print / Save PDF \| In / Lưu PDF \| 打印 / 保存 PDF \| 印刷 / PDF 保存 \| 인쇄 / PDF 저장 \| Imprimir / Guardar \|
49	\| Theme tooltip \| Toggle theme \| Đổi theme \| 切换主题 \| テーマ切替 \| 테마 전환 \| Cambiar tema \|
50	\| Source: prefix \| Source: \| Nguồn: \| 来源: \| ソース: \| 소스: \| Fuente: \|
51
52	For any language not listed, translate using the same conventions. The "Recommended" badge is configured via the `--rec-label` CSS variable set on `<html>` (no per-language CSS needed) — see `{{REC_LABEL}}` below.
53
54	RTL languages (Arabic, Hebrew, Persian) — current template is LTR-only. If source is RTL, also add `dir="rtl"` to `<html>` and consider it a known visual limitation (sidebar will stay on the left).
55
56	- Title — from first H1 or filename. Title should be ≤ 80 chars.
57	- Subtitle — first paragraph after H1, or the document's TL;DR sentence. ≤ 200 chars.
58	- Doc type — infer one of: `PLAN`, `SPEC`, `SYSTEM DESIGN`, `RFC`, `RUNBOOK`, `POSTMORTEM`, `BRAINSTORM`, `NOTES`. Pick the closest match based on the document's purpose, not its filename. Brainstorm = exploring options with rationale; Plan = ordered steps to a goal; Spec = exact behavior contract; System design = architecture + tradeoffs; RFC = proposal seeking feedback; Runbook = operational procedure; Postmortem = incident review. The uppercase code in the eyebrow stays universal; the topbar `BRAND_LABEL` localizes (Plan / Kế hoạch / 计划 / etc).

People who liked this also viewed

6 picks

Type