[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75972":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":14,"starSnapshotCount":14,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},75972,"md2html","haidang1810\u002Fmd2html","haidang1810","Your AI writes docs — md2html turns them into pages people actually read. A portable skill for Claude Code \u002F Codex \u002F Antigravity that converts long-form Markdown (plans, specs, system designs, RFCs, runbooks, postmortems, brainstorms) into self-contained HTML with Mermaid, timelines, callouts, TOC. Multi-language.",null,"HTML",374,23,1,0,14,157,61.14,"MIT License",false,"main",true,[],"2026-06-12 04:01:19","# md2html\n\n> **Your AI writes docs. md2html turns them into pages people actually read.**\n> A portable skill for Claude Code, Codex, Antigravity — or any AI agent — that turns long-form Markdown (plans, specs, system designs, RFCs, runbooks, postmortems, brainstorms, notes) into a single self-contained HTML page with sidebar TOC, Mermaid diagrams, step timelines, callouts, comparison cards, and a light\u002Fdark Claude-orange theme.\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-D97757.svg)](LICENSE)\n[![Zero install](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Finstall-zero%20deps-success.svg)](#install)\n[![Multi-agent](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fworks%20with-Claude%20%C2%B7%20Codex%20%C2%B7%20Antigravity-D97757.svg)](#install)\n[![Multi-language](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flang-EN%20%C2%B7%20VI%20%C2%B7%20ZH%20%C2%B7%20JA%20%C2%B7%20KO%20%C2%B7%20%E2%80%A6-blue.svg)](#multi-language)\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Fpreview-light.png\" alt=\"md2html light theme preview\" width=\"49%\" \u002F>\n  \u003Cimg src=\"docs\u002Fpreview-dark.png\" alt=\"md2html dark theme preview\" width=\"49%\" \u002F>\n\u003C\u002Fp>\n\n## The problem\n\nYour AI just produced 2,000 words of system design. Beautiful logic, careful tradeoffs, three architecture options compared — and you can't bring yourself to read past section 2 because it's a monospace wall of text in a terminal scrollback. Same goes for the brainstorm doc you asked it for last week, the migration plan from this morning, the postmortem draft you've been ignoring. Nobody on the team will click your `plan.md` link either.\n\n## What this skill does\n\nYou type `\u002Fmd2html anydoc.md`. Your agent reads the file, opens `template.html` + `components.md` from this repo, and writes one polished HTML file next to the source. No build step, no server, no Node, no Python.\n\nWorks on anything long-form your AI hands you:\n\n- **Plans** — multi-week roadmaps, migration steps, rollout strategies\n- **Specs** — feature specs, API specs, data-model designs\n- **System designs** — architecture docs, RFC-style proposals\n- **Runbooks** — operational procedures, incident response steps\n- **Postmortems** — incident reviews with timeline + root cause + action items\n- **Brainstorms** — option lists with rationale, idea dumps to organize\n- **Notes** — meeting notes, research summaries, anything else markdown\n\nIt's not a Markdown-to-HTML converter. **It's an analyzer.** The agent decides which sections become Mermaid diagrams, which become numbered step cards, which become pros-cons tables, which become collapsible \"deep dive\" panels. The result feels designed, not converted.\n\n## Why it's worth your `~\u002F.claude\u002Fskills` slot\n\n- **Reads like a product page, not a spec.** Sidebar TOC with scroll-spy, anchor links on every heading, copy-to-clipboard on every code block, a scroll progress bar at the top. Things you'd build into a real docs site.\n- **Diagrams instead of paragraphs.** Three-hop flows automatically become Mermaid `flowchart` blocks. Trade-off discussions become side-by-side comparison cards. The agent decides — you don't write any of it.\n- **One file. Email it. Drop it in Slack. Open it on a plane.** Self-contained HTML with embedded CSS and theme JS. The only network request is the Mermaid CDN, and you can inline that too if you care.\n- **Zero install for your users.** No `npm install`. No Docker. The whole skill is three markdown\u002FHTML files. Anyone with an AI agent and `git clone` can use it in under a minute.\n- **Portable across agents.** Works the same way in Claude Code, Codex CLI, Antigravity, Cursor, Continue.dev — anywhere an agent can read a file and write a file. No agent-specific code.\n- **Source language → output language, automatically.** Vietnamese spec? Vietnamese UI. Chinese plan? `目录` instead of `Contents`. Eight languages built into the label table; the agent fills in any other language by translation.\n- **Production-grade UX, not a weekend hack.** WCAG AA contrast, ≥ 40 px touch targets, `prefers-reduced-motion`, focus-visible rings, mobile TOC drawer with backdrop and ESC-to-close, skip-to-content link, full print stylesheet. Reviewed by a UI\u002FUX engineer who didn't pull punches.\n\n## Install\n\n### Claude Code\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fhaidang1810\u002Fmd2html ~\u002F.claude\u002Fskills\u002Fmd2html\n```\n\nReload your session and run:\n\n```\n\u002Fmd2html plan.md\n```\n\n→ outputs `plan.html` next to the source.\n\n### Codex CLI\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fhaidang1810\u002Fmd2html ~\u002F.config\u002Fmd2html\nmkdir -p ~\u002F.codex\u002Fprompts\nln -s ~\u002F.config\u002Fmd2html\u002FSKILL.md ~\u002F.codex\u002Fprompts\u002Fmd2html.md\n```\n\n(Codex's prompts directory has shifted across versions — adjust the symlink target if needed.)\n\n### Antigravity\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fhaidang1810\u002Fmd2html ~\u002Fprojects\u002Fmd2html\n```\n\nOpen Antigravity → **Settings → Custom Agents → New**, paste the contents of `SKILL.md`, and give the agent file-read access to `~\u002Fprojects\u002Fmd2html\u002F`.\n\n### Any other AI agent\n\nIf the agent supports a system prompt or custom instructions AND can read\u002Fwrite local files, it can run this skill. Clone the repo to a stable path, paste `SKILL.md` into the agent's custom instructions, done.\n\n## Usage\n\n```\n\u002Fmd2html plan.md                    # writes plan.html\n\u002Fmd2html plan.md --out docs\u002Fx.html  # custom output path\n\u002Fmd2html                            # prompts for a file\n```\n\nThe agent picks components based on what's actually in the doc:\n\n| What's in the Markdown                          | What you get                          |\n| ---                                             | ---                                   |\n| Numbered list of actions                        | Step cards with timeline rail         |\n| \"A calls B, B writes to DB\" prose               | Mermaid `flowchart`                   |\n| \"Pros \u002F Cons\", \"Trade-offs of X\"                | Two-column pros-cons box              |\n| \"Option A vs B vs C\"                            | Comparison cards (with ★ Recommended) |\n| \"Don't do X\" \u002F \"Must do Y\"                      | Danger \u002F decision callout             |\n| Long appendix or code dump                      | Collapsible deep-dive panel           |\n| Key conclusion                                  | Accent-bordered highlight box         |\n\n## Multi-language\n\nUI labels follow the source. The label table covers **English, Vietnamese, Chinese (中文), Japanese (日本語), Korean (한국어), Spanish, French, German** out of the box. Anything else, the agent translates equivalently and sets `\u003Chtml lang=\"...\">` plus the `--rec-label` CSS variable. RTL languages are LTR-only for now.\n\n## Demo\n\nSee [`examples\u002Fexample-plan.md`](examples\u002Fexample-plan.md) (Vietnamese source) → [`examples\u002Fexample-plan.html`](examples\u002Fexample-plan.html) (rendered). The screenshots at the top of this README are from a longer test spec — a game economy design doc.\n\n## Customize the theme\n\nAll visual tokens are CSS variables at the top of `template.html`. Change accent color, surface, fonts, radii by editing the `:root` and `[data-theme=\"dark\"]` blocks. Don't rename classes — `components.md` references them.\n\n```css\n:root {\n  --accent: #D97757;    \u002F* Claude orange — change me *\u002F\n  --bg: #FAFAF7;\n  \u002F* … *\u002F\n}\n```\n\n## Update\n\n```bash\ncd ~\u002F.claude\u002Fskills\u002Fmd2html && git pull\n```\n\n## Uninstall\n\n```bash\nrm -rf ~\u002F.claude\u002Fskills\u002Fmd2html\n```\n\n## What's in the box\n\n```\nmd2html\u002F\n├── SKILL.md         # Instructions the agent loads on \u002Fmd2html\n├── template.html    # HTML skeleton: CSS + Mermaid + theme JS\n├── components.md    # Component catalog the agent assembles from\n├── examples\u002F        # Reference .md → .html pair (gold standard)\n├── docs\u002F            # Screenshots for this README\n├── LICENSE\n└── README.md\n```\n\n## Roadmap\n\n- [ ] Inline Mermaid bundle (true offline mode)\n- [ ] More themes (forest green, midnight blue, paper)\n- [ ] Gantt \u002F roadmap component\n- [ ] Auto-detect images in source and inline them\n- [ ] RTL language support (Arabic, Hebrew)\n\nPRs welcome — especially translation tables for additional languages and theme variants.\n\n## License\n\n[MIT](LICENSE) © 2026 [haidang1810](https:\u002F\u002Fgithub.com\u002Fhaidang1810)\n","md2html 是一个将长篇 Markdown 文档转换为易于阅读的 HTML 页面的工具。它支持将计划、规格说明、系统设计、RFC、运行手册、事后分析和头脑风暴等文档自动转换成带有目录、Mermaid 图表、时间线、注释和对比卡片的自包含 HTML 文件，适用于多种语言。此项目特别适合需要将AI生成的技术文档以更友好的形式分享给团队成员或客户的场景，如软件开发过程中的系统架构讨论、产品规划及故障复盘报告等。其无需额外安装依赖，直接通过命令行调用即可完成转换，操作简便且兼容Claude Code、Codex 和 Antigravity 等多个AI平台。",2,"2026-06-11 03:54:05","CREATED_QUERY"]