skills.rest
Choi-Keith
Choi-KeithCOMMUNITY
Explore all skills by this author →
GitHub

write-frontend-slides

Generate animated single-file HTML presentations from scratch or convert PowerPoint files.

Updated Aug 10, 2026
Search Tags:#presentation#slide deck#pdf export#pptx conversion#css animation#html slides#vercel deploy
One-click install
npx skills add https://github.com/Choi-Keith/skill-arsenal-ultra --skill write-frontend-slides-choi-keith
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: write-frontend-slides
Source: https://github.com/Choi-Keith/skill-arsenal-ultra/tree/main/skills/write-frontend-slides
Command: npx skills add https://github.com/Choi-Keith/skill-arsenal-ultra --skill write-frontend-slides-choi-keith

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python-pptx, playwright, Pillow, 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 guides an AI agent through a structured workflow to produce animated, zero-dependency HTML presentations that run entirely in the browser, including converting existing PPTX files. ## Core Features & Use Cases - Guided style discovery: Generates three visual style previews (safe preset, bold template, wildcard) so users pick a design by looking, not by describing abstract preferences. - Fixed 16:9 stage rendering: Every deck is authored on a 1920×1080 canvas scaled to any viewport, with keyboard, touch, and inline text-editing support built in. - PPTX conversion and sharing: Extracts text, images, and speaker notes from PowerPoint files, then deploys the result to a live Vercel URL or exports it as a PDF. - Use Case: A founder needs a pitch deck for tomorrow. They share their notes, pick one of three rendered style previews, and receive a self-contained HTML deck they can present in a browser, share via link, or export as PDF. ## Quick Start Ask the agent to create an animated HTML presentation about your topic, or to convert your existing PPTX file into a web-based slide deck.

Frequently Asked Questions about write-frontend-slides

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

FAQPage Schema
How do I convert a PowerPoint PPTX 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 as an animated HTML deck in a visual style you select from rendered previews.

How do I create an HTML slide deck without design skills?▼

Answer four questions about purpose, length, content, and density, then compare three auto-generated style previews showing your actual title slide. Pick one and the full deck is generated as a single self-contained HTML file.

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 one PDF. Animations become static final states, and a --compact flag reduces file size by rendering at 1280×720.

How do I share an HTML presentation as a live URL?▼

The deploy.sh script deploys the deck to Vercel, producing a public link that works on phones, tablets, and laptops. It requires Node.js and a free Vercel account, and redeploying updates the same URL.

Why do slides look wrong on mobile screens?▼

Decks use a fixed 1920×1080 stage that scales as a whole to fit any viewport, preserving 16:9 with letterboxing instead of reflowing content. If content overflows, it means too much was placed on one slide and it should be split.

What are the limitations of HTML presentations versus PowerPoint?▼

HTML decks run only in browsers and lose animations when exported to static PDF. They also require all assets to use relative paths for deployment and PDF export, and slides must use the .slide class for the export script to detect them.

Related Skills

Explore More Design & Creative Skills→
SuperagentsysSuperagentsys
650

ppt-generator

Generates editable PPTX files with slide outlines, speaker notes, and formatted content from user-provided topics, audiences, languages, and slide counts.

Community
Advanced
0dot770dot77

lecture-export

Convert HTML lecture slides into a single high-resolution PDF via Playwright.

Community
Advanced
AndurilCodeAndurilCode
7

presentation-craft

Create slide-by-slide presentation scripts with narrative arcs and timing.

Official
Intermediate
xpert-aixpert-ai
8

presentations

Create and edit PowerPoint and Google Slides decks with enforced narrative structure and layout rules.

Official
Advanced