# html-ppt-skill

Builds static HTML slide decks using standalone CSS and JavaScript without build pipelines. Helpful when you need an animated presentation right in the browser.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 476 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/html-ppt-skill/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/html-ppt-skill

## What it does

The skill drafts presentation decks on standard HTML, CSS, and JavaScript. It provides 36 switchable visual themes, 31 slide layouts, and 47 animation options, with 20 canvas-based visual effects. Changing the appearance across all slides requires swapping a single CSS stylesheet link.

A presentation structure relies on `assets/base.css`, one theme stylesheet, and `runtime.js`. This runtime script provides slide navigation, keyboard controls, and an overview mode. Decks can be bootstrapped via `./scripts/new-deck.sh <name>`, generating an editable document in the examples folder.

Presentations depend directly on relative paths to the skill's `assets/` folder. Moving an exported `index.html` file without its companion styles and scripts will break both formatting and slide transitions.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/html-ppt-skill/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/html-ppt-skill/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/html-ppt-skill/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/html-ppt-skill/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills html-ppt-skill
```

2. **Manually: put the files in place**
- File: `.github/skills/html-ppt-skill/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/html-ppt-skill
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/html-ppt-skill/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/html-ppt-skill/SKILL.md

## When to use it
- scaffold presentation slides in raw HTML without build tools
- apply pre-styled palettes like dark themes or minimal light layouts
- animate typography and bullet points using CSS entrance classes
- attach interactive canvas visual effects to individual slides

## Example prompts
- Generate an HTML pitch deck using the tokyo-night theme
- Scaffold a fresh deck with `./scripts/new-deck.sh my-talk` and add bullet slides
- Configure a two-column slide layout with animated text entry

## Similar
- [html-ppt-retro-quarterly-review](https://affpapa.org/en/nevibecode/skills/html-ppt-retro-quarterly-review.md) — skill · 2800 installs
- [dokie-ai-ppt](https://affpapa.org/en/nevibecode/skills/dokie-ai-ppt.md) — skill · 984 installs
- [html-to-ppt](https://affpapa.org/en/nevibecode/skills/html-to-ppt.md) — skill · 5000 installs
- [revealjs](https://affpapa.org/en/nevibecode/skills/revealjs.md) — skill · 736 installs
- [ppt-visual](https://affpapa.org/en/nevibecode/skills/ppt-visual.md) — skill · 12100 installs
- [ppt-generation](https://affpapa.org/en/nevibecode/skills/ppt-generation.md) — skill · 5200 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 199 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md