skills.rest
Oruga420
Oruga420COMMUNITY
Explore all skills by this author →
Website𝕏@Oruga420GitHub

frontend-slides

Generate zero-dependency, single-file HTML presentations from notes or PPT/PPTX files.

Updated Mar 24, 2026
Search Tags:#design#html#presentation#pptx#animations#slides#conversion
One-click install
npx skills add https://github.com/Oruga420/claude-code-skills --skill frontend-slides-oruga420
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/Oruga420/claude-code-skills/tree/main/frontend-slides
Command: npx skills add https://github.com/Oruga420/claude-code-skills --skill frontend-slides-oruga420

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many presenters and non-designers need production-quality, animated slide decks but lack the design tooling or front-end skills to produce viewport-safe, distinctive HTML presentations or to convert PPT/PPTX files into responsive web decks. This Skill removes manual layout and conversion toil by generating zero-dependency, single-file HTML presentations with enforced accessibility and viewport-fit rules.

Core Features & Use Cases

  • Zero-dependency HTML exports: produce one self-contained HTML file with inline CSS and JS for easy sharing and local playback.
  • PPT/PPTX conversion: extract text, images, and notes and map them into the selected visual preset while preserving slide order and speaker notes.
  • Visual exploration workflow: generate three single-slide previews to help non-designers pick a mood and refine typography, motion, and color before full generation.
  • Validation and delivery: enforce viewport-fit and density limits, test across common screen sizes, and provide handoff instructions and customization points.
  • Use Case: convert an investor pitch PPTX into a polished, animated single-file HTML deck that respects reduced-motion preferences and runs locally.

Quick Start

Use the frontend-slides skill to convert 'deck.pptx' into a single self-contained animated HTML 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 PPTX file into an animated HTML presentation?▼

To convert a PPTX file into an animated HTML presentation, this Skill extracts text, images, and notes from your PowerPoint and maps them into a selected visual preset. It preserves slide order and speaker notes while generating a single self-contained HTML file.

Can I create a zero-dependency HTML slide deck from plain notes?▼

Yes, you can create a zero-dependency HTML slide deck directly from plain notes. The Skill generates a single self-contained HTML file with inline CSS and JS, requiring no external libraries for easy sharing and local playback.

Do I need python-pptx installed to convert PowerPoint slides to HTML?▼

You do not strictly need python-pptx installed to convert PowerPoint slides to HTML, but it is utilized when available. The Skill optionally extracts assets using python-pptx to map PPT or PPTX files into the visual preset.

What is the best way to preview styles before generating a full HTML presentation?▼

The best way to preview styles before a full HTML presentation generation is using the visual exploration workflow. It produces three single-slide previews to help you pick a mood and refine typography, motion, and color beforehand.

Does the generated HTML presentation respect reduced-motion accessibility preferences?▼

Yes, the generated HTML presentation respects reduced-motion preferences. The Skill enforces viewport-fit rules, density limits, and accessibility standards, testing across common screen sizes for compliant local playback.

Are there limitations on content density when converting slides to a single HTML file?▼

Yes, there are limitations on content density when converting slides to a single HTML file. The Skill enforces specific density limits and viewport-fit rules to ensure your animated presentation renders correctly across common screen sizes.

Related Skills

Explore More Design & Creative Skills→
SologaSologa
1

pptx

Create, edit, and analyze PowerPoint presentations with Python scripts.

Community
Advanced
ez404-36ez404-36

html-presentations

Generate a self-contained HTML presentation file with inline CSS and JavaScript.

Community
Advanced
tan-yong-shengtan-yong-sheng
72

frontend-slides

Generate zero-dependency HTML slide decks with inline CSS and JS.

Community
Intermediate
neubigneubig
3

openhands-slides

Create branded reveal.js slide decks as self-contained HTML files.

Community
Intermediate