slides-ai-plugin

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

1. Fork this repository
2. Customize skills, presets, and helpers for your brand
3. 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:

1. Content discovery — topic, audience, duration, tone, existing content
2. Structure planning — duration-indexed slide count with tagged slide types
3. Style selection — pick from 12 curated presets or mix backgrounds per section
4. Format selection — HTML, PPTX, or both
5. Generation — delegates to html-slides or pptx-slides
6. 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