frontend-slides

Generate zero-dependency animated HTML presentations from scratch or PowerPoint files.

1|Updated Aug 17, 2025
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill frontend-slides-ratnesh-maurya
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/frontend-slides
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill frontend-slides-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python-pptx, Pillow, and includes scripts (resource) components.

What problem does it solve? Creating visually distinctive, animation-rich presentations typically requires design tools or heavy frameworks. This Skill produces single-file HTML slide decks that run entirely in the browser, with strict viewport fitting so no slide ever scrolls or overflows. ## Core Features & Use Cases - New Presentation Generation: Guided workflow covering content discovery, mood-based style selection with three live HTML previews, and full deck generation using 12 curated design presets. - PowerPoint Conversion: Extracts text, images, and speaker notes from .pptx files via a Python script and rebuilds them as styled web presentations. - Enhancement Mode: Modifies existing HTML presentations while enforcing density limits and viewport-fitting rules, automatically splitting overflowing slides. - Use Case: Convert a 20-slide investor pitch deck from PPTX into a self-contained HTML file with keyboard navigation, scroll snapping, staggered reveal animations, and optional in-browser text editing. ## Quick Start Ask the assistant to create a presentation about your topic, or provide a .pptx file and request conversion to an animated HTML slide deck.

Frequently Asked Questions about frontend-slides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a PowerPoint file to an HTML presentation?

Run the included extract-pptx.py script with python-pptx installed to pull text, images, and speaker notes from the .pptx file into JSON. The extracted content is then rebuilt into a styled single-file HTML deck preserving slide order and notes as HTML comments.

How do I create an animated slide deck that runs in the browser?

Provide your topic or content and choose a visual style from curated presets or generated previews. The output is one self-contained HTML file with inline CSS/JS, scroll snapping, keyboard navigation, and staggered reveal animations—no build tools required.

Do HTML presentations require external dependencies or npm packages?

No. Each presentation is a single HTML file with all CSS and JavaScript inline. Fonts load from Google Fonts or Fontshare via CDN links, and images are referenced from a local assets folder or embedded as base64.

Why does slide content overflow the viewport in HTML presentations?

Overflow happens when fixed pixel sizes are used or content exceeds per-slide density limits. The skill enforces clamp() for all typography, overflow: hidden on slides, image max-height of 50vh, and splits dense content into multiple slides.

Can I edit presentation text directly in the browser?

Yes, if you opt in during setup. The generated file includes an edit mode toggled by pressing E or hovering the top-left corner, with contenteditable text, auto-save to localStorage, and file export.