html-slides

HTML Slides

Yes I currently have time to maintain, so PR welcomed.

A skill for creating stunning, animation-rich HTML presentations — from scratch, by converting PowerPoint files, or by converting any existing HTML. Works with AI coding agents (Claude Code, Gemini CLI, GitHub Copilot, OpenAI Codex).

htmlslides.com | Quick Start | Live Demo: Introducing HTML Slides

What This Does

HTML Slides helps non-designers create beautiful web presentations without knowing CSS or JavaScript.

Default mode: Pro (Obsidian) — Just say "create a presentation about [topic]" and you get interactive components, charts, and polished animations out of the box. No mode selection needed.

It also offers a Vibe mode with 12 creative themes for non-technical presentations — say "create a vibe presentation" to use it.

Key Features

• Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools, no frameworks.
• Agent Skills Standard — One install works across Claude Code, Gemini CLI, GitHub Copilot, and OpenAI Codex.
• Visual Style Discovery — Can't articulate design preferences? Pick from generated visual previews.
• Rich Component Library — Flip cards, expandable cards, code blocks, architecture flows, stats cards, charts (via Chart.js), tables, timelines, and more.
• PPT Conversion — Convert existing PowerPoint files to web, preserving all images and content.
• HTML Conversion — Convert any HTML file (reveal.js, Marp, Google Slides exports, articles, generic pages) into HTMLSlides format.
• Anti-AI-Slop — Curated distinctive styles that avoid generic AI aesthetics.

Installation

Quick Install (Recommended)

curl -sSL https://raw.githubusercontent.com/bluedusk/html-slides/main/remote-install.sh | bash

This one command clones the repo, detects your agents, and sets up everything. Run the same command again to update.

Install from cloned repo

git clone https://github.com/bluedusk/html-slides.git
cd html-slides
./install.sh

Interactive installer with user-level vs project-level scope choice.

Manual Install

Pick your agent(s) below. Replace /path/to/html-slides with the actual path to your cloned repo.

Claude Code

Via plugin marketplace (recommended):

claude plugin marketplace add bluedusk/html-slides
claude plugin install html-slides

Via skill symlink:

# User-level (available in all projects)
ln -s /path/to/html-slides ~/.claude/skills/html-slides

# Project-level (available only in current project)
ln -s /path/to/html-slides .claude/skills/html-slides

Gemini CLI

# User-level (available in all projects)
ln -s /path/to/html-slides ~/.gemini/skills/html-slides

# Project-level (available only in current project)
ln -s /path/to/html-slides .gemini/skills/html-slides

GitHub Copilot

# Project-level only (Copilot reads .github/skills/)
ln -s /path/to/html-slides .github/skills/html-slides

OpenAI Codex

# User-level (available in all projects)
ln -s /path/to/html-slides ~/.codex/skills/html-slides

# Project-level (available only in current project)
ln -s /path/to/html-slides .codex/skills/html-slides

All agents also support the universal ~/.agents/skills/ path as defined by the Agent Skills standard.

Updating

Re-run the install command to update:

curl -sSL https://raw.githubusercontent.com/bluedusk/html-slides/main/remote-install.sh | bash

For Claude Code plugin specifically:

claude plugin marketplace update html-slides
claude plugin update html-slides@html-slides

Restart your agent after updating.

Two Modes

HTML Slides offers two modes. Pro is the default — if you don't specify a mode, you get the full interactive component system.

Pro Mode (Default)

Structured interactive components with deterministic output. The AI maps your content to the right component type automatically. Multiple themes available — same components, different visual styles.

"Create a presentation about [topic]"

or specify a theme:

"Create a presentation about [topic] using the Excalidraw theme"

Available themes: