Interactive Single-File HTML Slide Decks
Get an offline HTML deck with polished slides, progressive reveals, and keyboard, click, and swipe navigation.
Before & after
Same prompt, same agent — the only difference is the skill.
You could build a presentation in a few ways. PowerPoint is traditional but a bit heavy. You could also create something as a web page—that would be more flexible and you could add animations more easily. HTML is basically just text with markup, so you can write the content and then style it with CSS. JavaScript can handle the navigation, so you could click or swipe between slides. You'd probably want to include some basic reveal animations so things appear as you talk. A single file would be easier to share than having PowerPoint with linked assets.
I'll generate a self-contained HTML presentation you can open directly in any browser, with smooth navigation and reveal animations. DELIVERABLE Single .html file (no dependencies, no external CDN, fully works offline). Open it in Firefox, Chrome, Safari—it just works. STRUCTURE Title slide + customizable slide count (you specify topic and number of slides). Each slide gets: • Main heading • Bullet points or full-text body • Optional hero image or accent color • Progressive bullet reveal (bullets appear one-by-one as you advance) NAVIGATION Keyboard: left/right arrows or spacebar to advance Mouse: click next/prev buttons Touch: swipe left/right on phone/tablet ANIMATIONS Slide transitions: fade-in or slide-left (choose one style) Bullet reveal: each point animates in from the left as you click/advance Heading entrance: slight scale-up as the slide appears Smooth easing on all transforms (no jarring jumps) CUSTOMIZATION INPUTS Topic (e.g. "Q3 product roadmap") Slide count (e.g. 12) Animation style (fade or slide) Color scheme (light or dark) Reveal timing (bullets per click or auto-advance every 5 seconds) SAMPLE OUTPUT A production-ready deck you can present from immediately, export as PDF if needed, or share via email/link.
About this skill
Your presentation should open from one file and work when you start presenting. This skill turns a brief or outline into a polished HTML deck with progressive reveals, predictable navigation, and layouts that hold up beyond the author's screen.
What it does
- Shapes a brief or outline into slides with one clear takeaway each.
- Builds one offline HTML file with embedded CSS, JavaScript, and graphics.
- Keeps keyboard, button, and swipe controls synchronized through one navigation state.
- Defines forward and backward behavior for every bullet reveal and slide boundary.
- Adds readable layouts, reduced-motion support, accessible controls, and a print view showing every slide and bullet.
- Checks navigation logic and identifies overflow risks, distinguishing code inspection from browser testing.
What you get
A complete HTML presentation you can save and open directly in a browser. Delivery includes a short control guide and an honest validation summary, with no build step or external runtime dependencies.
Best for
Presenters, educators, founders, and teams who want a portable browser presentation built from talking points, an outline, or existing slide content.
SKILL.md preview
---
name: interactive-single-file-html-slide-decks
description: Build a polished, offline HTML/CSS/JS presentation with embedded assets, progressive reveals, and keyboard, button, and swipe navigation driven by one state machine. Use when the user says "build an HTML presentation", "turn this outline into slides", "make a deck I can open offline", "reveal bullets one at a time", "my slides skip when I swipe", "the back button loses my place", or "make this presentation work on mobile".
---
# Interactive Single-File HTML Slide Decks
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.