frontend-slides

Generate zero-dependency, animation-rich HTML presentations from scratch or PowerPoint files.

Updated Mar 22, 2026
One-click install
npx skills add https://github.com/diazMelgarejo/orama-system --skill frontend-slides-diazmelgarejo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/diazMelgarejo/orama-system/tree/main/.cursor/.agents/skills/frontend-slides
Command: npx skills add https://github.com/diazMelgarejo/orama-system --skill frontend-slides-diazmelgarejo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python-pptx.

What problem does it solve? Building presentation decks that look distinctive and fit every screen is hard for non-designers, and converting PowerPoint files to web-friendly formats usually requires manual rework. This Skill produces self-contained HTML presentations with viewport-safe layouts and guided style discovery. ## Core Features & Use Cases - HTML Presentation Generation: Creates single-file decks with inline CSS/JS, keyboard, wheel, and touch navigation, reveal animations, and reduced-motion support. - PPT/PPTX Conversion: Extracts text, images, and speaker notes from PowerPoint files using python-pptx, then rebuilds them as styled HTML slides. - Visual Style Exploration: Generates three single-slide previews from 12 curated presets so users pick a design by looking, not by answering abstract questionnaires. - Use Case: A developer needs a conference talk deck from rough notes. The Skill asks about mood, shows three styled preview slides, then builds a complete presentation.html that fits every viewport from 375px phones to 1920px desktops. ## Quick Start Ask the assistant to create an HTML presentation from your notes or convert your PPTX file into a web deck, then pick one of the generated style previews.

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?

Use python-pptx with Python 3 to extract text, images, and speaker notes from .ppt or .pptx files, preserving slide order. After extraction, the same style-selection workflow as a new presentation applies, producing a self-contained HTML deck.

How do I create HTML slides that fit any screen without scrolling?

Set every slide to height: 100vh and 100dvh with overflow: hidden, and scale all typography and spacing with clamp(). When content overflows, split it into multiple slides rather than shrinking text below readable sizes.

What presentation styles are available for HTML decks?

Twelve presets cover moods from confident (Bold Signal, Electric Studio) to calm (Notebook Tabs, Swiss Modern) to futuristic (Neon Cyber, Terminal Green). Each preset defines fonts, palette, and a signature visual element.

Does the HTML presentation work without internet or dependencies?

Yes, the default output is one self-contained HTML file with inline CSS and JavaScript that runs from a local file in any browser. Fonts may load from Google Fonts or Fontshare, but no build tools or frameworks are required.

Why does my CSS clamp() negation not work in slides?

Browsers silently ignore negated CSS functions like -clamp() or -min(). Wrap them in calc() instead, for example right: calc(-1 * clamp(28px, 3.5vw, 44px)), to apply negative values reliably.

How do I make HTML presentations accessible for keyboard users?

Use semantic structure with main, section, and nav elements, provide full keyboard navigation, maintain readable contrast, and respect prefers-reduced-motion by reducing animation durations for users who request it.