slide-generator

Generate HTML presentation slides from Markdown with Chart.js and thumbnails.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/tomohiro-owada/slide-generator-skill --skill slide-generator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: slide-generator
Source: https://github.com/tomohiro-owada/slide-generator-skill/tree/main/.claude/skills/slide-generator
Command: npx skills add https://github.com/tomohiro-owada/slide-generator-skill --skill slide-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) components.

What problem does it solve?

This Skill automates the end-to-end creation of presentation slides from long-form content. It analyzes user input, proposes an optimal slide structure, renders HTML slides, generates thumbnails, and prepares for deployment, saving hours of manual design work.

Core Features & Use Cases

  • End-to-end automation: Markdown analysis → layout selection → HTML generation → thumbnail creation → deployment.
  • Rich layouts & charts: Supports 16 layouts including bullet, two-column, image-center, chart slides, diff slides, and more, plus Chart.js integration for visuals.
  • Interactive and scalable: Works with interactive content and large documents, ideal for product pitches, technical talks, and company updates.
  • Use Case: Create a 12-slide product launch deck from a long specification document with consistent styling and auto-generated thumbnails.

Quick Start

Provide a Markdown file (e.g., slides.md) describing your slides. Ask the skill to analyze it and generate the HTML slides, thumbnails, and deployment-ready assets.

Frequently Asked Questions about slide-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Markdown to HTML slides automatically?

Markdown-to-HTML slide generation analyzes your Markdown content, selects optimal layouts, and renders interactive HTML slides with styling and code highlighting. This Skill automates the entire workflow from text input to deployment-ready assets, eliminating manual design work.

Can I use Chart.js to add visualizations to my presentation slides?

Yes. This Skill integrates Chart.js rendering directly into slide generation, letting you embed data visualizations in slides created from Markdown. Charts are rendered during HTML generation and included in thumbnail creation.

What layout options are available for Markdown slides?

Sixteen layouts are supported, including bullet slides, two-column layouts, image-center, chart slides, and diff slides. Layout selection is driven by frontmatter, allowing per-slide customization while maintaining consistent styling across your presentation.

How do I generate thumbnails and deploy slides from Markdown?

After HTML generation, this Skill automatically creates thumbnails and prepares deployment-ready assets. Integration with Surge enables direct deployment, completing the end-to-end automation from Markdown content to live presentation.

Can I create presentation decks from large Markdown documents?

Yes. The Skill scales to 5–20 slide documents with interactive content and auto-layout optimization. It's designed for workflows like converting specification documents or long-form content into structured, multi-slide presentations.

Does this work for technical talks and product pitches?

Yes. The Skill supports code highlighting, responsive design, and rich visual layouts suited to technical content and product presentations. Resource management and consistent styling across slides make it ideal for professional decks.