Long-form Markdown to HTML — Development

Converts long-form markdown documents (specs, RFCs, reports, plans, explainers) into a single-file HTML document with a sticky table of contents, scrollspy, search filter, code-copy buttons, and design-system-driven brand tokens. The output is a self-contained HTML file with only Google Fonts and Prism.js as external resources.

markdown-html claude-code

📂 View skill on GitHub ↗ 🚀 How to use

✨ What it does

Generates a single-file HTML document with sticky TOC, scrollspy, search filter, and code-copy buttons.
Renders CommonMark subset: headings, paragraphs, inline formatting, fenced code blocks, GFM tables, callouts, blockquote
Applies the user's 12 derived CSS custom properties from the design-system config.
Enforces hard rules: refuses inputs under 100 lines, refuses without onboarding, and keeps output single-file with only
Supports design_style customization (editorial, playful, technical) that changes layout and typography.
Injects interactivity idempotently (re-injection is a no-op).

🎯 When to use it

When the markdown-html-orchestrator classifies an input as a DOCUMENT.
When a user directly invokes /cs:md-document with a markdown file path.
When a user asks to convert a spec, report, RFC, plan, or explainer to HTML.
When the input is a long-form markdown document (at least 100 lines) and design-system onboarding is complete.

🚀 How to use

Trigger: /cs:md-document

Trigger the skill by running the slash command /cs:md-document <path>.md or by asking Claude to convert a long-form markdown document (spec, report, RFC, plan) to HTML. The skill expects a markdown file path and requires that design-system onboarding has been completed. Example prompts:

/cs:md-document report.md

Convert this RFC to a single-file HTML document with a TOC.

📄 Output: Produces a single-file HTML document at {default_output_dir}/doc-{slug}.html.

📦 Add this skill to Claude Code

# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills

# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/markdown-html/skills/md-document .claude/skills/md-document

Skill source: markdown-html/skills/md-document/SKILL.md

⚠️ Good to know

The skill refuses to process inputs under 100 lines and requires design-system onboarding to have been completed; it does not support nested lists, HTML inlines, footnotes, definition lists, task list checkboxes, or reference-style links.

❓ FAQ

What happens if I try to convert a markdown file that is less than 100 lines?

The skill refuses to convert it, because markdown is still considered the better format for short documents.

Can I customize the visual style of the output?

Yes, you can set a design_style such as 'editorial', 'playful', or 'technical', which changes layout, typography, and other visual properties.

What external resources does the output HTML use?

Only Google Fonts CSS and Prism.js from a CDN; all other CSS and JavaScript is inlined.

🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.