Part of Build Editable HTML Presentations With Animation
Content Blueprint
Build Editable HTML Presentations With Animation
A single-file HTML skill for generating animated presentations with full in-browser editing, 46 curated visual styles, and zero dependencies.
What problem does this solve?
Creates single-file HTML presentations that users can edit directly in the browser after generation. Objects can be dragged, text edited with formatting, slides reordered, and changes persisted to localStorage before export. This replaces the workflow where presentation tooling forces a binary choice between generation-only and heavily stateful editing environments.
How does it work?
- Answer discovery questions (purpose, length, content outline, style preference). 2. Choose a visual preset from 46 curated options via preview or direct selection. 3. Receive a self-contained HTML file with embedded editor. 4. Press E to enter edit mode, drag objects with snap-to-grid, add text/image/video, manage slides in Pages sidebar, undo/redo all actions, and Ctrl+S to save. 5. Export produces clean HTML without temporary edit state. Output: a fully editable, shareable, single-file HTML presentation.
Included Skills
No skills in this group
What's required to run this?
Requires Node.js 18+ for skill installation via npx skills add because the skill system itself uses Node tooling. Generated presentations are zero-dependency HTML files and run in any modern browser (Chrome, Safari, Firefox). Optional: Python 3 plus python-pptx for PPT extraction, PyMuPDF for PDF extraction (scanned PDFs need --raster-if-empty or external OCR). Editor runtime persists to localStorage and uses native ContentEditable for text formatting with inline toolbar. Include viewport-base.css in every generated deck as these are mandatory responsive styles that ensure slides fit 100vh without scrolling.
Key Features
46 Curated Visual Presets
Dark themes (Bold Signal, Neon Cyber), light themes (Notebook Tabs, Swiss Modern), specialty aesthetics (Terminal Green, Paper & Ink), and 34 real-template ports from beautiful-html-templates with locked-layout slot editing.
Full Editor Runtime
Drag, corner/edge resize, snap alignment, multi-select (Ctrl+Click), text RTE with font/size/color drawers, undo/redo, Pages sidebar for thumbnails and reordering, add elements (text/image/video).
PPT & PDF Import
Extract .pptx or .pdf to intermediate JSON (text, images, speaker notes); apply same style discovery and generate editable HTML with all assets preserved.
Viewport-Fit & Responsive
Every slide uses mandatory responsive CSS (clamp functions, viewport-relative sizes). Fits exactly within 100vh with no internal scrolling. Optional mobile adaptation for portrait and landscape.
Zero Build Dependencies
Single self-contained HTML with inline CSS/JS. No npm, no build step, no frameworks. Generated decks remain portable and usable for years.
About This Blueprint
- Industry
- Technology
More Blueprints to explore
Business Automation & Productivity Workflow
Reduce hours lost to repetitive admin without adding a complicated stack. Prioritized, tested workflows automate routine research, client communication, project tracking, and website tasks while keeping people in control of important decisions.
Business Technology & Digital Solutions Workflow
Avoid costly, fragmented digital projects with a plan that connects business goals to practical tools, implementation steps, and measurable results. It also flags performance, security, accessibility, and SEO checks before launch.
ICP-Filtered Outreach Lists from G2 Buyer Intent
Stop wasting rep time on weak intent signals and mismatched accounts. The workflow ranks ICP-fit buyers by readiness, finds the right contact, and supplies tailored outreach angles for the strongest opportunities.
ClaudeG2 Buyer Intent (G2 MCP Server)ZoomInfo (MCP)+3 moreIshani D.
Account Manager at G2