Md Document
Converts long-form markdown into a single-file HTML document with a sticky table of contents, scrollspy, search filtering, code-copy buttons, and brand-token styling.
Before & after
Same prompt, same agent — the only difference is the skill.
To make a long technical spec more readable, you could: - Convert it to HTML with a clean stylesheet - Add a table of contents for navigation - Use syntax highlighting for code blocks - Break it into sections with clear headings - Add anchor links so sections can be linked directly There are many markdown-to-HTML tools available, and static site generators can produce nice documentation from markdown. For a single 60-page document, a tool that generates a single HTML file with a sidebar navigation would work well. Would you like recommendations for specific tools?
Converts the spec into a single self-contained HTML file — one file, no
build step, no dependencies to host. Here's what it produces and the one
precondition.
PRECONDITION — it refuses to render without this
Design-system onboarding must have run. The renderer reads your design
config via config_loader.py and inlines your 12 derived CSS custom
properties, so the output is on YOUR brand, not a default theme. If
onboarding hasn't run, it stops rather than emitting a generic-looking
document. Run onboarding first if it errors here.
WHAT THE OUTPUT HAS — built for a 60-page spec specifically
• Sticky table of contents with scrollspy — the current section stays
highlighted as you scroll, so you never lose your place in 60 pages
• Search filter — type to narrow the TOC to matching sections. On a
document this long, search is the difference between usable and not
• Code-copy buttons on every code block — one click, no selecting
• Your 12 brand tokens inlined as CSS variables, so it matches the
rest of your docs instead of looking like a converted file
WHY SINGLE-FILE MATTERS
No static-site generator, no folder of assets, no server. One HTML file
you can email, drop in a repo, or open offline. For a spec that gets
passed around, that's the whole point — it works everywhere without
setup.
HOW IT'S INVOKED
Either the markdown-html-orchestrator classifies your input as DOCUMENT
and routes it here automatically, or you call /cs:md-document directly.
For a 60-page spec, direct invocation is cleanest.
WHAT IT'S NOT
Not a live docs site with editing. It's a polished, read-optimized
snapshot — lightly interactive (TOC, search, copy), not an app.
Confirm onboarding has run and point me at the markdown — I'll generate
the single-file version.About this skill
name: md-document description: Use when Converts long-form markdown (specs, RFCs, reports, plans, explainers) into a single-file, lightly-interactive HTML document with sticky TOC, scrollspy, search filter, code-copy buttons, and design-...
Md Document
Converts long-form markdown (specs, RFCs, reports, plans, explainers) into a single-file, lightly-interactive HTML document with sticky TOC, scrollspy, search filter, code-copy buttons, and design-system-driven brand tokens. Triggers when the markdown-html-orchestrator classifies an input as DOCUMENT, or when invoked directly via /cs:md-document. Reads the design-system config via config_loader.py and inlines the user's 12 derived CSS custom properties; refuses to render if onboarding hasn't run. Single-file output — Google Fonts + Prism.js CDN are the only externals; no framework runtime, no build step. Use after orchestrator routing or after design-system onboarding is confirmed.
What you get
- Public GitHub repo (alirezarezvani/claude-skills)
- the md-document skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.
Customize your output
- Fork the repo and adapt the skill's instructions and references to your workflow.
Example output
Activates automatically when your request matches Md Document; chains with the other skills, agents, and commands in the collection.
Best for
Creators, builders, and teams using Claude Code.
SKILL.md preview
---
name: md-document
description: Use this skill when converting long-form markdown such as specs, RFCs, reports, or plans into a single-file interactive HTML document with navigation and search.
version: 1.0.0
category: Docs & Writing / Docs and Formatting
author: AgentVolt
license: proprietary
tags:
- docs-writing
- docs-and-formatting
---
# Md Document
Converts long-form markdown into a single-file HTML document with a sticky table of contents, scrollspy, search filtering, code-copy buttons, and brand-token styling.
## When to use
… (sign up to view the full skill)More content & writing skills
View all Content & Writing skills →Markdown HTML Orchestrator
Routes a markdown file to the right converter — long-form document, code review with diffs, or slide deck — and renders it as a single self-contained interactive HTML file.
Md Slides
Converts a markdown deck (slides separated by `
Md Review
Converts a markdown code review — fenced \`\`\`diff blocks plus severity callouts like \`[!BLOCKER]\`, \`[!MAJOR]\`, \`[!MINOR]\`, \`[!NIT]\` — into a single-file.
Design System
Captures the user's brand identity once via a 10-question onboarding wizard, validates contrast, derives CSS custom properties.