html-slide-deck

Generate self-contained HTML slide decks with inline CSS and JavaScript.

Updated May 16, 2026
One-click install
npx skills add https://github.com/jaredcroxton/hermes-mirror --skill html-slide-deck-jaredcroxton
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-slide-deck
Source: https://github.com/jaredcroxton/hermes-mirror/tree/main/agents/skills/creative/html-slide-deck
Command: npx skills add https://github.com/jaredcroxton/hermes-mirror --skill html-slide-deck-jaredcroxton

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It eliminates the time-consuming effort of designing and hand-coding presentations by producing a polished, branded, single-file HTML slide deck that reliably renders offline without clipping or broken navigation.

Core Features & Use Cases

  • Premium single-file delivery: Generates one production-ready self-contained .html file with inline CSS, JavaScript, SVG icons, and embedded media as base64.
  • Branded layout and motion system: Applies clean spacing, strong typography discipline, and smooth transitions with responsive rules tailored to the target viewport.
  • Slide-by-slide build workflow: Prescribes a fast editing path (layout first, media last) plus verification mode and a final quality gate to prevent overflow, console errors, and placeholder copy.

Quick Start

Build an offline premium HTML slide deck for our pitch with the provided brand colors, the slide titles and messages for each slide, and the target viewport of 1920x1080.

Frequently Asked Questions about html-slide-deck

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

FAQPage Schema
How do I create a single-file HTML presentation that works offline?

A single-file HTML presentation bundles all CSS, JavaScript, and media into one .html file. This offline presentation approach embeds media as base64 and includes keyboard and touch navigation, ensuring it renders reliably in any browser without external dependencies.

What is the best way to build a pitch deck with smooth animations without using online presentation software?

The best way to build a pitch deck offline is generating a single-file HTML slide deck. This method applies a branded layout and motion system with smooth transitions, responsive rules, and strong typography discipline, avoiding the clipping or broken navigation common in online tools.

Can I embed images and SVG icons directly into an HTML slide deck file?

Yes, you can embed images and SVG icons directly into an HTML slide deck. The single-file output rule requires all media to be embedded as base64, keeping SVG icons and visual assets inline so the presentation remains fully self-contained and portable for offline delivery.

How do I prevent content overflow when designing responsive HTML slides for a 1920x1080 viewport?

To prevent content overflow in responsive HTML slides, apply clean spacing and responsive rules tailored to your target viewport. A final quality gate and render verification loop check the output to catch console errors, placeholder copy, and layout clipping before delivery.

Does a self-contained HTML slide deck support keyboard and touch navigation for mobile demos?

Yes, a self-contained HTML slide deck supports both keyboard and touch navigation. Required navigation controls are built directly into the inline JavaScript, allowing users to present product demos seamlessly across desktop browsers and mobile touch devices offline.

What are the limitations of using base64 embedding for media in offline HTML presentations?

Base64 embedding in offline HTML presentations increases the overall .html file size because binary media is converted to text. While this ensures dependable offline rendering without external files, large videos or high-resolution images can bloat the file and slow initial browser parsing.