frontend-slides

Generates zero-dependency HTML presentations from prompts or PowerPoint files with curated visual styles.

Updated Jun 28, 2026
One-click install
npx skills add https://github.com/piyush-gambhir/frontend-slides --skill frontend-slides-piyush-gambhir
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/piyush-gambhir/frontend-slides
Command: npx skills add https://github.com/piyush-gambhir/frontend-slides --skill frontend-slides-piyush-gambhir

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Non-designers struggle to create visually distinctive presentations without knowing CSS or JavaScript, and AI-generated slides often fall into generic, cookie-cutter aesthetics. This Skill guides an agent through a structured workflow that produces single-file, animation-rich HTML decks with a fixed 16:9 stage that looks correct on any screen. ## Core Features & Use Cases - Visual Style Discovery: Generates three live single-slide previews (one safe preset, one bold template, one wildcard) so users pick a design by seeing it rather than describing it. - PowerPoint Conversion: Extracts text, images, and speaker notes from .pptx files via a Python script and rebuilds them as styled web presentations. - Automated Visual QA: Runs a headless DOM check that detects content overflow and overlapping panels on the fixed 1920×1080 stage before delivery. - Use Case: A founder needs a pitch deck for an AI startup. The agent asks about purpose, length, and density, shows three styled title-slide previews, then generates the full deck and optionally deploys it to Vercel or exports it as a PDF. ## Quick Start Ask your coding agent to use the Frontend Slides skill to create a pitch deck for your topic, then pick one of the three visual style previews it generates.

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?

Run the extract-pptx.py script on your .pptx file to pull out all text, images, and speaker notes. After confirming the extracted content, pick a visual style from generated previews and the agent rebuilds the deck as a single self-contained HTML file.

How do I create slides without knowing CSS or design?

Answer four questions about purpose, length, content, and density, then compare three generated title-slide previews showing different typography, colors, and animation. Pick the one you like and the full deck is generated in that style.

Can I use this skill with coding agents other than Claude Code?

Yes, any agent with filesystem and shell access can follow SKILL.md directly, including Codex, Gemini CLI, and OpenCode. Point the agent at the repository and it loads only the support files it needs, such as style presets and the viewport CSS.

Why does slide content get cut off in HTML presentations?

The fixed 16:9 stage clips anything past the 1920×1080 frame, so overflow is invisible in screenshots. Run scripts/check-slides.sh on the deck to measure the live DOM for overflow and overlapping panels, then split or shorten offending slides.

How do I share or export an HTML presentation?

Deploy it to a live Vercel URL with scripts/deploy.sh for viewing on any device, or export a static PDF with scripts/export-pdf.sh, which screenshots each slide at 1920×1080. PDF export requires Playwright and loses animations.