skills.rest
vrcms
vrcmsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/vrcms/everything-qwen-code --skill frontend-slides-vrcms
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
CDO-07-NewCDO-07-New

frontend-slides

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

Official
Advanced
zardusai-cyberzardusai-cyber
1

frontend-slides

Convert PPT/PPTX presentations into self-contained HTML decks with inline CSS and JS.

Community
Intermediate
zhizhunbaozhizhunbao

dev-pptx_to_md

Convert PowerPoint PPTX presentations into Markdown documents.

Community
Basic
khetansarveshkhetansarvesh
1

frontend-slides

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

Community
Advanced