skills.rest
qqlcx5
qqlcx5COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-slides

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

Updated Aug 15, 2026
Search Tags:#html#powerpoint#presentation#slides#pdf export#pptx conversion#css animation
One-click install
npx skills add https://github.com/qqlcx5/skills-hub --skill frontend-slides-qqlcx5
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/qqlcx5/skills-hub/tree/main/skills/frontend-slides
Command: npx skills add https://github.com/qqlcx5/skills-hub --skill frontend-slides-qqlcx5

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating visually distinctive presentations usually requires design skills or produces generic-looking slides, and converting existing PowerPoint decks to web-friendly formats loses styling and interactivity. ## Core Features & Use Cases - HTML Presentation Generation: Creates single-file, self-contained HTML slide decks with inline CSS/JS, animations, keyboard/touch navigation, and 12 curated visual style presets. - Visual Style Discovery: Generates three style preview slides based on the mood you select, so you pick a design by seeing it rather than describing it. - PPT/PPTX Conversion: Extracts text, images, and speaker notes from PowerPoint files via a Python script and rebuilds them as styled web presentations. - Sharing & Export: Deploys decks to a live Vercel URL or exports them to PDF via Playwright screenshots. - Use Case: Ask for a pitch deck for your startup, pick a style from three generated previews, and receive a browser-ready HTML presentation you can deploy to a shareable link. ## Quick Start Ask the agent to create a presentation about your topic, for example: create a 10-slide pitch deck for my AI startup with a bold, confident style.

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 text, images, and speaker notes from the PPTX file. The extracted content is then rebuilt into a styled HTML presentation preserving slide order and assets.

How do I create HTML slides without knowing CSS or JavaScript?▼

Describe your content and pick a mood such as confident, energized, calm, or inspired. The skill generates three visual style previews, and after you choose one it produces a complete single-file HTML presentation with all code inline.

Can I export an HTML presentation to PDF?▼

Yes, the export-pdf.sh script uses Playwright to screenshot each slide at 1920x1080 and combine them into a PDF. Animations are not preserved since the output is a static snapshot, and a --compact flag reduces file size.

Does the generated presentation work without npm or build tools?▼

Yes, every presentation is a single self-contained HTML file with inline CSS and JavaScript. Fonts load from Google Fonts or Fontshare, and no frameworks, bundlers, or dependencies are required to open it in a browser.

Why do my slides overflow or scroll on smaller screens?▼

Slides must use height 100vh with overflow hidden and clamp-based sizing for all fonts and spacing. Content exceeding the per-slide density limits should be split into multiple slides rather than crammed into one.

How do I deploy an HTML presentation to a shareable URL?▼

Run the deploy.sh script with the presentation folder or HTML file path. It uses the Vercel CLI to publish a permanent link that works on phones, tablets, and laptops, and redeploying updates the same URL.

Related Skills

Explore More Design & Creative Skills→
hzh888mqrhzh888mqr

ppt-master

Convert PDFs, Office documents, Markdown, and web URLs into editable PowerPoint decks.

Community
Advanced
githubgithub
38.5k

publish-to-pages

Convert PPTX, PDF, HTML, or Google Slides content and publish it to GitHub Pages.

Official
Intermediate
mahg-esmahg-es
3

slide-deck-generate

Generate branded slide deck structures with per-slide content and speaker notes.

Official
Intermediate
joaoguirunasjoaoguirunas
3

presentation-design

Designs and evaluates presentation slides using audience-centered frameworks and cognitive load principles.

Community
Intermediate