Presentation Chef

Presentation Chef

Generate cinematic, Apple Keynote-style HTML presentations from any content. Single self-contained .html file with zero dependencies.

You MUST gather all inputs interactively using AskUserQuestion before generating any HTML. Do NOT skip the input gathering phase. Do NOT generate a presentation without knowing the content, theme, and design preferences.

Process

Follow these steps exactly:

Pre-Step: Initialize Task Pipeline

Before starting Step 1, create tasks to give the user visibility into the full workflow:

TaskCreate:
  subject: "Gather content source"
  description: "Ask the user for their presentation content — paste, file, or topic"
  activeForm: "Gathering content source"

TaskCreate:
  subject: "Select theme & customize design"
  description: "Analyze content, recommend a theme, and gather design customization preferences"
  activeForm: "Selecting theme and design preferences"

TaskCreate:
  subject: "Plan slide structure"
  description: "Map content to slide types and confirm the structure with user"
  activeForm: "Planning slide structure"

TaskCreate:
  subject: "Build presentation"
  description: "Generate the complete HTML presentation with slides, navigation, and effects"
  activeForm: "Building presentation"

Update each task to in_progress when starting that phase, and completed when done:

• "Gather content source" → covers Step 1
• "Select theme & customize design" → covers Steps 2-3
• "Plan slide structure" → covers Step 4
• "Build presentation" → covers Steps 5-6

Step 1: Gather Content

TaskUpdate: Mark "Gather content source" → in_progress

Ask the user for their content source using AskUserQuestion:

AskUserQuestion:
  question: "What content should I turn into a presentation?"
  header: "Content"
  options:
    - label: "Paste or describe it"
      description: "I'll type/paste content or describe what I want in the presentation"
    - label: "Read from a file"
      description: "I have a markdown file, text file, or other document to convert"
    - label: "Generate from topic"
      description: "Give me a topic and I'll create both content and design"
  multiSelect: false

If the user selects "Read from a file", ask for the file path and use the Read tool to get the content. If the user selects "Generate from topic", ask what the topic is and what audience/purpose it serves. If the user pastes content, analyze it to understand its structure.

TaskUpdate: Mark "Gather content source" → completed

Step 2: Analyze Content & Suggest Theme

TaskUpdate: Mark "Select theme & customize design" → in_progress

After receiving content, analyze it to determine:

• Content type: pitch deck, portfolio, product launch, educational, report, personal story, etc.
• Tone: professional, creative, technical, casual, dramatic
• Slide count: how many slides the content naturally breaks into

Then present theme options interactively:

AskUserQuestion:
  question: "What visual theme should the presentation use?"
  header: "Theme"
  options:
    - label: "Dark Cinematic (Recommended)"
      description: "[AI reasoning why this fits the content]. Pure black bg, ambient orbs, glassmorphism cards, Apple blue/purple accents"
      markdown: |
        DARK CINEMATIC
        ──────────────────────────────
        Background:  #000000 (pure black)
        Text:        #ffffff / #86868b
        Accent 1:    #0071e3 (Apple blue)
        Accent 2:    #a855f7 (purple)
        Warm:        #ff6723 (orange)
        Success:     #30d158 (green)

        Effects:     Ambient orbs, grain overlay
                     Glassmorphism cards
                     Gradient text on headlines

        Font:        SF Pro / system sans-serif
        Animations:  Cinematic (900ms, spring easing)
    - label: "Light Minimal"
      description: "Clean, Chronicle-style white canvas with bold typography and single accent color"
      markdown: |
        LIGHT MINIMAL
        ──────────────────────────────
        Background:  #ffffff / #fafafa
        Text:        #1d1d1f / #86868b
        Accent:      #0071e3 (or content-matched)
        Border:      #e5e5e5

        Effects:     Subtle shadows, no orbs
                     Clean card borders
                     Understated elegance

        Font:        Geist / clean geometric sans
        Animations:  Smooth (600ms, ease-out)
    - label: "Warm Editorial"
      description: "Magazine-style warmth with serif typography and rich earth tones"
      markdown: |
        WARM EDITORIAL
        ──────────────────────────────
        Background:  #1a1210 / #f5efe8
        Text:        #f5efe8 / #a89585
        Accent:      #e8734a (coral)
        Secondary:   #c4956a (warm gold)

        Effects:     Warm ambient glow
                     Paper-like texture
                     Editorial layouts

        Font:        Playfair Display + Source Sans
        Animations:  Elegant (800ms, smooth)
    - label: "Neon Cyberpunk"
      description: "High-energy tech aesthetic with neon accents on deep dark backgrounds"
      markdown: |
        NEON CYBERPUNK
        ──────────────────────────────
        Background:  #0a0a1a / #0d1117
        Text:        #e0e0ff / #6b7280
        Accent 1:    #00f0ff (cyan)
        Accent 2:    #ff00aa (magenta)
        Glow:        #7c3aed (purple)

        Effects:     Neon glow borders
                     Scanline overlay
                     Matrix-style grid bg

        Font:        JetBrains Mono + Space Grotesk
        Animations:  Snappy (500ms, sharp easing)
  multiSelect: false

