frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, create solution decks (解决方案PPT), presales/sales pitch, or client proposal. Ideal for sales and presales teams making solution presentations. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/ken0122/frontend-slidesFrontend 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 Philosophy
- Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
- Show, Don't Tell — Generate visual previews so users pick what they like, not abstract choices.
- Distinctive Design — Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted.
- Production Quality — Well-commented, accessible, performant code.
- Viewport Fitting (CRITICAL) — Every slide MUST fit exactly within the viewport. No scrolling within slides, ever.
CRITICAL: Viewport Fitting Requirements
Mandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size.
The Golden Rule
- Each slide = exactly one viewport height (
100vh/100dvh). - Content overflows? → Split into multiple slides or reduce content. Never scroll within a slide.
Content Density Limits (per slide)
| Slide Type | Maximum Content |
|---|---|
| Title slide | 1 heading + 1 subtitle + optional tagline |
| Content slide | 1 heading + 4–6 bullet points OR 1 heading + 2 paragraphs |
| Feature grid | 1 heading + 6 cards max (2×3 or 3×2) |
| Code slide | 1 heading + 8–10 lines of code |
| Quote slide | 1 quote (max 3 lines) + attribution |
| Image slide | 1 heading + 1 image (max 60vh height) |
Required base CSS: Include the full mandatory base styles in every presentation. Copy from reference/viewport-and-base.css (or inline equivalent). It covers: html/body lock, .slide = 100vh/100dvh + overflow hidden, .slide-content, :root clamp() variables, cards/lists/grids/images, responsive breakpoints (700px, 600px, 500px height; 600px width), and reduced-motion.
Overflow Prevention Checklist
Before generating: (1) Every .slide has height: 100vh; height: 100dvh; overflow: hidden; (2) All font sizes and spacing use clamp() or viewport units (3) Content containers have max-height (4) Images max-height: min(50vh, 400px) or similar (5) Grids use auto-fit + minmax() (6) Breakpoints for heights 700/600/500 (7) No fixed pixel heights on content (8) Per-slide content within density limits.
When Content Doesn't Fit
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-ken0122-frontend-slides": {
"enabled": true,
"auto_update": true
}
}
}