frontend-slides

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

Updated Jul 29, 2026
One-click install
npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill frontend-slides-maicongambini
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/MaiconGambini/opencode-harness-guide/tree/main/skills/frontend-slides
Command: npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill frontend-slides-maicongambini

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python-pptx.

What problem does it solve? Creating visually distinctive slide decks usually requires design skills or heavy tools like PowerPoint and Keynote. This Skill produces self-contained, animation-rich HTML presentations that run entirely in the browser, and it can also convert existing PPT/PPTX files into web-based slides. ## Core Features & Use Cases - Guided Style Discovery: Generates three visual style previews as mini HTML files so users pick an aesthetic by seeing it, not describing it. - Zero-Dependency Output: Produces single HTML files with inline CSS/JS, keyboard/swipe navigation, scroll-triggered animations, and accessibility support. - PPT Conversion: Extracts text, images, and speaker notes from .ppt/.pptx files using python-pptx, then rebuilds them as styled web presentations. - Use Case: A founder needs a pitch deck for investors. The Skill asks about purpose and mood, shows three style previews (e.g., Neon Cyber, Dark Executive), then generates a complete animated HTML deck ready to open in any browser. ## Quick Start Ask the assistant to create an animated HTML presentation about your topic, or to convert your PowerPoint file into a web presentation.

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?

Provide the .ppt or .pptx file and the Skill extracts text, images, and speaker notes using python-pptx, saving images to an assets folder. You then pick a visual style, and it generates a self-contained HTML presentation preserving slide order and content.

How do I create animated slides in HTML without JavaScript libraries?

Use CSS transitions triggered by an Intersection Observer that adds a visible class when slides enter the viewport. Combined with scroll-snap and a small SlidePresentation class for keyboard and touch navigation, no external libraries are required.

Do the generated HTML presentations need npm or a build step?

No. Each presentation is a single self-contained HTML file with inline CSS and JavaScript. Fonts load from Fontshare or Google Fonts via a link tag, and the file opens directly in any modern browser.

Do HTML slide decks work on mobile devices?

Yes, the generated presentations include responsive breakpoints that adjust spacing and disable heavy effects below 768px. Touch and swipe navigation are supported, and reduced-motion preferences are respected via media queries.

Why are scroll-triggered animations not firing in my HTML slides?

Animations fail when the Intersection Observer is not running or the visible class is not being added to slides. Also verify scroll-snap-type is set on the html element and each slide has scroll-snap-align: start.