/ Directory / Playground / Interactive Slides
← All servers ↗ GitHub
● Community sylvial928 ⚡ Instant

Interactive Slides

by sylvial928 · sylvial928/interactive-slides

Turn content into a beautiful, self-contained animated HTML presentation — Slide Deck, Scroll Story, or Interactive Deck — and optionally export .pptx.

interactive-slides is a Claude Code skill that produces a single HTML file you can open in any browser. Three presentation modes (classic Slide Deck, long-form Scroll Story, exploratory Interactive Deck). GSAP + Google Fonts + Chart.js are CDN-loaded; keyboard/click/touch/swipe/scroll navigation all work out of the box. Optional pptxgenjs export produces an editable .pptx so you can hand off to a stakeholder who lives in PowerPoint.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Live Demo

What it looks like in practice

interactive-slides-skill.replay ▶ ready
0/0

Install

Author repository · Claude Skills documentation

Use Cases

Real-world ways to use Interactive Slides

Turn a one-pager into an investor deck

👤 Founders and PMs building pitches ⏱ ~30 min beginner

When to use: You have the content; you want the shape of a real deck in minutes.

Flow
  1. Invoke the skill
    /interactive-slides — mode: Slide Deck. Content: <one-pager>. Theme: minimal dark.✓ Copied
    → Generates deck.html; opens in browser
  2. Iterate sections
    Add a 'Traction' section with a line chart for MRR.✓ Copied
    → Chart.js line chart rendered inside a slide
  3. Export .pptx
    Export as pitch.pptx.✓ Copied
    → Editable .pptx saved; text fully editable in PowerPoint

Outcome: A deck you can demo today and email as .pptx tomorrow.

Pitfalls
  • Exported .pptx lacks animations — HTML animations don't round-trip; keep the HTML for live talks, .pptx for handoffs
Combine with: mcp-echarts

Build a scroll-story explainer

👤 Technical writers and marketers ⏱ ~60 min intermediate

When to use: You want a Medium-style long-form piece with scroll-triggered visuals.

Flow
  1. Pick the mode
    Mode: Scroll Story. Content: this article. Add scroll-triggered charts and visuals.✓ Copied
    → Output is a scrolling page with GSAP-pinned sections
  2. Tune pacing
    Slow down the pin-scroll on the 'Problem' section.✓ Copied
    → Scrub timeline adjusted

Outcome: An engaging scroll piece your readers actually finish.

Pitfalls
  • Overloading with effects — One animation per section; rest should be quiet

Interactive demo deck for a workshop

👤 Educators and DevRel running workshops ⏱ ~90 min intermediate

When to use: You want slides with small interactive exercises inline.

Flow
  1. Mode: Interactive
    Mode: Interactive Deck. Embed an input field + Chart.js that updates live.✓ Copied
    → Interactive element wired; chart updates on input
  2. Add poll
    Add a 'pick one' slide that records clicks locally and tallies.✓ Copied
    → Local-only counter updates on click

Outcome: A live-feeling deck without a backend.

Combinations

Pair with other MCPs for X10 leverage

interactive-slides-skill + mcp-echarts

Produce charts via ECharts and embed in the deck

Render the revenue chart with mcp-echarts as SVG; embed into the 'Traction' slide.✓ Copied
interactive-slides-skill + claude-code-design-skills

Apply brand tokens to the deck theme

Use the brand-acme tokens for the deck palette and type.✓ Copied
interactive-slides-skill + magic-ui-mcp

Cherry-pick UI components for the Interactive Deck mode

Interactive mode: use a Magic UI marquee for the trust logos slide.✓ Copied

Tools

What this MCP exposes

ToolInputsWhen to callCost
/interactive-slides (SKILL) mode + content + theme Any time you need a deck or scroll-story from content you already have 0

Cost & Limits

What this costs to run

API quota
None
Tokens per call
Moderate — deck content is HTML-long
Monetary
Free
Tip
Keep per-slide prose under 80 words; decks bloat fast otherwise.

Security

Permissions, secrets, blast radius

Credential storage: None
Data egress: GSAP, Google Fonts, Chart.js load from CDN. If you need fully offline, ask the skill to inline the libraries.

Troubleshooting

Common errors and fixes

Slides don't advance on arrow keys

Ensure keyboard listener is bound; some browsers block when the HTML file is served from file://. Try a local server: python3 -m http.server.

Verify: Open dev console; inspect keyup handler
.pptx export missing animations

Animations are HTML-only; .pptx exports text + layout. Use HTML for live; .pptx for email handoff.

Verify: Open the .pptx in PowerPoint; check layout only
Fonts look wrong offline

Ask the skill to embed @font-face with base64 data URIs for offline use.

Verify: Open airplane-mode; load the HTML

Alternatives

Interactive Slides vs others

AlternativeWhen to use it insteadTradeoff
mck-ppt-design-skillYou want consulting-style .pptx slides, not HTMLLess interactive; more slide-polish
mermaid-skillYou need diagrams, not a deckDifferent artifact
markmap-mcp-serverA mind map fits better than a deckDifferent narrative shape

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills

Continue exploring

Related tools and workflows

Choose another guide for your workflow, or explore a collection.

Browse all topic collections → · See 29 new official additions →