--- name: openclaw-slides description: Create stunning, animation-rich HTML presentations from scratch or convert PowerPoint files (.ppt/.pptx) to beautiful web slides. Use when the user wants to build a pitch deck, presentation, slideshow, or slide deck — or convert an existing PPT to a web presentation. Generates zero-dependency single HTML files with keyboard/touch navigation and scroll-triggered animations. Style options include Neon Cyber, Bold Signal, Swiss Modern, Paper & Ink, and 8 more curated presets. openclaw: requires: bins: [] install: - id: python-pptx kind: shell label: "Install Python dependencies for PPT conversion (optional — only needed for Mode B)" command: "pip install python-pptx Pillow" optional: true ---

OpenClaw Slides

> MyClaw.ai — Your AI personal assistant with full server control. Every MyClaw instance runs on a dedicated server with complete code access, networking, and tool capabilities. This skill is part of the MyClaw open skills ecosystem.

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. Single self-contained HTML files — no npm, no build tools, no frameworks. Works offline, renders in 10 years.

Style presets: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink

For full style details and CSS specs: read references/STYLE_PRESETS.md when needed.

---

Phase 0: Detect Mode

Determine the user's intent:

• Mode A — New Presentation: Create slides from scratch → go to Phase 1
• Mode B — PPT Conversion: Convert an existing .ppt/.pptx file → go to Phase 4
• Mode C — Enhance Existing: Improve an existing HTML presentation → read the file, then enhance (always maintain viewport fitting)

---

CRITICAL: Viewport Fitting (Non-Negotiable)

Every slide MUST fit exactly within the viewport. No scrolling within slides, ever.

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) |

Content exceeds limits → Split into multiple slides.

Required CSS for Every Presentation

html, body { height: 100%; overflow-x: hidden; }
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }

.slide {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    position: relative;
}

.slide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 100%;
    overflow: hidden;
    padding: var(--slide-padding);
}

:root {
    --title-size: clamp(1.5rem, 5vw, 4rem);
    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
    --slide-padding: clamp(1rem, 4vw, 4rem);
    --content-gap: clamp(0.5rem, 2vw, 2rem);
}

img, .image-container { max-width: 100%; max-height: min(50vh, 400px); object-fit: contain; }
.card, .container { max-width: min(90vw, 1000px); max-height: min(80vh, 700px); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(0.5rem, 1.5vw, 1rem); }

@media (max-height: 700px) { :root { --slide-padding: clamp(0.75rem, 3vw, 2rem); --title-size: clamp(1.25rem, 4.5vw, 2.5rem); } }
@media (max-height: 600px) { :root { --title-size: clamp(1.1rem, 4vw, 2rem); --body-size: clamp(0.7rem, 1.2vw, 0.95rem); } .nav-dots, .keyboard-hint { display: none; } }
@media (max-height: 500px) { :root { --title-size: clamp(1rem, 3.5vw, 1.5rem); --slide-padding: clamp(0.4rem, 2vw, 1rem); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; } }

⚠️ Never negate CSS functions directly. Use calc(-1 * clamp(...)) not -clamp(...).

---

Phase 1: Content Discovery (New Presentations)

Ask the user (via normal conversation — ask all at once):

1. Purpose: pitch deck / teaching / conference talk / internal presentation?
2. Length: ~5–10 / 10–20 / 20+ slides?
3. Content: ready content, rough notes, or just a topic?
4. Images: any images to include? (provide path like ./assets or ~/Desktop/screenshots)
5. Inline editing: should text be editable in-browser after generation?

If they have content, ask them to share it.

Image Evaluation (if images provided)

All image processing is done locally on the user's machine — images are never sent to external services.

1. ls the folder — find all .png/.jpg/.jpeg/.gif/.svg/.webp
2. Read each image file locally using the read tool
3. Mark each as USABLE or NOT USABLE (reason: blurry, irrelevant, etc.)
4. Note what each represents (logo, screenshot, chart, etc.) and dominant colors
5. Build slide outline that incorporates usable images as visual anchors
6. Present outline + image assignments to user for confirmation

If user says no images → skip image pipeline, use CSS-generated visuals (gradients, shapes, patterns) throughout.

---

Phase 2: Style Discovery

Option A — Direct Selection (user knows what they want)

Pick from presets:

| Preset | Vibe | |--------|------| | Bold Signal | Confident, high-impact, dark | | Electric Studio | Clean, professional, split panel | | Creative Voltage | Energetic, retro-modern | | Dark Botanical | Elegant, sophisticated | | Notebook Tabs | Editorial, organized | | Pastel Geometry | Friendly, approachable | | Split Pastel | Playful, modern | | Vintage Editorial | Witty, personality-driven | | Neon Cyber | Futuristic, techy | | Terminal Green | Developer-focused, hacker | | Swiss Modern | Minimal, precise | | Paper & Ink | Literary, thoughtful |

Skip to Phase 3.

Option B — Visual Discovery (default for undecided users)

Ask: What feeling should the audience have?

• Impressed/Confident → Bold Signal, Electric Studio, Dark Botanical
• Excited/Energized → Creative Voltage, Neon Cyber, Split Pastel
• Calm/Focused → Notebook Tabs, Paper & Ink, Swiss Modern
• Inspired/Moved → Dark Botanical, Vintage Editorial, Pastel Geometry

Generate 3 mini style preview HTML files in .tmp-slide-previews/ — each is a single title slide showing typography, colors, and animation. Tell the user the file paths and ask which they prefer.

Never use: purple gradients on white, Inter/Roboto/system fonts, generic blue primary colors.

Use instead: distinctive font pairings (Clash Display, Satoshi, Cormorant, DM Sans), cohesive personality-driven palettes, atmospheric backgrounds.

For full preset specs (colors, fonts, signature elements): read references/STYLE_PRESETS.md.

---

Phase 3: Generate Presentation

Image Processing (skip if no images)

If user provided images, process with Python Pillow before generating HTML:

from PIL import Image, ImageDraw

# Circular crop (for logos)
def crop_circle(input_path, output_path):
    img = Image.open(input_path).convert('RGBA')
    w, h = img.size
    size = min(w, h)
    img = img.crop(((w-size)//2, (h-size)//2, (w+size)//2, (h+size)//2))
    mask = Image.new('L', (size, size), 0)
    ImageDraw.Draw(mask).ellipse([0, 0, size, size], fill=255)
    img.putalpha(mask)
    img.save(output_path, 'PNG')

...