IMPORTANT: Customize the recommendation text based on the actual content analyzed. Don't use generic descriptions. For example: "Since this is a startup pitch, Dark Cinematic will make your numbers feel impactful and your product feel premium."

Step 3: Customize Design

Ask about specific design preferences:

AskUserQuestion:
  question: "Any design customizations?"
  header: "Customize"
  options:
    - label: "Use defaults"
      description: "The theme preset looks great as-is, no changes needed"
    - label: "Custom accent color"
      description: "I want to use a specific brand color as the primary accent"
    - label: "Custom fonts"
      description: "I want specific fonts (e.g., Google Fonts or system fonts)"
    - label: "Multiple customizations"
      description: "I have specific requirements for colors, fonts, or effects"
  multiSelect: false

If the user wants customizations, ask follow-up questions one at a time about each customization.

TaskUpdate: Mark "Select theme & customize design" → completed

Step 4: Map Content to Slides

TaskUpdate: Mark "Plan slide structure" → in_progress

Analyze the content and map it to the appropriate slide types. Present the slide plan:

AskUserQuestion:
  question: "Here's my proposed slide structure. Does this look right?"
  header: "Structure"
  options:
    - label: "Looks perfect"
      description: "Generate the presentation with this structure"
    - label: "Adjust order"
      description: "I want to reorder some slides"
    - label: "Add/remove slides"
      description: "I want to add or remove specific slides"
    - label: "Different approach"
      description: "I want a different overall structure"
  multiSelect: false

Before asking, present the slide plan as a numbered list in your message text. Example:

Slide 1: Hero — "Company Name" + tagline
Slide 2: Stats — 3 key metrics with count-up
Slide 3: Chapter — "The Problem"
Slide 4: Content Card — Problem description
...

TaskUpdate: Mark "Plan slide structure" → completed

Step 5: Ask Output Location

AskUserQuestion:
  question: "Where should I save the presentation?"
  header: "Output"
  options:
    - label: "Current directory"
      description: "Save as presentation.html in the current working directory"
    - label: "Custom path"
      description: "I'll specify the exact file path and name"
    - label: "Desktop"
      description: "Save to ~/Desktop/ for easy access"
  multiSelect: false

Step 6: Generate the Presentation (Batched with Progress Tracking)

When entering this step, mark the "Build presentation" high-level task as in_progress.

6a: Create Build Sub-Tasks

Based on the confirmed slide plan, create granular build tasks. Group slides into batches of 3-4:

TaskCreate:
  subject: "Set up HTML structure & CSS theme"
  description: "Create HTML skeleton, CSS reset, theme variables, effects (grain/orbs), slide system, reveal animations, typography, responsive breakpoints, print styles"
  activeForm: "Setting up document structure and CSS"

# For each batch of 3-4 slides, create a task:
TaskCreate:
  subject: "Build slides [X]-[Y]: [slide types]"
  description: "Generate HTML for: Slide X ([type] — [title]), Slide X+1 ([type] — [title]), ..."
  activeForm: "Building slides [X] through [Y]"

# Example for a 12-slide presentation:
# "Build slides 1-4: Hero, Stats, Chapter, Content Card"
# "Build slides 5-8: Feature Grid, Timeline, Comparison, Quote"
# "Build slides 9-12: Data, Split Screen, List, CTA"

TaskCreate:
  subject: "Add navigation, controls & speaker notes"
  description: "Progress bar, nav dots, keyboard hints, speaker notes sidebar with talking points for every slide, controls bar"
  activeForm: "Adding navigation and speaker notes"

TaskCreate:
  subject: "Wire up JavaScript engine"
  description: "Slide navigation, reveal animations, count-up, data bars, keyboard/mouse/touch handlers, parallax, loading screen, notes toggle, PDF export"
  activeForm: "Wiring up JavaScript engine"

