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.