frontend-slides

Generate zero-dependency HTML presentations from scratch or convert PowerPoint files to web slides.

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/danieliudi/trackforge-os --skill frontend-slides-danieliudi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/danieliudi/trackforge-os/tree/main/.cursor/skills/frontend-slides
Command: npx skills add https://github.com/danieliudi/trackforge-os --skill frontend-slides-danieliudi

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating visually distinctive presentations usually requires design skills or produces generic-looking slides. This Skill generates self-contained HTML presentations with curated visual styles, letting users pick a design direction from rendered previews instead of describing aesthetics in words. ## Core Features & Use Cases - New Presentation Generation: Builds single-file HTML decks with inline CSS/JS on a fixed 1920×1080 stage, using 12 curated style presets plus 34 optional bold design templates. - PowerPoint Conversion: Extracts text, images, and speaker notes from .pptx files via a Python script and rebuilds them as web presentations in a chosen style. - Visual Style Discovery: Renders three real title-slide previews (safe preset, bold template, wildcard) so users compare actual designs before committing. - Sharing & Export: Deploys decks to Vercel for a live URL or exports them to PDF via a headless-browser screenshot script. - Use Case: A founder needs a pitch deck but has no design background. They describe the topic, pick one of three rendered style previews, and receive a polished HTML deck they can present in a browser, deploy to a link, or export as PDF. ## Quick Start Ask the agent to use the Frontend Slides skill to create a pitch deck presentation about your topic, then answer its questions about purpose, length, content, and density.

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 included extract-pptx.py script with python-pptx installed to pull all text, images, and speaker notes from the .pptx file. After confirming the extracted content, pick a visual style and the skill generates an HTML deck preserving slide order and assets.

How do I create an HTML presentation without knowing CSS?

Describe your topic, audience, and content, then choose from three rendered title-slide previews showing different visual styles. The skill generates the complete single-file HTML deck with all styling, animations, and navigation included.

Can I export an HTML presentation to PDF?

Yes, the export-pdf.sh script uses Playwright to screenshot each slide at 1920×1080 and combine them into a PDF. Animations become static final states, and a --compact flag renders at 1280×720 to reduce file size.

Does the generated presentation work on mobile phones?

Yes, every deck uses a fixed 1920×1080 stage that scales uniformly to fit any viewport, letterboxing as needed instead of reflowing content. Touch and swipe navigation are included alongside keyboard controls.

Why do images not appear after deploying my presentation?

Images referenced only through CSS background-image or absolute filesystem paths may be missed during deployment. Deploy the whole folder containing the HTML and its assets, and use relative paths like src="photo.png" so all files upload together.