Vibeleaderboard
Index / tool
Visit github.com
Category
Developer Tools
Rank
No. 69Tools index
Pricing
Open Source
Platform
cli · web
Type
TOOL
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 contentAnimation-rich HTML presentation

  • Convert PowerPoint files to web presentations

    PowerPoint fileHTML presentation with animations

  • Generate visual style previews for selection

    Presentation contentMultiple style preview options

  • Create production-quality presentations without coding knowledge

    Content and style preferencesProfessional HTML presentation with zero dependencies

Tags

claudepresentationshtmlcsspowerpointslidesdesignweb

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.