TaskCreate:
  subject: "Run quality checklist & save file"
  description: "Verify all 23 quality checks pass, then write the final .html file"
  activeForm: "Running quality checklist and saving"

6b: Execute Build Pipeline

Work through each task sequentially. For every task:

1. TaskUpdate → in_progress before you start working on it
2. Generate that section of the presentation
3. TaskUpdate → completed when done
4. Move to the next task

Slide batch details: When building a slide batch, generate the HTML for all slides in that batch. Each slide must include:

• The slide container ` with correct data-slide` index
• Background variant class
• Ambient orbs (if dark theme)
• All content elements wrapped in reveal-element with sequential delays
• Proper slide type pattern from the Design System Reference below

6c: Assemble & Write

After all build tasks are complete, assemble the full HTML document in this order:

1. Document structure (head, meta, `` open)
2. All CSS (reset, theme, effects, slides, typography, responsive, print)
3. `` open, loading screen, grain overlay (if dark theme)
4. Progress bar, nav dots, keyboard hint
5. Speaker notes sidebar (all slides)
6. Controls bar
7. `` with all slide batches in order
8. `` with full JS engine
9. Close body/html

Use the Write tool to save the assembled HTML to the confirmed output path.

Mark the "Build presentation" high-level task as completed, then mark "Run quality checklist & save file" as completed.

Tell the user the file path and suggest opening it in a browser.

---

Design System Reference

When generating the HTML presentation, follow these specifications exactly.

Document Structure

  
  
  [Presentation Title]
  /* ALL CSS INLINE */

  
  
  
  
  
  
  
  
  /* ALL JS INLINE */

Everything must be inline. Zero external dependencies. No CDN links. No Google Fonts links (use system font stacks or embed @font-face with base64 only if absolutely necessary for a specific requested font).

CSS Foundation

Reset & Base

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

:root {
  /* Theme tokens - set these per theme */
  --bg-primary: #000000;
  --bg-secondary: #0a1628;
  --text-primary: #ffffff;
  --text-secondary: #86868b;
  --text-muted: #6e6e73;
  --accent-1: #0071e3;
  --accent-1-light: #2997ff;
  --accent-2-start: #6e3aff;
  --accent-2-end: #a855f7;
  --accent-warm: #ff6723;
  --accent-pink: #ff375f;
  --accent-green: #30d158;
  --accent-teal: #64d2ff;
  --gray-100: #f5f5f7;
  --gray-200: #d2d2d7;
  --gray-400: #86868b;
  --gray-600: #6e6e73;
  --gray-800: #1d1d1f;
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-blur: 40px;
  --transition-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --slide-duration: 900ms;
  --reveal-stagger: 150ms;
}

html { scroll-behavior: auto; overflow: hidden; background: var(--bg-primary); }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Light Theme Override

For light themes, override:

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --text-muted: #aeaeb2;
  --card-bg: rgba(0, 0, 0, 0.03);
  --card-border: rgba(0, 0, 0, 0.08);
  /* Adjust accent colors for contrast on light */
}

Effects

Grain Overlay (dark themes only)

.grain-overlay {
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  animation: grainShift 0.5s steps(3) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2px, 1px); }
  66% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

Ambient Orbs (dark themes)

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  pointer-events: none;
  animation: orbFloat 12s ease-in-out infinite alternate;
}
@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.1); }
}

Create 2-3 orbs per slide with different colors matching the theme. Vary sizes (400-600px), positions, animation delays.

Hero Glow Ring

.hero-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(accent1, 0.08) 0%, rgba(accent2, 0.04) 40%, transparent 70%);
  pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: glowPulse 6s ease-in-out infinite alternate;
}

Slide System

Container & Transitions

.slide-container {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
}

.slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95) translateY(30px);
  transition: opacity var(--slide-duration) var(--transition-cinematic),
              transform var(--slide-duration) var(--transition-cinematic),
              visibility 0s linear var(--slide-duration);
  will-change: opacity, transform;
  overflow-y: auto;
  overflow-x: hidden;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  transition: opacity var(--slide-duration) var(--transition-cinematic),
              transform var(--slide-dur

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sacredvoid](https://github.com/sacredvoid)
- **Source:** [sacredvoid/skillkit](https://github.com/sacredvoid/skillkit)
- **License:** MIT

Install and usage instructions live in the source repository linked above.