Make Animated HTML Slides
Turn notes, a topic or a PowerPoint file into one self-contained HTML deck with real motion, a distinctive look, and every slide sized to fit the screen.
Install the skill or give me an instruction how to install it - frontend-slides from https://github.com/affaan-m/ECC Free Open source Works in Claude, Cursor, Codex & more
What it does
Give it a topic, rough notes, finished copy or a .pptx file, and get back a single HTML presentation that runs from a local file in any browser. No build step and no dependencies: the CSS and JavaScript live inline, with keyboard, touch and mouse wheel navigation, a progress indicator and reveal animations as you move between slides.
Instead of asking you to describe a style, it builds three single-slide previews and lets you pick one or mix elements from them. The previews draw on 12 presets, from Bold Signal and Swiss Modern to Terminal Green and Paper & Ink, matched to the feeling you want the room to have. PowerPoint files are unpacked with python-pptx so slide order, speaker notes and images carry over.
Viewport fit is a hard rule. Every slide is locked to one screen with no internal scrolling, type scales with the window, content density is capped, and overflowing slides get split rather than shrunk. The finished deck is checked at five sizes, from 1920x1080 down to a 375x667 phone, and respects reduced-motion settings.
When to use it
- You have a talk coming up and only notes so far
Paste the notes, pick a look from three live previews, and get a finished deck that opens straight in the browser with motion and navigation built in.
- You need to move an old PowerPoint to the web
It extracts the text, images and speaker notes from the .pptx in order, then rebuilds the content as a styled HTML deck you can host or send as one file.
- Your slides look like every other template
It steers away from purple gradients and Inter on white, picking from 12 presets with their own fonts, palettes and signature details.
- Your existing HTML deck breaks on small screens
It reworks the layout so each slide fits one viewport with scaling type, splitting crowded slides instead of shrinking text past readable sizes.
FAQ
Do I need to know what style I want?
No. Frontend Slides asks what feeling the deck should create, then generates three single-slide previews for you to compare. You pick one or tell it which parts to combine, and it builds the full deck in that style.
What do I get at the end?
One HTML file, such as presentation.html, with inline CSS and JavaScript. It runs from your disk in a browser, supports keyboard, swipe and wheel navigation, and comes with a summary of the preset used, the slide count and where to change the theme.
Can it convert my PowerPoint file?
Yes. Frontend Slides reads .ppt and .pptx files with python-pptx, keeping slide order, speaker notes and images. If python-pptx isn't installed, it asks whether to install it or use a manual export instead.
Can I export the deck to PDF?
Yes. The skill includes an export script that serves the deck locally, screenshots each slide at 1920x1080 with Playwright and combines them into a PDF. Colors, fonts and layout are kept; animations are not.