skills.rest
benjaleivas
benjaleivasCOMMUNITY
Explore all skills by this author →
GitHub

frontend-slides

Build zero-dependency HTML slide decks from content briefs and PPT outlines.

1|Updated Feb 16, 2026
Search Tags:#html#frontend#css#presentation#animation#slides
One-click install
npx skills add https://github.com/benjaleivas/Claude-Code-Workflow --skill frontend-slides-benjaleivas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/benjaleivas/Claude-Code-Workflow/tree/main/skills/frontend-slides
Command: npx skills add https://github.com/benjaleivas/Claude-Code-Workflow --skill frontend-slides-benjaleivas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create animation-rich HTML presentations from scratch or by converting PowerPoint files. Visual style discovery — shows previews instead of asking abstract design questions. Do NOT use for general web pages or components (use frontend-design instead).

Core Features & Use Cases

  • Zero-dependency HTML slides: single HTML file with inline CSS/JS, no npm or build tools.
  • Style discovery previews: generates 3 distinct preview slides to help users pick their aesthetic.
  • PPT conversion and production-ready generation: convert outlines from PowerPoint to HTML slides, or start from scratch notes.
  • Phase-driven workflow: content discovery, style discovery, and generation for structured outcomes.

Quick Start

Create a zero-dependency HTML slide deck from your notes.

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 outline into an HTML presentation?▼

This tool converts PowerPoint outlines into animation-rich HTML slide decks without requiring external dependencies. It transforms PPT inputs into production-ready single HTML files with inline CSS and JS.

What is the best way to create zero-dependency HTML slides for a web browser?▼

Creating zero-dependency HTML slides involves building a single file with inline CSS and JS. This approach runs browser-based presentations without npm packages or build tools, ensuring lightweight deployment.

How do CSS viewport-fitting slides and IntersectionObserver animations work?▼

CSS viewport-fitting slides scale to fit the display, while an IntersectionObserver-based animation system triggers transitions as slides enter the viewport. This architecture runs entirely in the browser without external libraries.

Can I generate presentation style previews before building the full HTML slide deck?▼

You can generate presentation style previews during the style discovery phase. The system creates three distinct preview slides to help you choose your desired visual aesthetic before generating the final deck.

Does this HTML slide generator support external assets and scripts?▼

Yes, the HTML slide generator supports optional assets, references, and scripts as needed. It integrates these into the zero-dependency architecture while maintaining browser-run compatibility for design previews and educational talks.

When should I not use a zero-dependency HTML slide deck generator?▼

You should not use a zero-dependency HTML slide deck generator for general web pages or component design. It is specifically built for animation-rich presentations, design previews, and educational talks rather than standard frontend development.

Related Skills

Explore More Design & Creative Skills→
HadokennnHadokennn
5

ppt-generation

Generate slide images sequentially and assemble them into a PPTX file.

Community
Intermediate
mykcsmykcs
1

frontend-slides

Create viewport-fitting HTML slide presentations from PPT/PPTX decks.

Community
Advanced
cklxxcklxx
11

ppt-deck

Generate presentation decks with branding and accessibility from a content brief.

Community
Advanced
WUIX69WUIX69

frontend-slides

Create animation-rich HTML presentation decks from topics, notes, or PPTX files.

Community
Advanced