frontend-slides

Generate self-contained HTML presentations with viewport-fitting layouts and scroll-triggered animations.

1|Updated Apr 6, 2026

Search Tags:#html #presentation #animation #slides #web-design #ppt-conversion

Ready to run

npx skills add https://github.com/vrcms/everything-qwen-code --skill frontend-slides-vrcms

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/vrcms/everything-qwen-code/tree/main/.qwen/skills/frontend-slides
Command: npx skills add https://github.com/vrcms/everything-qwen-code --skill frontend-slides-vrcms

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python-pptx, and includes references (resource) components.

What problem does it solve?

This skill solves the challenge of creating professional, animation-rich presentations that are perfectly responsive and viewport-aware without relying on heavy external dependencies or complex design software.

Core Features & Use Cases

Zero-Dependency Presentations: Generates self-contained HTML files with inline CSS and JS for easy sharing.
Viewport-Safe Design: Enforces strict layout rules to ensure slides never overflow or require internal scrolling.
PPT Conversion: Automatically extracts content from existing PowerPoint files to modernize them into web-based decks.
Use Case: Quickly build a high-impact pitch deck or convert a legacy corporate presentation into a modern, browser-based experience that works on any device.

Quick Start

Use the frontend-slides skill to create a new presentation deck based on the notes provided in my current project folder.

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?▼

To convert a PowerPoint file to an HTML presentation, the skill automatically extracts content from .pptx files using python-pptx, modernizing legacy decks into self-contained, web-based slide formats.

How do I create web-based slides that fit perfectly within the viewport?▼

Creating viewport-safe web slides requires enforcing strict layout constraints through semantic HTML and CSS custom properties, ensuring presentations never overflow or require internal scrolling across different devices.

How do I add scroll-triggered animations to HTML slides?▼

Adding scroll-triggered animations to HTML slides relies on JavaScript intersection observers, which automatically activate animation effects as the user navigates through the self-contained presentation file.

Do I need external libraries to build animation-rich HTML slides?▼

No external libraries are needed to build animation-rich HTML slides, as the output is a self-contained HTML file with inline CSS and JS, ensuring easy sharing without heavy dependencies.

Can I use custom themes for my HTML presentation deck?▼

Custom themes for HTML presentation decks are supported using CSS custom properties, allowing you to define and maintain consistent visual styling across your viewport-aware web slides.

What is the best way to share a self-contained HTML presentation?▼

The best way to share a self-contained HTML presentation is to distribute the generated single HTML file, which includes all inline CSS and JS, requiring no complex design software or external server setup to view.