frontend-slides

Create browser-based presentation decks from notes or PowerPoint files.

2|Updated Jul 1, 2026
One-click install
npx skills add https://github.com/CDO-07-New/TF4-AIO-03-foresight-lens-final --skill frontend-slides-cdo-07-new
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/CDO-07-New/TF4-AIO-03-foresight-lens-final/tree/main/.agents/skills/frontend-slides
Command: npx skills add https://github.com/CDO-07-New/TF4-AIO-03-foresight-lens-final --skill frontend-slides-cdo-07-new

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you turn presentation ideas, notes, or PowerPoint files into polished browser-based slide decks without wrestling with boilerplate HTML, layout tuning, or motion setup.

Core Features & Use Cases

  • New decks from scratch: Build animation-rich HTML presentations for talks, pitches, workshops, and internal updates.
  • PPT/PPTX conversion: Recreate existing PowerPoint content as a responsive web deck while preserving structure and speaker flow.
  • Deck refinement: Improve an existing HTML presentation with better typography, interaction, accessibility, and viewport-safe spacing.
  • User example: Use it when you need a sharp product launch deck that feels designed, works offline in a browser, and never scrolls inside a slide.

Quick Start

Use the frontend-slides skill to create a polished, viewport-safe HTML presentation from my notes or PowerPoint file.

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 file to an HTML presentation?

Converting PowerPoint to an HTML presentation involves recreating the existing slide content as a responsive, browser-based web deck while preserving the original structure and speaker flow. You can build animation-rich HTML presentations from PPTX files without manual layout tuning.

What is a viewport-safe HTML slide deck and when do I need one?

A viewport-safe HTML slide deck is a browser-based presentation that fits entirely within the screen dimensions without any internal scrolling. You need this format for talks, pitches, or workshops where content must display sharply and adapt responsively across different devices.

How do I build an HTML presentation with keyboard and touch navigation from scratch?

Building an HTML presentation from scratch requires creating semantic, responsive slide sections with keyboard, touch, and wheel navigation. You can generate self-contained, zero-dependency output that includes reveal animations and reduced-motion support for accessibility.

Can I improve an existing HTML presentation with better accessibility and viewport fitting?

Yes, you can refine an existing HTML presentation to improve typography, interaction, accessibility, and viewport-safe spacing. This process upgrades your deck with responsive slide sections, reveal animations, and reduced-motion support while ensuring content fits without internal scrolling.

Do I need external dependencies to create browser-based slide decks?

No, creating browser-based slide decks requires zero dependencies. The output is strictly self-contained, ensuring the presentation works offline in a browser with semantic responsive sections, keyboard touch navigation, and strict viewport fitting.

Why does my HTML presentation scroll inside individual slides instead of fitting the viewport?

HTML presentations scroll inside slides when layout lacks strict viewport fitting. Applying viewport-safe spacing and semantic responsive slide sections ensures content fits the screen dimensions entirely, eliminating internal scrolling and providing a polished viewing experience.