Build animation-rich HTML presentations from scratch or PowerPoint

A skill for creating zero-dependency, animation-rich HTML presentations that run entirely in the browser - single HTML files with inline CSS/JS, no npm or build tools - either from scratch or by converting a PowerPoint file. It runs through a phased workflow: Phase 0 detects the mode (new presentation, PPT conversion, or enhancing an existing HTML deck), Phase 1 does content discovery for new presentations, Phase 2 is style discovery (using small preview cards for candidate templates, loading the full design.md only after the user picks one - progressive disclosure), Phase 3 generates the presentation, Phase 4 handles PPT conversion, Phase 5 covers delivery, and Phase 6 optional share/export. Core principles: zero dependencies; show-don't-tell (visual previews over abstract choices, since people discover what they want by seeing it); distinctive design that avoids generic "AI slop"; progressive disclosure of style options; and a non-negotiable fixed 16:9 stage - every deck uses a 1920x1080 slide canvas scaled as a whole to the viewport, never reflowed for phone screens. Fixed-stage technical rules: a viewport wrapper fills the browser window and slides scale uniformly (letterboxing/pillarboxing allowed, re-layout not allowed); slide visibility is controlled by .active/.visible classes using visibility/opacity/pointer-events from viewport-base.css, never display:none/block (which a later .slide-content { display: flex } rule could silently override, showing every slide at once); clamp() is reserved for non-slide UI or fallback previews, never the main stage; CSS functions like clamp/min/max must never be directly negated (silently ignored) - use calc(-1 * clamp(...)) instead; and prefers-reduced-motion must be supported. Design aesthetic guidance pushes hard against generic AI output: avoid overused fonts (Inter, Roboto, Arial, system fonts) and cliched purple-gradient-on-white color schemes in favor of distinctive typography, a cohesive CSS-variable-driven color theme with dominant colors and sharp accents, high-impact staggered-reveal page-load animations (CSS-only for HTML, the Motion library for React) over scattered micro-interactions, and layered/gradient/geometric backgrounds instead of flat solid colors. Content density is chosen explicitly per deck: low-density/speaker-led (one idea per slide, large type, 1-3 bullets, more slides as needed) for talks and keynotes, versus high-density/reading-first (self-contained slides, structured grids/tables, 4-8 bullets or 4-6 cards) for reports and async review - baseline limits (no scrolling, no overflow, no overlapping panels) apply regardless, and content that exceeds the chosen density splits into more slides rather than shrinking to fit. Mode C (enhancing an existing deck) has its own modification rules: count existing elements against density limits before adding content, fit new images inside the 1920x1080 canvas or split into two slides, cap added text at 4-6 bullets per slide, and after any modification verify the stage is still 16:9, no text overflows its card, no panels overlap, and screenshots look correct at 1280x720.

Use it when building a presentation from scratch, converting a PPT/PPTX file to web, or creating slides for a talk or pitch - it's designed to help non-designers discover their aesthetic through visual exploration rather than abstract style questions.

Input is either a content brief for a new deck, an existing .pptx file to convert, or an existing HTML presentation to enhance, plus a density-mode choice (speaker-led or reading-first). Output is a single, zero-dependency HTML file with inline CSS/JS implementing a fixed 16:9 stage, distinctive typography/color/motion, and slide count/density matching the chosen mode.

Pure HTML/CSS/JS with no build tooling - requires reading and including the full contents of viewport-base.css in every generated presentation for correct fixed-stage scaling and slide-visibility behavior.

People building presentations - talks, pitches, reports - who want a distinctive, animation-rich HTML deck instead of generic AI-slop slides or a locked-down PowerPoint file, including converting existing PowerPoint decks to a portable, browser-native format.