frontend-slides

Convert PowerPoint files or slide content into single-file HTML presentations.

1|Updated Apr 7, 2026
One-click install
npx skills add https://github.com/riftzen-bit/gemini-setup --skill frontend-slides-riftzen-bit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/riftzen-bit/gemini-setup/tree/main/skills/frontend-slides
Command: npx skills add https://github.com/riftzen-bit/gemini-setup --skill frontend-slides-riftzen-bit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts talk drafts, existing HTML decks, or PPT/PPTX files into production-quality, viewport-safe HTML presentations so presenters and non-designers can produce distinctive, accessible slides without wrestling with design or cross-platform tooling.

Core Features & Use Cases

  • Zero-dependency single-file output: produces a self-contained presentation.html with inline CSS and JS by default for easy sharing and local playback.
  • PPT/PPTX conversion workflow: extract text, images, and notes (prefer python-pptx) and map content into semantic slide sections while preserving order and assets.
  • Visual previews & style exploration: generate three single-slide visual previews to help users pick a mood/preset before full build.
  • Viewport-fit enforcement & validation: mandatory viewport-safe CSS base, clamp() typography, split slides when density limits are exceeded, and recommended cross-size validation.
  • Accessibility and navigation: semantic structure, keyboard/touch/wheel navigation, reduced-motion support, and Intersection Observer-driven reveal animations.
  • Use Case: Convert a speaker's rough notes and PPTX into a branded, navigable HTML deck that works offline and passes viewport validation.

Quick Start

Use the frontend-slides skill to convert my presentation draft or PPTX into a single, self-contained presentation.html that fits one viewport per slide and includes keyboard navigation.

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 PPTX file to HTML presentation slides?

Viewport-safe HTML presentations use clamp() typography and a mandatory CSS base to fit one viewport per slide, preventing overflow. The skill automatically splits slides when density limits are exceeded and recommends cross-size validation to ensure content stays within screen bounds.

Can I create HTML slides with keyboard navigation and reduced-motion support?

Yes, HTML slides produced include semantic structure, keyboard navigation, touch and wheel support, and reduced-motion support. Intersection Observer-driven reveal animations are also applied, ensuring accessible presentations that work across various input methods and accessibility preferences.

What is the best way to share an HTML presentation offline without dependencies?

No external dependencies are required to use the skill for creating HTML slides. The skill produces zero-dependency single-file output with inline CSS and JS, though python-pptx is optionally preferred for extracting content during PPT or PPTX file conversions.

How do I preview different slide styles before building the full HTML deck?

To preview different slide styles before building the full HTML deck, the skill generates three single-slide visual previews. These previews help you pick a mood or preset that fits your presentation needs before committing to the full viewport-safe HTML build.