Animated HTML Slide Deck Builder
Turn rough outlines into self-contained HTML slide decks with consistent layouts, purposeful animation, and presenter controls.
Before & after
Same prompt, same agent — the only difference is the skill.
I can help you build a slide deck about your product roadmap. First, I'll need you to give me an outline of what you want to cover - the key themes, timelines, and milestones you want to highlight. Do you want each quarter in its own slide, or themes across quarters? What's your audience - internal team, investors, customers? Should I include specific feature names or keep it high-level? Once you provide an outline with the main points for each slide, I can create a deck for you, though you may want to refine the design and add your company logo afterward.
ANIMATED HTML SLIDE DECK GENERATED ╔═════════════════════════════════════════╗ ║ Product Roadmap 2026 - 2027 ║ ║ Fully animated, 10 slides ║ ║ Ready to present or share ║ ╚═════════════════════════════════════════╝ SLIDE 1: Title + Logo Fade-in animation, fade-out on advance SLIDE 2: 2026 Completed (full-width chart) Q1: Auth v2, API stability Q2: Mobile app, Dashboard redesign Slide animation: left-to-right progress bar SLIDE 3: Q3 2026 - In Progress Bullet points with staggered fade-in: • AI-powered insights engine (50% complete) • Integrations marketplace (30% complete) • Enterprise SSO (70% complete) Progress overlay animates as you present SLIDE 4: Q4 2026 - Starting Soon Three parallel initiatives with icons Workflow automation, Team collaboration, Analytics overhaul Slide transitions with scale-up effect SLIDE 5: H1 2027 Roadmap Timeline visualization with milestone dots (Jan) AI Features, (Feb) Automation, (Mar) Integrations Hover tooltips reveal detail on click SLIDE 6: Feature Deep Dive - AI Insights 3-column layout: Feature | Timeline | Value Prop Emphasis text animates in on advance SLIDE 7: Customer Impact Bar chart showing expected efficiency gains X-axis: feature rollout | Y-axis: time saved Chart bars animate in with data labels SLIDE 8: Dependencies & Risks 2 columns: green checkmarks (mitigated) | orange warnings (monitoring) Risk mitigation animates with icon swaps SLIDE 9: Investment & Resource Allocation Pie chart: engineering split by initiative Donut chart animates with percentages SLIDE 10: Closing + Q&A Key takeaways list, fade-in by line CUSTOMIZATION APPLIED: Color: Brand navy + accent gold Font: Playfair Display (headers) + Inter (body) Transitions: 400ms easing, consistent spacing Fully responsive for projector + mobile preview DELIVERABLE: Single HTML file, no dependencies Works offline, shareable as link Print to PDF or present in any browser
About this skill
Your outline has the right points, but turning them into slides still means choosing layouts, cutting text, and fixing inconsistent formatting. This skill turns that outline into a complete animated HTML deck, with a coherent visual system and controls that work during a live presentation.
What it does
- Reshapes rough notes into a sequence of claims, supporting evidence, and a concrete closing ask.
- Selects from 12 slide formats, including comparisons, processes, timelines, metrics, and product walkthroughs.
- Applies one of three defined visual themes with consistent typography, spacing, and color.
- Adds restrained slide transitions and staged reveals without hiding essential information behind animation.
- Builds keyboard navigation, slide counts, direct slide links, speaker notes, reduced-motion behavior, and print styles.
- Checks content density, overflow risks, offline dependencies, and presentation behavior, reporting what was actually verified.
What you get
A self-contained HTML slide deck with embedded CSS and JavaScript, plus concise opening instructions and any unresolved factual or validation issues. Request a storyboard first when you want to approve the narrative before implementation.
Best for
Founders, marketers, product teams, and speakers who have rough material and want a browser-based presentation they can present, revise, and share without a slide-design application.
SKILL.md preview
---
name: animated-html-slide-deck-builder
description: >-
Turn rough outlines into self-contained animated HTML slide decks by building a claim-led narrative, choosing content-specific layouts, and implementing accessible presentation controls. Use when the user says "turn this outline into slides", "build an animated HTML deck", "make these notes presentation-ready", "my slides are walls of text", "my deck looks inconsistent", "add keyboard controls to this presentation", or "restructure this browser slide deck".
---
# Animated HTML Slide Deck Builder
… (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.