
Frontend Slides
github.com/zarazhangrui/frontend-slides- Category
- Developer Tools
- Rank
- No. 69Tools index
- Pricing
- Open Source
- Platform
- cli · web
- Type
- TOOL
- Builder
- @zarazhangrui
- GitHub
- 27.9k stars
- Latest release
- v2.1.0
- Date
About
A Claude Code skill that creates beautiful, animation-rich HTML presentations from scratch or by converting PowerPoint files. Uses a visual "show, don't tell" approach - generates style previews for you to choose from instead of requiring design knowledge.
What it does
Frontend Slides guides a coding agent through content discovery, visual direction, deck construction, and browser presentation. It authors each slide on a fixed widescreen canvas, adds navigation and motion, and can extract text, images, and speaker notes from existing PowerPoint decks.
Why it's ranked here
The strongest case is its unusually complete presentation workflow. It covers design selection, generation, editing, navigation, printing, PDF export, and deployment. The opinionated fixed canvas also keeps layouts predictable, though it sacrifices responsive reflow on small screens.
What's good
Generated decks keep styling and behavior inline, avoiding frameworks and build tools at runtime. The deck component supports keyboard and touch navigation, speaker notes, viewport scaling, print layouts, reduced motion, and preserved state for hidden slides. The template library balances restrained presets with more expressive systems.
Tradeoffs
Every deck remains fixed at 16:9 and letterboxes instead of rearranging content for phones. PowerPoint extraction needs the Python PowerPoint package. PDF export requires Node.js, installs Playwright and Chromium, captures slides as images, and therefore loses animation. External font links may still require network access.
How to use it well
Use it for pitches, talks, internal presentations, reading decks, or turning existing PowerPoint content into a browser-based deliverable. Choose density early, compare the generated visual directions, then inspect overflow at desktop and phone viewports. It does not replace native PowerPoint authoring or produce editable PowerPoint files.
Technical notes+
SKILL.md defines new-deck, PPT conversion, and HTML enhancement modes plus the progressive style-selection workflow. viewport-base.css fixes slides at 1920×1080 and supplies print and reduced-motion rules. bold-template-pack/deck-stage.js implements the DeckStage web component with Shadow DOM, keyboard and touch navigation, scaling, notes messaging, and slidechange events. scripts/extract-pptx.py uses python-pptx and writes extracted text, image metadata, notes, and assets. scripts/export-pdf.sh provisions Playwright and Chromium, screenshots each slide, then assembles image-based PDF pages. scripts/deploy.sh packages local assets and deploys through the Vercel CLI.
Observed
- License
- MIT License
- Implementation
- JavaScript deck runtime with Python and Bash helper scripts
- Packaging
- Claude Code plugin or manually installed coding-agent skill
- Primary interface
- Claude Code slash command; other local agents read the core skill instructions
- Presentation output
- Browser-based HTML decks with inline CSS and JavaScript
- PowerPoint support
- Imports PPTX text, images, and speaker notes through a Python command-line helper
- Export and hosting
- Shell helpers provide PDF export through Playwright and deployment through Vercel
- Runtime model
- Fixed 1920×1080 slide canvas scaled uniformly to the browser viewport
Read from README.md, scripts/extract-pptx.py, bold-template-pack/deck-stage.js, plugins/frontend-slides/skills/frontend-slides/scripts/extract-pptx.py, plugins/frontend-slides/skills/frontend-slides/bold-template-pack/deck-stage.js, LICENSE, SKILL.md, STYLE_PRESETS.md, html-template.md, viewport-base.css, animation-patterns.md, scripts/deploy.sh, scripts/export-pdf.sh.
What it can do
Create HTML presentations from scratch
User requirements and content → Animation-rich HTML presentation
Convert PowerPoint files to web presentations
PowerPoint file → HTML presentation with animations
Generate visual style previews for selection
Presentation content → Multiple style preview options
Create production-quality presentations without coding knowledge
Content and style preferences → Professional HTML presentation with zero dependencies
Tags
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.