/slide-design

name: slide-design
description: Used when the user asks to "create slides", "make a presentation", "build a deck", "design slides", "generate a pitch deck", "create a conference talk", "make a keynote", "presentation design", "slide layout", "slide template", "presentation structure", or mentions slides, presentations, decks, or talks in any context. Also triggers when the user wants to plan the content and visual direction of a presentation before generating it. This is the entry-point orchestrator that drives the full slide creation workflow across both HTML and PPTX formats. Examples: "I need to create slides for my conference talk about AI adoption", "can you turn this markdown into a presentation?", "I have a product demo tomorrow and need visual materials", "convert my existing PowerPoint to interactive HTML slides".
version: 0.5.0
context: fork
agent: general-purpose
effort: medium
allowed-tools: Read Write Edit Bash Glob Grep Skill
argument-hint: [topic, content file, or .pptx to convert]

Slide Design — Presentation Planning & Orchestration

Entry-point pipeline for creating professional presentations. This skill orchestrates the full workflow from content planning through format-specific generation, programmatically invoking the `html-slides` or `pptx-slides` skill for the final output.

Execute the steps below in order. Do NOT skip steps or ask the user to choose which steps to run — the pipeline is sequential.

Step 1: Content Discovery

Gather presentation requirements before generating anything. If `$ARGUMENTS` was provided, use it as the topic or content source.

1. **Topic & purpose** — Identify the subject, key message, and call to action 2. **Audience** — Technical level, interests, expected takeaways 3. **Duration & format** — Map to the slide count guidelines below 4. **Language & tone** — Bilingual (e.g., Spanish headings + English terms), formal, playful, meme-driven 5. **Existing content** — Check for PPTX files to convert, markdown outlines, documents to adapt, or template PDFs to reference

Check for per-project settings that override defaults by reading `.claude/slides-ai-plugin.local.md` from the user's project directory (if it exists). This file may contain YAML frontmatter with preferences like default format, theme, language, or speaker-notes style.

Produce: `slide-outline.md` in the working directory with topic, audience, duration, language, and existing content summary.

Immediately continue to Step 2.

Step 2: Structure Planning

Build an outline following the talk-duration-indexed slide count:

| Duration | Slide Count | Structure | |----------|-------------|-----------| | 5 min (Lightning) | 5-7 slides | Hook -> 2-3 key points -> CTA | | 15 min (Short talk) | 12-18 slides | Intro -> 3-4 sections -> Summary -> CTA | | 30 min (Conference) | 25-35 slides | Title -> Agenda -> 5-6 sections -> Q&A | | 45 min (Keynote) | 35-50 slides | Title -> Agenda -> 7-8 sections -> Summary -> CTA | | 60 min (Workshop) | 40-60 slides | Title -> Agenda -> Sections with exercises -> Wrap-up |

Apply the **one idea per slide** rule. Each slide communicates a single concept with supporting evidence.

Slide Type Vocabulary

Tag each slide in the outline with a type: `title`, `section-divider`, `content`, `image-focus`, `comparison`, `quote`, `code`, `feature-grid`, `timeline`, `metrics`, `meme-gif`, `diagram`, `demo-divider`, `audience-question`, `closing`.

Produce: Updated `slide-outline.md` with tagged slide outline.

Format Capabilities (Planning Reference)

Use this table when tagging slide types — some types work better in specific formats:

| Capability | HTML | PPTX | Notes | |------------|------|------|-------| | GSAP animations (timeline, scroll, spring) | Yes | No | Use for cinematic reveals, parallax, scroll-driven navigation | | CSS transitions (fade, scale, blur) | Yes | No | Lightweight entrance animations | | Mermaid diagrams | Yes | No | Flowcharts, sequence diagrams, ER diagrams | | Inline video/embed | Yes | No | YouTube, Loom, demos | | Editable text boxes | No | Yes | Recipients modify content directly in PowerPoint | | Native shapes & charts | No | Yes | Architecture diagrams, org charts via PptxGenJS | | Speaker notes (exportable) | Limited | Yes | PPTX speaker notes integrate with Presenter View | | Offline sharing | No | Yes | PPTX works without a browser/server | | `contenteditable` inline edit | Yes | No | Browser-based live editing before presenting | | Syntax highlighting | Prism.js (CDN) | PptxGenJS `codeToRuns()` | Both supported, different rendering | | Responsive/mobile viewing | Yes | No | HTML adapts to viewport; PPTX is fixed layout |

When tagging slides: prefer `meme-gif`, `diagram`, `timeline` with animations for HTML; prefer `comparison`, `feature-grid`, `metrics` with native shapes for PPTX. Both formats handle `title`, `content`, `quote`, `code`, `image-focus` equally well.

Immediately continue to Step 3.

Step 3: Style Selection

Present 3 distinct visual directions. For each direction, provide: a one-line mood description, the typography pair, primary + accent colors, and the background recipe.

Read style presets from: `${CLAUDE_SKILL_DIR}/references/style-presets.md`

**Mixed-background decks**: Some presentations use multiple background colors across slide groups. When the user's content suggests distinct sections with different moods, propose a mixed-background approach.

Produce: Updated `slide-outline.md` with selected style preset.

Immediately continue to Step 4.

Step 4: Format Selection & Generation

Determine which output format to generate:

• **HTML** — Interactive, animated, browser-based. Best for web sharing, embedded videos, GSAP animations.
• **PPTX** — Editable PowerPoint. Best for corporate settings, offline sharing, template reuse.
• **Both** — Generate HTML for presenting and PPTX for sharing/editing.

If the user already specified a format (or both) in the prompt or in `$ARGUMENTS