frontend-slides

Generate zero-dependency, viewport-safe HTML slide decks from notes or PPT/PPTX files.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/Rekan-Maqsoud/college-community-app --skill frontend-slides-rekan-maqsoud
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/Rekan-Maqsoud/college-community-app/tree/main/.agent/.agents/skills/frontend-slides
Command: npx skills add https://github.com/Rekan-Maqsoud/college-community-app --skill frontend-slides-rekan-maqsoud

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool helps creators craft engaging HTML slide decks without complex toolchains, enabling quick, internet-ready presentations.

Core Features & Use Cases

  • Zero-dependency: outputs a single self-contained HTML file with inline CSS and JS.
  • Viewport-fit slides: ensures every slide fits in one viewport with no internal scrolling.
  • PPT/PPTX conversion: converts existing PowerPoint slides into web-ready HTML decks.
  • Workflow-ready: supports keyboard/touch navigation, reduced motion, and accessibility-conscious typography.

Quick Start

Create a zero-dependency HTML deck from topic notes or convert an existing PPTX to a browser-based 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 PPTX slides to a browser-based HTML presentation?

You can convert PPTX slides to an HTML presentation by generating a zero-dependency, single-file output. The resulting deck applies inline CSS and JS, viewport-fit base CSS, keyboard and touch navigation, reduced motion support, and accessibility-conscious typography.

How do I create HTML slides that fit perfectly inside the browser viewport?

Create HTML slides that fit a single viewport by enforcing viewport-fit base CSS, which prevents internal scrolling. This approach applies to talks, lectures, and workshops, ensuring every slide stays visible without scrolling.

Do I need external libraries or dependencies to build HTML slide decks?

No external libraries are needed to build HTML slide decks. The output is a single self-contained HTML file with inline CSS and JS, enforcing a zero-dependency architecture for internet-ready presentations.

Can I use HTML presentations for iterative design exploration during lectures?

Yes, HTML presentations support iterative design exploration for talks, lectures, and workshops. They enforce accessibility-conscious typography, keyboard and touch navigation, and reduced-motion support for accessible audience delivery.

How does reduced-motion support work in web-based slide decks?

Reduced-motion support in web-based slide decks ensures animations respect user accessibility preferences. The single-file HTML output applies this support alongside keyboard and touch navigation, maintaining an accessible viewing experience.

What is the best way to animate HTML slides without a complex toolchain?

The best way to animate HTML slides without a complex toolchain is generating a self-contained HTML file with inline CSS and JS. This zero-dependency method outputs viewport-safe decks supporting keyboard, touch, and reduced-motion navigation.