skills.rest
Yassimba
YassimbaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-slides

Generate self-contained HTML slide decks rendered on a fixed 1920×1080 browser stage.

9|Updated Jul 17, 2026
Search Tags:#presentation#browser#slide deck#pdf export#pptx conversion#html slides#css design
One-click install
npx skills add https://github.com/Yassimba/loom --skill frontend-slides-yassimba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/Yassimba/loom/tree/main/skills/frontend-slides
Command: npx skills add https://github.com/Yassimba/loom --skill frontend-slides-yassimba

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating polished presentations usually requires PowerPoint or a slide SaaS tool, and converting PPTX files or rough notes into a designed deck is slow manual work. This Skill produces a complete, self-contained HTML presentation that runs in any browser with no build step or runtime dependencies. ## Core Features & Use Cases - Fixed-stage deck generation: Builds one HTML file with inline CSS/JS, authored at 1920×1080 and scaled as a whole to any screen, with keyboard, touch, and presenter-mode navigation. - Design system workflow: Guides style selection through curated presets, a bold template pack, or custom wildcard designs, with typography, color, motion, and ground levers tuned per subject. - PPTX conversion and verification: Extracts content from existing PPTX files, and validates finished decks with a Playwright-based checker that catches overflow, overlap, low contrast, small text, and underfilled slides. - Use Case: A user with rough notes for a conference talk answers four scoping questions, picks a style preview, and receives a verified 15-slide HTML deck with inline SVG diagrams, speaker notes, and inline editing, then deploys it to a live URL or exports it as a PDF. ## Quick Start Use the frontend-slides skill to build a 10-slide HTML presentation about our Q3 product roadmap from my notes.

Frequently Asked Questions about frontend-slides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an HTML presentation from notes or a topic?▼

Provide your content or topic and answer four scoping questions about purpose, length, content readiness, and density. The skill then proposes a style direction, generates the deck as one self-contained HTML file, and verifies it with an automated checker.

How do I convert a PPTX file to an HTML slide deck?▼

Run the extract-pptx.py script on your .pptx file to pull out slide titles, content, images, and speaker notes. After confirming the extraction, the skill applies a style and regenerates the deck as HTML, preserving slide order and notes.

Does the HTML presentation work on phones and different screen sizes?▼

Yes. Slides are authored at a fixed 1920×1080 stage and the whole stage scales with one transform to fit any viewport, letterboxing on odd aspect ratios. Content never reflows per device, and touch/swipe navigation is included.

Can I edit the slides after the deck is generated?▼

Yes. Inline editing ships by default: hover the top-left corner or press E, click any text to edit it, and press Ctrl+S to save. Edits persist via localStorage, and a locked export-only file is built only when requested.

How do I share or export the finished HTML presentation?▼

You can deploy the deck to a live Vercel URL using the deploy script, or export it as a PDF where each slide is screenshotted and combined into one file. PDF export uses Playwright and supports a compact mode for smaller files.

Why does the deck checker report overflow or overlap errors?▼

The check-deck.py script measures every slide after animations settle and fails on content past the stage edge, overlapping panels, text under 18px, low contrast, or underfilled bodies. Each failure names the slide and element so the fix is a direct edit.

Related Skills

Explore More Design & Creative Skills→
cocyuhaococyuhao
1

baoyu-slide-deck

Convert markdown content into branded PPTX/PDF slide decks with outlines and images.

Community
Advanced
decocmsdecocms
396

slides

Generate editable HTML slide decks from JSON data with live preview.

Official
Advanced
co-r-eco-r-e

svg-diagram

Generate theme-matched SVG diagrams and insert them into MDX files.

Official
Advanced
KanishKumar11KanishKumar11

pptx

Create and edit PowerPoint slide decks using pptxgenjs and LibreOffice.

Community
Advanced