frontend-slides

Convert user content into self-contained HTML slide decks with inline CSS and JS.

Updated Mar 20, 2026
One-click install
npx skills add https://github.com/ithaloazevedo/Claude --skill frontend-slides-ithaloazevedo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/ithaloazevedo/Claude/tree/main/.claude/skills/frontend-slides
Command: npx skills add https://github.com/ithaloazevedo/Claude --skill frontend-slides-ithaloazevedo

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill enables anyone to create polished, animation-rich HTML presentations from scratch or by converting PowerPoint files, eliminating the need for complex tooling.

Core Features & Use Cases

  • Zero-dependency HTML slides: A single HTML file with inline CSS/JS, no npm or build steps, enabling instant playback in the browser.
  • PPT/PPTX to web conversion: Converts existing slides into web-ready HTML while preserving layout and typography where possible.
  • Live design constraints: Enforces viewport fitting, typography, motion, and responsive behavior to avoid generic, flat AI-generated outputs.
  • Extensible resources: Optional scripts, references, and assets support on-demand enhancements as directed by SKILL.md.

Quick Start

Provide your slides content and preferred style, and I will generate a self-contained HTML deck instantly.

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

To convert a PPTX presentation to an HTML file, you provide your existing PowerPoint slides and preferred style. The system transforms the content into a self-contained, animation-rich HTML deck with inline CSS and JS.

Can I create HTML slides without installing npm dependencies or build tools?▼

Yes, you can create HTML slides without npm dependencies because the output is a single self-contained HTML file. It requires no build steps or external packages, enabling instant playback directly in any web browser.

How do I ensure my generated web slides fit different screen sizes correctly?▼

To ensure web slides fit different screen sizes, the generation process enforces viewport-fit CSS and responsive behavior. It applies strict typography and motion constraints to prevent layout breaks across devices.

What is the best way to add animations to a self-contained HTML slide deck?▼

The best way to add animations to a self-contained HTML slide deck is by using the skill's built-in motion constraints and inline JS. This approach embeds rich animations directly within the single HTML file without external libraries.

Do I need Playwright or python-pptx installed to convert PowerPoint files to web slides?▼

You need python-pptx to parse and extract content from existing PowerPoint files during the conversion process. Playwright may be utilized for rendering or testing the final web-ready HTML output in a browser environment.

Why do my AI generated HTML slides look flat and generic?▼

AI generated HTML slides look flat and generic when they lack enforced design constraints. Applying live constraints for typography, motion, and viewport fitting ensures the final deck has a polished, animation-rich presentation.