Slides AI Plugin

https://github.com/user-attachments/assets/3c7250dd-59d7-4eea-835b-12a3c0871bb3

Turn any idea, outline, or existing deck into a professional presentation — straight from Claude Code. Generate animated HTML decks (GSAP + CSS, single-file, viewport-fitted) or fully editable PowerPoint (.pptx) files with 12 curated style presets, adaptive typography, layout validation, and speaker notes — just ask Claude.

Quick Start

Installation

Option 1: CLI Install (Recommended)

Use npx skills to install skills directly:

# Install the skill
npx skills add proyecto26/slides-ai-plugin

# List available skills
npx skills add proyecto26/slides-ai-plugin --list

This automatically installs to your .claude/skills/ directory.

Option 2: Claude Code Plugin

Install via Claude Code's built-in plugin system:

# Add the marketplace
/plugin marketplace add proyecto26/slides-ai-plugin

# Install the plugin
/plugin install slides-ai-plugin

Option 3: Clone and Copy

Clone the repo and copy the skills folder:

git clone https://github.com/proyecto26/slides-ai-plugin.git
cp -r slides-ai-plugin/skills/* .claude/skills/

Option 4: Git Submodule

Add as a submodule for easy updates:

git submodule add https://github.com/proyecto26/slides-ai-plugin.git .claude/slides-ai-plugin

Then reference skills from .claude/slides-ai-plugin/skills/.

Option 5: Fork and Customize

Fork this repository
Customize skills, presets, and helpers for your brand
Clone your fork into your projects

Generate Your First Deck

Just describe what you want:

"Create a 15-minute conference talk about AI adoption for engineering teams, with a bold editorial style — both HTML and PPTX."

That's it — the skill handles everything: content discovery, structure planning, style selection, slide generation, and validation. Outputs land in your working directory as .html and/or .pptx files.

Features

Orchestrated Pipeline

The slide-design skill drives the full workflow from raw idea to validated deck. It handles:

Content discovery — topic, audience, duration, tone, existing content
Structure planning — duration-indexed slide count with tagged slide types
Style selection — pick from 12 curated presets or mix backgrounds per section
Format selection — HTML, PPTX, or both
Generation — delegates to html-slides or pptx-slides
Validation — density limits, speaker notes, overlaps, viewport fitting

Supported Formats

Format	Output	Best For	Key Capabilities
HTML	Single `.html` file	Conference talks, web sharing, live demos	GSAP timelines, CSS animations, viewport fitting, Mermaid diagrams, inline video, `contenteditable` live edit
PPTX	OOXML `.pptx`	Corporate sharing, offline editing, templates	Native text boxes, editable shapes, speaker notes, master layouts, adaptive font sizing

Duration-Indexed Structure

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

Slide Type Vocabulary

Every slide is tagged with a type — the generator picks the right template and density rules:

title, section-divider, content, image-focus, comparison, quote, code, feature-grid, timeline, metrics, meme-gif, diagram, demo-divider, audience-question, closing.

Style Presets

12 curated visual identities with typography pairs, color palettes, and signature elements:

darkMonospace, swissModern, boldSignal, darkBotanical, cleanCorporate, neonCyber, warmMinimal, vintageEditorial, terminalGreen, gradientWave, midnightBlue, paperInk.

Mix presets across sections for multi-mood decks (e.g., cream for content, black for demos, accent color for section dividers).

HTML Generation Highlights

Single-file, zero runtime deps — inline CSS/JS, no build step
Viewport-fitted — every slide locks to 100vh/100dvh with overflow: hidden, clamp() typography
GSAP animations — timelines, SplitText, ScrollTrigger, spring physics (Remotion-inspired damping presets)
CSS-first fallback — animations work with JS disabled via staggered .reveal classes
Accessibility — prefers-reduced-motion respected, semantic HTML
Mermaid + Prism.js — flowcharts, sequence diagrams, syntax-highlighted code
Inline edit mode — contenteditable attributes let users tweak text in the browser

PPTX Generation Highlights

PptxGenJS + Bun — TypeScript helpers run with npx -y bun, no build step
skia-canvas text measurement — autoFontSize() fits paragraphs to exact boxes; scale() is the PPTX equivalent of CSS clamp()
Layout validators — overlap detection, bounds checking, alignment/distribution helpers
High-level builders — addFeatureGrid(), addCardRow(), addTimeline(), addMetricsRow(), addComparisonTable()
Decorative personality — addStaircase(), addSectionBadge(), addProgressBar(), addSlideNumber()
Syntax highlighting — codeToRuns() converts Prism.js tokens into PptxGenJS text runs
Pre-save validation — validateDeck() enforces font minimums, bullet caps, speaker notes, boundaries
Editable by design — native text boxes, native shapes, grouped elements, speaker notes on every content slide

Automatic Validation Hooks

Built-in PostToolUse and Stop hooks inspect every generated file:

PPTX → verifies h.validateDeck() was run and speaker notes exist
HTML → verifies viewport CSS (100vh/100dvh), prefers-reduced-motion, and clamp() typography
Stop → blocks task completion if slides were requested but not delivered with speaker notes

PPTX → HTML Conversion

Bring legacy decks into the modern web:

python ${CLAUDE_PLUGIN_ROOT}/skills/html-slides/scripts/extract-pptx.py deck.pptx

Extracts text, images, and speaker notes into JSON — then the slide-design skill rebuilds it as an animated HTML presentation with your chosen style preset.

Usage Examples

Just describe what you need to Claude — the slide-design orchestrator triggers automatically:

"I need to create slides for my 30-min conference talk on AI adoption for engineering teams"

Runs content discovery → structure planning → style selection → generates both HTML and PPTX.

"Convert this PPTX into an interactive HTML deck with GSAP animations"

Extracts text/images/notes from the .pptx, rebuilds as a single-file animated HTML with viewport fitting.

"Turn my markdown outline into a pitch deck with the boldSignal style"

Applies the boldSignal preset, maps bullets to slide types, generates .pptx with validation.

"Create a 5-minute lightning talk with meme-driven tone and a mixed-background deck"

Structures 5-7 slides, alternates backgrounds per section, injects meme/GIF slides.

"Generate a corporate pitch deck (PPTX only) with editable shapes and speaker notes"

Uses cleanCorporate preset, native shapes for diagrams, slide.addNotes() on every content slide.

"Build a workshop deck with code slides, timelines, and feature grids"

Applies density limits, splits long content automatically, uses addTimeline() / addFeatureGrid() / codeToRuns().

Configuration

Per-Project Overrides

Create .claude/slides-ai-plugin.local.md in your project to override defaults. The orchestrator reads YAML frontmatter from this file:

---
default_format: pptx
default_preset: darkMonospace
default_language: en
speaker_notes_style: conversational
aspect_ratio: 16:9
---

Environment Variables

Variable	Description
`CLAUDE_PLUGIN_ROOT`	Plugin install root (auto-set by Claude Code; used to resolve bundled scripts)
`CLAUDE_SKILL_DIR`	Active skill directory (auto-set; used to resolve `references/` paths)

Runtime Dependencies

Dependencies are auto-installed on first run — no manual setup required:

Runtime	Why
Bun (via `npx -y bun`)	Runs PPTX TypeScript helpers without a build step
pptxgenjs	OOXML `.pptx` generation
skia-canvas	Font-aware text measurement for `autoFontSize()`
fontkit, linebreak	Typography metrics and line-breaking
prismjs	Syntax highlighting (shared between HTML and PPTX paths)
python3 + python-pptx	PPTX → HTML conversion (`extract-pptx.py`, only needed for PPTX import)

Project Structure

slides-ai-plugin/
├── .claude-plugin/
│   ├── plugin.json                  # Plugin manifest
│   └── marketplace.json             # Marketplace metadata
├── hooks/
│   └── hooks.json                   # PostToolUse + Stop validation hooks
├── skills/
│   ├── slide-design/                # Entry-point orchestrator
│   │   ├── SKILL.md                 # 5-step pipeline (discovery → validation)
│   │   └── references/
│   │       ├── style-presets.md     # 12 curated visual identities
│   │       └── design-principles.md # Typography, color, layout, a11y
│   ├── html-slides/                 # HTML generator
│   │   ├── SKILL.md                 # GSAP, viewport rules, slide templates
│   │   ├── assets/
│   │   │   └── viewport-base.css    # Mandatory viewport CSS
│   │   ├── references/
│   │   │   ├── html-template.md     # Boilerplate + slide type templates
│   │   │   └── animation-patterns.md# CSS + GSAP recipes
│   │   └── scripts/
│   │       └── extract-pptx.py      # PPTX → JSON extraction
│   └── pptx-slides/                 # PPTX generator
│       ├── SKILL.md                 # PptxGenJS workflow + validation
│       ├── references/
│       │   ├── pptxgenjs-helpers.md # Helper API reference
│       │   └── slide-patterns.md    # Slide type dimensions + positioning
│       └── scripts/
│           ├── main.ts              # CLI entry + library re-exports
│           ├── theme.ts             # 12 presets, createTheme, resolveFont
│           ├── text.ts              # autoFontSize, scale, skia-canvas measurement
│           ├── layout.ts            # Overlap detection, alignment, bounds
│           ├── layout_builders.ts   # addFeatureGrid, addCardRow, addTimeline, ...
│           ├── decorative.ts        # addStaircase, addSectionBadge, addProgressBar
│           ├── validation.ts        # validateDeck pre-save quality check
│           ├── code.ts              # Prism.js → PptxGenJS text runs
│           ├── image.ts             # Binary dimension detection, sizing
│           ├── svg.ts               # SVG sanitization + base64 encoding
│           ├── util.ts              # Shadows, colors, unit conversion
│           └── types.ts             # Shared TypeScript interfaces
├── LICENSE
└── README.md

For full skill docs, see skills/slide-design/SKILL.md, skills/html-slides/SKILL.md, and skills/pptx-slides/SKILL.md.

Architecture

graph TB
    subgraph "Claude Code"
        A["User Prompt"] --> B["slide-design Skill"]
    end

    subgraph "Orchestration Pipeline"
        B --> C1["1. Content Discovery"]
        C1 --> C2["2. Structure Planning"]
        C2 --> C3["3. Style Selection"]
        C3 --> C4["4. Format Selection"]
    end

    subgraph "Generators"
        C4 --> H["html-slides Skill"]
        C4 --> P["pptx-slides Skill"]
    end

    subgraph "HTML Pipeline"
        H --> H1["Viewport Base CSS"]
        H --> H2["GSAP + CSS Animations"]
        H --> H3["Mermaid / Prism.js"]
        H1 --> HO["Single-file .html"]
        H2 --> HO
        H3 --> HO
    end

    subgraph "PPTX Pipeline"
        P --> P1["Theme Presets"]
        P --> P2["Layout Builders"]
        P --> P3["Text Measurement"]
        P1 --> PV["validateDeck()"]
        P2 --> PV
        P3 --> PV
        PV --> PO[".pptx File"]
    end

    subgraph "Validation Hooks"
        HO --> V["PostToolUse Hook"]
        PO --> V
        V --> S["Stop Hook"]
    end

    style A fill:#7c3aed,color:#fff
    style B fill:#1a73e8,color:#fff
    style H fill:#ea4335,color:#fff
    style P fill:#34a853,color:#fff
    style HO fill:#fbbc04,color:#000
    style PO fill:#fbbc04,color:#000
    style V fill:#7c3aed,color:#fff

How It Works

sequenceDiagram
    participant U as User
    participant C as Claude Code
    participant SD as slide-design
    participant HS as html-slides
    participant PS as pptx-slides
    participant H as Hooks

    U->>C: "Create a 30-min conference talk on AI adoption"
    C->>SD: Invoke slide-design skill

    SD->>SD: 1. Content discovery (topic, audience, duration)
    SD->>SD: 2. Structure planning (25-35 slides, typed)
    SD->>SD: 3. Style selection (preset or mixed)
    SD-->>U: Present 3 visual directions
    U-->>SD: Pick "boldSignal" + both formats

    Note over SD,HS: Generate HTML first
    SD->>HS: Generate HTML with outline + preset
    HS->>HS: Apply viewport-base.css
    HS->>HS: Build slides + GSAP timelines
    HS-->>C: Write deck.html
    C->>H: PostToolUse hook
    H-->>C: Verify 100vh/100dvh, clamp(), reduced-motion

    Note over SD,PS: Then generate PPTX
    SD->>PS: Generate PPTX with outline + preset
    PS->>PS: createTheme(PRESETS.boldSignal)
    PS->>PS: Build with layout_builders
    PS->>PS: validateDeck(pptx)
    PS-->>C: Write deck.pptx
    C->>H: PostToolUse hook
    H-->>C: Verify validateDeck + speaker notes

    C->>H: Stop hook
    H-->>C: Confirm both files delivered
    C-->>U: "Deck saved to deck.html and deck.pptx"

Why Two Formats?

HTML and PPTX solve different problems — they're not interchangeable, so the orchestrator supports both and can generate them side-by-side:

Need	Format
Animated conference talk, live demo, web embed	HTML
Offline sharing, recipient-edits, corporate template	PPTX
Talk you present and hand off afterward	Both

Text Measurement in PPTX

PowerPoint has no clamp() — but scale() approximates it, and autoFontSize() goes further by measuring actual rendered width via skia-canvas with real font metrics (fontkit) and proper line-breaking (linebreak). This means a 400-character paragraph fits its text box precisely, not by guessing.

Layout Validation

validateDeck(pptx) runs before every save:

Check	Rule
Element overlaps	Bounding-box intersection tests per slide
Slide boundaries	Every element must fit within `10" × 5.625"`
Font minimums	No text below 14pt (18pt preferred for body)
Bullet caps	Max 6 bullets per slide
Speaker notes	Every content slide requires `slide.addNotes()`

Content Density Limits

Exceeding limits triggers automatic splitting — never cram content. Minimum body text is 18pt (non-negotiable).

Slide Type	Maximum Content
Title	1 heading + 1 subtitle + optional image
Section divider	1 heading + 1 sentence
Content	1 heading + 4-6 bullet points
Image focus	1 heading + 1 image + 1 caption
Comparison	1 heading + 2 columns (3-4 items each)
Quote	1 quote + attribution
Code	1 heading + 1 code block (max 15 lines)
Feature grid	1 heading + max 6 cards
Timeline	1 heading + max 5 milestones
Metrics	3-4 large numbers with labels

Anti-Patterns the Plugin Avoids

Font soup — never more than 2 font families
Color rainbow — 60-30-10 rule, max 3 colors
Wall of text — keywords and phrases, not paragraphs
Transition carnival — one entrance animation, applied consistently
AI slop aesthetics — no purple gradients + Inter everywhere; every deck has a distinct identity
Scrollable slides (HTML) — overflow: hidden is mandatory
Text below 14pt (PPTX) — enforced by validateDeck()
Hardcoded colors / font sizes (PPTX) — use theme tokens and scale() / autoFontSize()

🌟 Star History

💜 Sponsors

This project is free and open source. Sponsors help keep it maintained and growing.

Become a Sponsor | Sponsorship Program

🤝 Contribution

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated ❤️.

You can learn more about how you can contribute to this project in the contribution guide.

⚖️ License

This repository is available under the MIT License.

👍 Credits

PptxGenJS — OOXML PowerPoint generation in JavaScript
GSAP — Animation engine powering HTML timelines, SplitText, and ScrollTrigger
skia-canvas — Font-aware text measurement backbone of autoFontSize()
Prism.js — Syntax highlighting shared across HTML and PPTX code slides
Mermaid — Diagrams-as-code for HTML technical decks

Happy vibe coding 💯

Made with ❤️ by Proyecto 26 - Changing the world with small contributions.

One hand can accomplish great things, but many can take you into space and beyond! 🌌

Together we do more, together we are more ❤️ <img width="150px" src="https://avatars0.githubusercontent.com/u/28855608?s=200&v=4" align="right">