skills.rest
khetansarvesh
khetansarveshCOMMUNITY
Explore all skills by this author →
GitHub

frontend-slides

Create zero-dependency HTML slide decks from PPT/PPTX with viewport-fit enforcement.

1|Updated Mar 6, 2026
Search Tags:#presentations#html#accessibility#animation#slide design#viewport fit#ppt to web
One-click install
npx skills add https://github.com/khetansarvesh/ai_skills_repo --skill frontend-slides-khetansarvesh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/khetansarvesh/ai_skills_repo/tree/main/skills/frontend-slides
Command: npx skills add https://github.com/khetansarvesh/ai_skills_repo --skill frontend-slides-khetansarvesh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend-slides eliminates the hassle of designing and iterating on presentations by producing polished, animation-rich HTML decks that reliably fit any viewport without ugly overflow or scrolling.

Core Features & Use Cases

  • Zero-dependency HTML presentations: generate a single-file deck with inline CSS and JS that runs locally in the browser.
  • PowerPoint-to-web conversion: convert .ppt/.pptx into a viewport-fit HTML presentation while preserving slide order, extracted assets, and notes when available.
  • Visual style exploration: use mood-based presets and create quick single-slide previews so non-designers can pick an aesthetic confidently.
  • Strict viewport-fit enforcement: guarantee each slide fits exactly one viewport using 100dvh/100vh, overflow: hidden, and responsive clamp() typography—splitting slides when content doesn’t fit.

Quick Start

Generate an HTML presentation from my notes about a product launch, using a bold keynote style that fits every device without scrolling.

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

To convert PowerPoint to HTML, the Skill transforms .ppt or .pptx files into browser-ready presentations. It preserves slide order, extracts assets, and enforces single-viewport fit using responsive CSS and inline animations.

How do I create HTML presentations that fit any screen size without scrolling?▼

Creating HTML presentations that fit any screen requires strict viewport enforcement using 100dvh, overflow hidden, and clamp() typography. The Skill applies these rules automatically, splitting slides when content exceeds the viewport.

Can I add accessibility and motion support to existing HTML slides?▼

Yes, you can enhance existing HTML slides with reveal animations and reduced-motion support. The Skill integrates these features while maintaining keyboard, touch, and wheel navigation for accessible presentations.

Do I need external libraries to build viewport-safe presentation decks?▼

No external libraries are needed to build viewport-safe presentation decks. The Skill generates zero-dependency HTML files with inline CSS and JavaScript that run locally in the browser.

How do I use mood-based visual style presets for slide design?▼

Using mood-based visual style presets involves applying mandatory CSS rules from STYLE_PRESETS.md. The Skill generates quick single-slide previews so you can confidently select aesthetics before building the full deck.

What happens when slide content overflows the viewport during conversion?▼

When slide content overflows the viewport during conversion, the Skill automatically splits the slides. This ensures every slide fits exactly one viewport without requiring scrolling or causing layout overflow.

Related Skills

Explore More Design & Creative Skills→
tmarsbrtmarsbr

frontend-slides

Generate self-contained HTML slide decks with inline CSS and JS.

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

frontend-slides

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

Community
Intermediate
samymitysamymity
1

frontend-slides

Generate zero-dependency HTML slide decks with viewport-fit animations and navigation.

Community
Advanced
hsiangjenlihsiangjenli

slidev-theme-neversink

Create Slidev presentations with the Neversink theme using Markdown and Vue components.

Community
Intermediate