Build Editable HTML Presentations With Animation

Generates single-file HTML presentations that stay editable in the browser after creation. Users can drag objects, reorder slides, edit text with formatting, undo changes, and export clean HTML without leaving the deck. This skill addresses the workflow where presentation output must remain malleable for feedback iteration, client revisions, or post-presentation refinements.

You answer a guided discovery phase (purpose, length, content, style direction, images) and choose a visual preset from 46 curated options via preview or direct selection. The skill generates a single self-contained HTML file with an embedded editor: press E to enter edit mode, drag objects with alignment snapping, use Ctrl+Click for multi-select, add text/image/video elements, manage slides in a Pages sidebar, undo/redo with full history, and Ctrl+S to persist to localStorage. Export strips temporary edit state and produces a clean standalone HTML file.

Generated presentations remain fully editable and iterable in the browser, enabling real-time feedback cycles and client revisions without re-running generation or losing content structure.

Requires Node.js 18+ for installation via npx skills add. PPT extraction needs Python + python-pptx (pip install python-pptx). PDF extraction needs Python + PyMuPDF (pip install pymupdf); scanned PDFs without embedded text need --raster-if-empty flag or external OCR. Editor runtime uses localStorage for persistence and ContentEditable RTE with inline toolbar. Modern browser required (Chromium, Safari, Firefox). Every generated deck must include viewport-base.css in full. These are mandatory responsive base styles that ensure viewport-fitting behavior.

Generated presentations are heavier than read-only slides (includes full editor runtime). If file size or bundle weight is critical, use the parent skill (frontend-slides) instead. Mobile editing is supported but optimized for desktop presentation and review. Pages sidebar and toolbar reflow on phone. Slot-editable ported templates preserve native layout by design. If you need complete freeform repositioning of every element, use unlocked-layout mode or stick to custom-designed presets.