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.
Before & after
Same prompt, same agent — the only difference is the skill.
I can help you convert a markdown document into HTML. The simplest approach would be to paste the markdown into an HTML converter tool, which would generate basic HTML with headings, paragraphs, and lists. You could then manually add styling with CSS to make it look nicer. For a more polished result, you might want to add a table of contents, maybe some code syntax highlighting if there's code in the spec, and possibly interactive elements like collapsible sections. The challenge is deciding how much interactivity you want—are you looking for something simple and clean, or something that allows readers to customize the view? What does the specification document look like? How many sections, and are there code blocks or technical details that need highlighting?
MARKDOWN-TO-HTML ORCHESTRATOR: Project Specification
OUTPUT DELIVERY: Single self-contained HTML file (no external CDN, all CSS/JS embedded)
## INTERACTIVE FEATURES ADDED
• Table of Contents (auto-generated)
→ Click section link → Smooth scroll to anchor + visual highlight (0.5s glow)
→ Sticky sidebar on desktop, collapsible on mobile
• Collapsible Sections (Progressive disclosure)
→ Click [+] to expand subsection
→ Stored in browser localStorage (remembers user's expand/collapse state)
→ Speeds up reading (skim headings, expand what matters)
• Syntax Highlighting (if code blocks present)
→ Languages detected: Python, JavaScript, SQL, bash, etc.
→ Embedded highlight.js (no CDN dependency)
→ Copy-to-clipboard button per code block
• Dark/Light Theme Toggle
→ Button in top-right corner
→ Default: System preference (prefers-color-scheme)
→ Stored in localStorage (persists across visits)
• Search/Filter
→ "Find in spec" text input (top bar)
→ Highlights matching text across document
→ Shows match count: "3 matches for 'API'"
• Annotation Sidebars (Optional: Per-section notes)
→ Editor notes / legal flags / reviewer comments
→ Toggleable sidebar (not intrusive)
→ Color-coded: red (blocker), yellow (caution), blue (info)
## DOCUMENT STRUCTURE PRESERVED
Input markdown:
# Project Spec
## Overview
## Technical Design
### Database Schema
### API Endpoints
## Timeline
Output HTML:
• Auto-generated H1 structure
• Anchor IDs on all headings (# Project Spec → id="project-spec")
• Breadcrumb trail: Home > Project Spec > Technical Design > Database Schema
• Section numbering: 1. 1.1 1.1.1 etc.
## STYLING APPLIED
Typography:
• Serif headings (Crimson Text): H1 48px, H2 32px, H3 24px
• Sans-serif body (Inter): 16px, line-height 1.7
• Monospace code (JetBrains Mono): 13px, auto-wrap at 80 chars
• High contrast text (WCAG AA tested)
Layout:
• Max-width: 900px (reading comfort)
• Sidebar: 260px on desktop, hidden on mobile (hamburger icon)
• Padding: 48px horizontal, 64px vertical
• Print-friendly: Removes sidebar + TOC, formats for A4 (headings on new page)
Spacing:
• H2 margin-top: 64px (section separation)
• Paragraph margin-bottom: 18px
• Code block padding: 16px, border-radius 8px
• List items: 8px vertical margin
## EXPORT OPTIONS
• Download as HTML (single file, no dependencies)
• Share link (if hosted)
• Print to PDF (preserves styling, no page breaks mid-section)
• Export to Markdown (round-trip: HTML → MD, useful for edits)
## CONTENT EXAMPLE OUTPUT
Input markdown:
```markdown
# API Spec for User Service
## POST /users
Create a new user.
### Parameters
- `email` (string, required)
- `name` (string, required)
```
Output HTML structure:
<h1 id="api-spec-user-service">API Spec for User Service</h1>
<h2 id="post-users">POST /users</h2>
<p>Create a new user.</p>
<h3 id="parameters">Parameters</h3>
<ul>
<li><code>email</code> (string, required)</li>
<li><code>name</code> (string, required)</li>
</ul>
+ Sidebar link: [1.1.1 Parameters](#parameters)
+ Search: Click "email" in Parameters → highlights all mentions of "email" in doc
+ Print: Renders as 2 pages (section on new page)
## INTERACTIVITY DETAILS
Table of Contents behavior:
• Active link styling (gold border-left as user scrolls)
• Scrollspy: Detects which section user is reading, highlights TOC item
• Click TOC → Navigate to section + scroll smoothly
• Mobile: TOC becomes collapsible menu (hamburger icon)
Collapsible sections:
• Click [+] on subsection → Content slides down (0.3s animation)
• State persisted: User expands "Technical Design" → Refresh page → Still expanded
• Deep linking: Share link pointing to deep section (e.g., #technical-design) → That section auto-expands on load
## FILE SIZE & PERFORMANCE
• Single HTML file: ~400KB (entire doc + all CSS + JS embedded)
• Load time: <1s (no external requests)
• Compatibility: Chrome, Firefox, Safari, Edge (modern browsers only, ES6 JavaScript)
## BUNDLED RESOURCES
• highlight.js (syntax highlighting library, 150KB minified, embedded)
• No external fonts (uses system fonts: -apple-system, Segoe UI, etc.)
• No Google Analytics or trackers
• WCAG 2.1 Level AA compliant
## OUTPUT ARTIFACTS
Deliverable:
1. spec.html (single file, ready to email/share)
2. spec.pdf (print export, A4 formatted)
3. spec-meta.json (document metadata: word count, headings, revision date)
Next step: Open spec.html in browser, toggle dark mode, search for "API", click TOC to navigate.About this skill
name: markdown-html-orchestrator description: Use when Use when a user wants to convert any markdown file in their Claude project into a single-file, lightly-interactive HTML — long-form documents (specs, plans, RFCs, reports, explainers), code reviews...
Markdown Html Orchestrator
Use when a user wants to convert any markdown file in their Claude project into a single-file, lightly-interactive HTML — long-form documents (specs, plans, RFCs, reports, explainers), code reviews with diffs and severity-tagged annotations, or slide decks. Triggers on "convert this markdown to HTML", "make this an HTML file", "turn this into an interactive document", "render this report as HTML", "PR writeup as HTML", "slides from this markdown". Forks context to route to one of three converter sub-skills (md-document, md-review, md-slides) based on a deterministic doctype classifier, after the user has run the design-system onboarding once. Refuses if input is under 100 lines (per Shihipar — markdown still wins below the threshold) or design-system isn't onboarded. Distinct from Anthropic's official Playground plugin (which is interactive prompt-tuning controls with sliders/knobs/prompt-copy-back) and from marketing/landing/ (which is a landing-page generator).
What you get
- Public GitHub repo (alirezarezvani/claude-skills)
- the markdown-html-orchestrator 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 Markdown Html Orchestrator; chains with the other skills, agents, and commands in the collection.
Best for
Creators, builders, and teams using Claude Code.
SKILL.md preview
---
name: markdown-html-orchestrator
description: Use this skill when a user wants any markdown file in their project converted into a single-file, lightly interactive HTML document, code review, or slide deck.
version: 1.0.0
category: Docs & Writing / Docs and Formatting
author: AgentVolt
license: proprietary
tags:
- docs-writing
- docs-and-formatting
---
# 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.
## When to use
… (sign up to view the full skill)More content & writing skills
View all Content & Writing skills →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.
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.