frontend-slides

Generate self-contained HTML slide decks from content or PPT/PPTX files.

Updated Jul 17, 2022
One-click install
npx skills add https://github.com/garraflavatra/playground --skill frontend-slides-garraflavatra
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/garraflavatra/playground/tree/main/ai/frontend-slides/.vibe/skills/frontend-slides
Command: npx skills add https://github.com/garraflavatra/playground --skill frontend-slides-garraflavatra

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend Slides helps non-designers create production-ready, animation-rich HTML presentations from content or PPTs.

Core Features & Use Cases

  • Zero-dependency HTML slides with inline CSS/JS
  • PPTX-to-web conversion and content extraction
  • Visual discovery workflow to determine style
  • Generates production-quality slide decks ready for sharing or deployment

Quick Start

Provide your presentation content or PPTX, choose a style, and the skill will generate a self-contained 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 PPTX to HTML slides for a web presentation?

You can convert PPTX to HTML slides by providing your file to the workflow, which extracts the content and generates a self-contained, animation-rich HTML slide deck using inline CSS and JavaScript.

What is the best way to create self-contained HTML presentations from scratch?

Creating self-contained HTML presentations from scratch involves generating zero-dependency files with inline CSS and JS, ensuring viewport-fitting slides and responsive typography for production-ready deployment.

Do I need external libraries to display HTML slides in a browser?

No external libraries are needed, as the workflow generates zero-dependency HTML slides with inline CSS and JS, ensuring the presentation is entirely self-contained and ready for browser sharing.

How do I ensure HTML slides fit different screen sizes during a conference talk?

HTML slides fit different screen sizes by enforcing viewport-fitting dimensions and responsive typography via the CSS clamp() function, adapting the presentation layout to various display resolutions.

Can I add custom scripts or assets to my generated HTML slide deck?

Yes, you can add custom scripts or assets because the generated file structure includes optional assets, scripts, and references directories designed to extend presentation functionality.

How does visual style discovery work when generating HTML slides?

Visual style discovery is a workflow process that determines the visual design of your HTML slides, helping non-designers craft talk-ready presentations by matching extracted content with appropriate styling.