frontend-slides

Generate self-contained HTML slides with inline CSS and JS.

3|2|Updated Mar 14, 2026

Search Tags:#workflow #design #presentations #html #css #animations #slides

Ready to run

npx skills add https://github.com/wzh4464/claude-skills --skill frontend-slides-wzh4464

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Frontend Slides provides a streamlined workflow to generate self-contained, zero-dependency HTML presentations that run in the browser, helping users craft engaging talks without relying on external tooling.

Core Features & Use Cases

Generate a single self-contained HTML file with inline CSS and JS for offline-ready presentations.
Convert PPT/PPTX decks into web slides while preserving structure, typography, and media.
Apply curated style presets and a phase-driven workflow to ensure brand-consistent and visually distinctive slides.

Quick Start

Create a self-contained HTML slide from your content and chosen style by running through Phase 1–3 to produce a single HTML 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 PPTX presentation into an HTML web slide deck?▼

This Skill converts PPTX presentations into self-contained HTML web slides by processing content and assets through a phase-driven pipeline, preserving structure and media for browser viewing.

How do I create self-contained HTML presentations with inline CSS and JS?▼

You create self-contained HTML presentations by running content through the phase-driven workflow, which generates a single zero-dependency HTML file with inline CSS, inline JS, and viewport-base.css for offline-ready use.

Can I use Google Fonts or Fontshare in my HTML slides?▼

Yes, you can use Google Fonts or Fontshare in your HTML slides. The generation pipeline directly includes fonts from these providers to ensure brand-consistent typography and visual styling.

Do I need any external software to view or run these HTML slides?▼

No, you do not need external software to view these HTML slides. The output is a self-contained, zero-dependency HTML file with inline CSS and JS that runs directly in any standard web browser.

What is the best way to add animations to HTML slides?▼

The best way to add animations to HTML slides is using this Skill's curated style presets and phase-driven workflow, which automatically apply animation-rich styling and inline JS to your presentation content.

Can I convert PPT files using python-pptx?▼

Yes, you can convert PPT files using python-pptx, which is listed as a dependency. The Skill uses it to parse PPT/PPTX decks and translate their structure into web slides during the generation pipeline.