html-presentation_skill

Overview

This skill generates polished HTML-based presentations using reveal.js or similar frameworks. It converts markdown or structured input into responsive, interactive slide decks with themes, code highlighting, and speaker notes. The output is ready to view in a browser or export to PDF.

How this skill works

Provide slide content, title, and optional settings (theme, transition, code theme) and the skill produces a presentation folder with index.html and assets. It integrates reveal.js, highlight.js, and optional Chart/D3 hooks for data visualization. The generated HTML supports speaker notes, fragments, vertical slides, and keyboard navigation.

When to use it

• Creating a web-first slide deck from markdown or structured prompts
• Sharing interactive technical talks with code samples and syntax highlighting
• Producing printable PDFs from a live HTML presentation
• Embedding charts or interactive visualizations in slides
• Rapidly iterating presentation themes and layouts for web demos

Best practices

• Keep one main idea per slide to maintain clarity
• Use fragments for stepwise reveals rather than crowding a single slide
• Choose contrast-appropriate themes and maintain minimum 24px font size
• Limit heavy animations and large images to preserve performance
• Verify highlight.js language tags for accurate code styling

Example use cases

• Technical talk: generate slides with C++ and C# code examples and syntax highlighting
• Data report: build a 5-slide deck integrating Chart.js charts and export to PDF
• Workshop: create two-column slides for exercises and solutions
• Marketing demo: produce an image-heavy deck using a light theme for client review
• Lecture notes: add speaker notes and vertical subsections for topic breakdowns