openclawv1.0.0

interactive-slides

@webleon⭐ 0 stars· last commit 7mo ago· 0 open issues

Creates interactive, animated web presentations viewable in any browser — not PowerPoint files. Use this skill when the user wants a web-based or browser-viewable presentation, an interactive slide deck, or something more engaging than a static slide file. Perfect for pitches, proposals, data storie

Choose how to use this skill

You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.

1. Native installer

This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.

Do not guess an installer command or replace an existing version without reviewing the diff.

2. Complete package recommended

Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.

No complete ProSkills package is published for this listing yet.

3. Prompt-only

Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.

Need only the instruction file?

Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.

No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.

6.7/10
Verified
Mar 8, 2026

// RATINGS

⭐GitHub Stars
⭐ 0 on GitHubGitHub ↗

New / niche

🟢ProSkills ScoreAI Verified
6.7/10
📍

Not yet listed on ClawHub or SkillsMP

// README

interactive-slides

A Claude Code skill for creating interactive, animated web presentations — with 10 curated style presets, brand kit support, visual style discovery, a structured 6-phase workflow, and one-click fully-editable PowerPoint export.

What it does

Turns your content into a beautiful, self-contained HTML file that opens in any browser. Not a PowerPoint — something alive: animated, polished, and web-native. And when you need to hand it off or edit the text directly, export to a fully editable .pptx in seconds.

You get:

  • A structured discovery workflow (audience → brand/style → outline → build → PPT export)
  • Brand kit support — bring your own colors, fonts, logo, PPT template, or Canva export
  • 10 hand-crafted visual presets to choose from if you don't have a brand kit
  • Three presentation modes: Slide Deck, Scroll Story, or Interactive Deck
  • Full navigation support: keyboard, click, touch, swipe, scroll wheel
  • GSAP animations, Google Fonts, Chart.js — all via CDN, no setup needed
  • Editable .pptx export via pptxgenjs — all text editable in PowerPoint

Installation

Requirements

  • Claude Code CLI installed
  • Node.js + pptxgenjs installed globally (for PPT export only): 
    npm install -g pptxgenjs

Steps

  1. Clone this repository:

    git clone https://github.com/sylvial928/interactive-slides.git

  2. Copy the skill files into your Claude Code skills directory:

    cp -r interactive-slides/ ~/.claude/skills/interactive-slides/

  3. That's it. Restart Claude Code (or start a new session) and the skill will be available.

Verify it's installed

In Claude Code, type:

/interactive-slides

Or just ask: "Create an interactive presentation about X" — Claude will automatically pick up the skill.

Usage

Just describe what you want:

"Create an interactive presentation for our Q1 investor update"

"Turn this PDF into an interactive web deck"

"Make a scroll-based story about our product roadmap"

Claude will walk you through discovery (audience, goal, delivery mode), ask about your brand kit or show style presets, confirm the slide structure, then build. After approval, it will offer a .pptx export.

Using a brand kit

At the start of every session, Claude will ask:

"Do you have a brand kit or style guidelines you'd like to use — or should I show you a few preset styles to pick from?"

You can share any of the following (one is enough):

InputHow
Hex colors + font namesPaste directly: "primary: #2B4EFF, body font: Helvetica Neue"
LogoFile path or URL
PPT templateShare the .pptx file path
Canva Brand KitBrand Kit → copy hex colors, or Share → Download → PowerPoint

Brand colors are applied to both the HTML presentation and the PPT export.

Exporting to PowerPoint

After the HTML is approved, Claude will offer:

"Would you like an editable .pptx version? All text will be directly editable in PowerPoint."

This generates a build-deck.js script and runs it to produce a .pptx file in the same directory. No manual steps required.

File structure

SKILL.md            # Main skill prompt and 6-phase workflow
STYLE_PRESETS.md    # 10 visual presets with CSS variables and font pairings
evals/              # Evaluation cases for testing skill quality

License

MIT — see LICENSE

// REPO STATS

0 stars
0 open issues
Last commit: 7mo ago

// SHARE

Share on XShare on LinkedIn