html-slide-deck

Convert structured source material into a browser-based HTML slide deck.

Updated Apr 30, 2026
One-click install
npx skills add https://github.com/koseki2580/skills --skill html-slide-deck
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-slide-deck
Source: https://github.com/koseki2580/skills/tree/main/skills/html-slide-deck
Command: npx skills add https://github.com/koseki2580/skills --skill html-slide-deck

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It solves the problem of turning scattered research, PRDs, reports, or notes into a coherent, audience-ready slide narrative that’s easy to review and present in a browser.

Core Features & Use Cases

  • Message-first slide construction: Builds decks by extracting the argument and turning it into one dominant message per slide, rather than mirroring Markdown headings.
  • Configurable deck build pipeline: Uses a deck.config.json contract (title/theme/delivery/language) and generates deck.html from a shared deck shell.
  • Rich visual slide content: Supports charts, Mermaid diagrams, KaTeX math, syntax-highlighted code, SVG diagrams, and presenter notes/speaker notes.
  • Accessibility + safety guardrails: Enforces readable layouts, chart takeaways, no untrusted raw HTML by default, and safer media/library usage.
  • Presentation-ready UX: Provides navigation controls, themes (light/dark), print/PDF layout, captions/transcripts (when used via the shell), and optional presenter tools.

Quick Start

Use the HTML slide deck skill to generate a browser-ready deck from your provided structured source material and validate that the resulting deck.html has correct navigation, readable layout, and no placeholder tokens.

Frequently Asked Questions about html-slide-deck

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

FAQPage Schema
How do I convert Markdown notes into a browser-based HTML slide deck?

This Skill converts structured Markdown notes into a browser-based HTML slide deck by extracting the core narrative and generating a presentable deck.html file. It builds one dominant message per slide rather than simply mirroring Markdown headings.

Can I use Mermaid diagrams and Chart.js in my HTML presentation slides?

Yes, you can include Mermaid diagrams and charts in your HTML presentation. The Skill supports rich visual slide content by rendering charts, Mermaid diagrams, KaTeX math, syntax-highlighted code, and SVG diagrams directly within the generated browser deck.

What is the best way to turn a PRD or research report into shareable presentation slides?

The best way to turn a PRD or research report into shareable presentation slides is using a message-first construction approach. This Skill transforms scattered source material into a coherent, audience-ready HTML slide narrative that is easy to review in a browser.

Does this HTML slide deck generator include accessibility and safety guardrails?

Yes, the HTML slide deck generator includes accessibility and safety guardrails. It enforces readable layouts, requires chart takeaways, restricts untrusted raw HTML by default, and verifies rendering, navigation, and accessibility constraints within the final deck.

Do I need a deck configuration contract to build HTML slides?

Yes, you need a deck configuration contract to build HTML slides. The Skill uses a deck.config.json file to define title, theme, delivery, and language settings, which drives the shared deck shell build pipeline to generate the final output.

Are speaker notes and presenter tools available in the generated HTML slide deck?

Yes, speaker notes and presenter tools are available in the generated HTML slide deck. The presentation-ready UX provides navigation controls, light and dark themes, print and PDF layouts, captions, transcripts, and optional presenter tools for your browser deck.