markdown-slides

uriklar's avatarfrom uriklar

Create presentation slides from markdown with an iterative workflow. Use when the user wants to:(1) Create a slide deck or presentation in markdown format(2) Build slides iteratively, one at a time(3) Generate HTML output from markdown slidesWorkflow: Create skeleton → iterate over each slide → user says "commit!" to save.Outputs CommonMark-compliant markdown that converts to styled HTML.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 9, 2026
[Visual Content Workflows]

When & Why to Use This Skill

The Markdown Slides skill streamlines the creation of professional presentation decks through a structured, iterative Markdown-based workflow. It enables users to transform raw ideas into styled HTML presentations, featuring a phase-based approach that includes skeleton outlining, slide-by-slide refinement, and final compilation with built-in support for code blocks, tables, and custom CSS.

Use Cases

  • Rapidly drafting technical presentations by converting Markdown outlines into structured, styled slide decks.
  • Iteratively building and refining presentation content with an AI assistant to ensure logical flow and concise messaging.
  • Generating web-ready HTML presentations from Markdown notes, complete with syntax highlighting for code-heavy developer talks.
  • Creating consistent, branded slide decks using predefined CSS templates and a standardized iterative commit process.
namemarkdown-slides
description|
WorkflowCreate skeleton → iterate over each slide → user says "commit!" to save.

Markdown Slides

Create presentation slides using markdown with HoneyBook styling.

Workflow

Phase 1: Skeleton

Ask the user for:

  • Presentation title and subtitle
  • Target audience
  • Number of slides (approximate)
  • Key topics to cover

Then create a skeleton outline:

# Presentation Title

Subtitle or description

---

## Slide 1: Topic Name
[placeholder]

---

## Slide 2: Next Topic
[placeholder]

Present the skeleton for approval before proceeding.

Phase 2: Iterate

Work through each slide one at a time:

  1. Show the current slide number and topic
  2. Propose content for that slide
  3. Wait for user feedback (approve, revise, or skip)
  4. Move to next slide

Keep slides focused: one main idea per slide. Use:

  • Short bullet points (3-5 max)
  • Code blocks with language hints for syntax highlighting
  • Tables for comparisons
  • Blockquotes for callouts

Phase 3: Commit

When user says "commit!":

  1. Compile all slides into a single markdown file
  2. Write to the specified path (ask if not provided)
  3. Copy assets/honeybook-doc.css to the output directory
  4. Offer to run the build script

Slide Separators

Use --- (thematic break) between slides. This renders as a visual divider and triggers page breaks in print.

Build Command

node scripts/build.js input.md output.html

Requires: npm install markdown-it highlight.js

The CSS file must be in the same directory as the output HTML (or adjust the path in build.js).

Markdown Format

Follow CommonMark spec. See references/commonmark-reference.md for syntax details.

Key patterns for slides:

  • ## Slide Title for each slide heading
  • --- between slides
  • Fenced code blocks with language: ```typescript
  • Tables for side-by-side comparisons
  • > blockquote for important callouts

Example Slide

## Component Architecture

Choosing the right pattern depends on your use case:

| Pattern | Best For | Complexity |
|---------|----------|------------|
| Simple | Static display | Low |
| Compound | Related controls | Medium |
| Headless | Full customization | High |

> Start simple, refactor when needed.

---
markdown-slides – AI Agent Skills | Claude Skills