Back to marketplace

Markdown to Single-File HTML (Docs, Reviews, Slides)

Turns markdown into one offline-safe HTML file laid out as a document, diff review, or slide deck, with a fidelity report.

Development / Documentationmarkdownhtml
by AgentVoltv1.0.0
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Convert this project specification into an interactive HTML document”
Beforegeneric AI agent
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?
Afterwith Markdown to Single-File HTML (Docs, Reviews, Slides)
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

Your markdown spec, PR review, or talk outline needs to go to someone as one file. The HTML converters you've tried pull fonts and highlight.js from a CDN, drop tables or footnotes without telling you, and render a diff review as a wall of prose. This skill reads the file, decides whether it is a document, a code review, or a deck, and produces one HTML file that works offline. It then reports any content it could not carry over.

What it does

  • Classifies the input with explicit, ordered rules (diff fences, slide separators, severity language) and tells you which rule fired
  • Long-form documents get a sticky TOC, scrollspy that switches at the right moment, a section search filter, copy buttons on code blocks, and a print stylesheet
  • Code reviews keep the real diff structure, with old and new line numbers computed from hunk headers. Each comment is anchored to its line and tagged with a severity, and you can filter by severity and jump between blockers
  • Slide decks run on a fixed 16:9 stage that scales to the screen, with keyboard, click, and hash-link navigation, speaker notes, and one-slide-per-page PDF export
  • Uses no CDNs: code is escaped correctly, images are inlined when possible, and Mermaid and math blocks are handled without breaking offline use
  • Writes a fidelity report comparing source and output counts (headings, code blocks, tables, diff lines, annotations) and flags mismatched diff stats or comments that point at lines outside the diff

What you get

One self-contained .html file plus a short report: the detected type, your stated assumptions, content counts, anything that could not render natively, and up to 3 questions.

Best for

Engineers, tech leads, and PMs who write specs, RFCs, PR reviews, or talk outlines in markdown and need to share them as a single polished file that opens anywhere.

SKILL.md preview

SKILL.md
---
name: markdown-to-single-file-html

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

More development skills

View all Development skills →

CodeTour Walkthrough File Builder

Writes a valid CodeTour .tour file for your repo: persona-targeted steps anchored to verified file paths and line numbers.

Development

Code-Accurate Docs: Docstrings, JSDoc, OpenAPI Specs

Docstrings, JSDoc/TSDoc, OpenAPI specs, and quickstart guides written from your real code, covering error paths and edge cases.

Development

Release Changelog from Commits and PRs

Turns a commit range or merged PRs into a release changelog with breaking changes, migration steps, and user-facing wording.

Development

Markdown to HTML Slide Deck Converter

Turns a markdown talk split by --- into one offline HTML deck with clean slide breaks, hidden speaker notes, and a slide overflow check.

Development