frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use for solution decks, presales/sales pitches, client proposals, pitch decks, teaching tutorials, conference talks, and internal presentations. Ideal for sales and presales teams. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
Best for Sales and presales teamsWorks with GitHubLow risk
⌘source
- author
@LeoYeAI- language
- Python
★2kstars
306forks
May 6, 2026
✦overview.md
Key Features
- ·Zero-dependency HTML slides
- ·PowerPoint file conversion
- ·Animation-rich presentations
- ·Reference-driven CSS and code generation
- ·Multiple visual style presets
Use Cases
- →Convert a PowerPoint deck into a shareable HTML presentation
- →Create a pitch deck with custom animations and visual styles
- →Build a tutorial or conference talk with animated slides
- →Generate a client proposal that runs entirely in the browser
Best for
- ✓Sales and presales teams
- ✓Non-designers wanting polished slides
- ✓Conference talks and tutorials
Not ideal for
- !Collaborative real-time editing
- !Complex data dashboards
FAQs
name
frontend-slides
description
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use for solution decks, presales/sales pitches, client proposals, pitch decks, teaching tutorials, conference talks, and internal presentations. Ideal for sales and presales teams. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
Frontend Slides Skill
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration ("show, don't tell"), then generates production-quality slide decks.
Reference files: When generating CSS, image processing, PPT extraction, HTML structure, edit button, or animation code, read the corresponding file under reference/ (and STYLE_PRESETS.md for presets and CSS Gotchas) so output is correct and complete.
🧠 Core Design Philosophy
1. Visual Style & Material
Principle: Form follows function. All visual decisions (color, layout, material) must serve the user's mental model and business goals.
| Style Position | Use Cases | Core Characteristics |
|---|---|---|
| Future & Depth | Frontier exploration, tech product launches | Frosted glass + dark mode, halos and transparency for layering |
| Efficiency & Speed | Professional tools, data dashboards | Clean flat style + Bento UI, clear boundaries, modular |
$install
1-click copynpx skills add LeoYeAI/openclaw-master-skills --skill frontend-slidesSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
3/ 5
goodMostly clear, but there are still a few confusing or poorly structured parts.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.