skills.rest
alirezarezvani
alirezarezvaniCOMMUNITY
Explore all skills by this author →
Website𝕏@RezaRezvaniBlnGitHub

md-document

Converts long-form markdown documents into single-file interactive HTML with TOC, search, and scrollspy.

25.3k|3.6k|Updated Oct 19, 2025
Search Tags:#HTML#single-file#Markdown#converter#design-system#Documentation#TOC
One-click install
npx skills add https://github.com/alirezarezvani/claude-skills --skill md-document
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: md-document
Source: https://github.com/alirezarezvani/claude-skills/tree/main/markdown-html/skills/md-document
Command: npx skills add https://github.com/alirezarezvani/claude-skills --skill md-document

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Long markdown specs, RFCs, reports, and plans are hard to navigate and share as plain text. This Skill converts them into a single self-contained HTML file with a sticky table of contents, scrollspy, section search, and code-copy buttons, styled with your design-system brand tokens.

Core Features & Use Cases

  • Three-stage stdlib pipeline: markdown_parser.py parses markdown into a JSON AST, html_renderer.py renders it with your 12 derived CSS brand tokens, and interactivity_injector.py adds vanilla-JS search, copy, smooth-scroll, and scrollspy behavior.
  • Single-file output: All CSS and JS are inlined; the only externals are Google Fonts and Prism.js CDN, with graceful fallbacks if either is blocked.
  • Design-system integration: Reads the onboarding config via config_loader.py and refuses to render until design-system onboarding is complete, ensuring WCAG AA contrast and brand-consistent typography.
  • Use Case: Convert a 400-line engineering RFC markdown file into a branded, navigable HTML document you can email or host on any static server.

Quick Start

Ask the AI to convert your markdown spec or report into a single interactive HTML document using the md-document skill after design-system onboarding is complete.

Frequently Asked Questions about md-document

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

FAQPage Schema
How do I convert markdown to a single HTML file with a table of contents?▼

Run the three-script pipeline: markdown_parser.py produces a JSON AST, html_renderer.py renders it with your design-system tokens into HTML, and interactivity_injector.py adds search, scrollspy, and copy buttons. The output is one self-contained .html file.

What markdown features are supported when converting to HTML?▼

The parser supports headings H1-H6, paragraphs, bold, italic, inline code, links, images, fenced code blocks, GFM tables with alignment, GFM callouts (NOTE, TIP, IMPORTANT, WARNING, CAUTION), blockquotes, single-level lists, and horizontal rules. Nested lists, footnotes, and task checkboxes are out of scope.

Does the generated HTML require a build step or framework?▼

No. All CSS and JavaScript are inlined into one HTML file using vanilla JS and IntersectionObserver. The only external requests are Google Fonts CSS and Prism.js from cdn.jsdelivr.net, both with graceful fallbacks if blocked.

Why does the converter refuse to render my markdown file?▼

It refuses input under 100 lines, since plain markdown is sufficient below that threshold, and it refuses to run before design-system onboarding completes. Run the /cs:design-system onboarding first so the 12 brand tokens can be derived.

Can I customize the layout and typography of the HTML output?▼

Yes. The design_style config selects editorial, technical, minimal, or playful presets that change width, spacing, and callout styling. Typography scale, heading and body fonts, code theme, and TOC behavior all come from the design-system config.

Related Skills

Explore More Content & Communication Skills→
I-OnlabsI-Onlabs
3

ui-design-system

Generates Tailwind, (or other unspecified CSS framework? no, unspecified — generate minimalisticly:

Community
Intermediate
twillcockstwillcocks

portal-share

Generate HMAC-SHA256 signed share links for hosted client portals.

Community
Advanced
shekerkammashekerkamma

marp

Convert Markdown with Mermaid diagrams into slide decks via Marp.

Community
Intermediate
christopher-busschristopher-buss
6

vitepress

Generate static documentation and blog sites with VitePress and Vue.js.

Community
Advanced