Agent Skill · Open Source · 2026

SLIDES SKILL

Transform ideas into stunning HTML presentations.
32 beautiful templates. 4 built-in themes. One command away.

32 Templates 4 CSS Themes Self-Contained HTML
Overview

What Is Slides Skill?

An Agent Skill that transforms your ideas into pixel-perfect HTML presentations. No PowerPoint. No Google Slides. Just describe your topic, pick a template, and get a self-contained HTML deck.

Works in two modes: Workflow A offers 32 hand-crafted templates for polished decks. Workflow B delivers instant self-contained output using built-in CSS themes — zero template selection needed.

By the Numbers

The Collection

32
Templates
4
CSS Themes
1
HTML File
0
Dependencies
Core Systems

Two Workflows

Workflow A

Beautiful Templates

32 professionally-designed HTML templates. Best for polished, visually distinctive presentations.

  • Editorial, retro, brutalist, corporate
  • Animated transitions & reveals
  • Template preview before building
  • Custom fonts & color palettes

Workflow B

Built-in CSS Themes

4 self-contained CSS themes. Fast, minimal output for quick focused decks.

  • Cyberpunk · Corporate · Minimal · Nature
  • Single-file, zero dependencies
  • Instant generation
  • Perfect for tech talks & reports
Workflow A

32 Beautiful Templates

Pick based on occasion and mood. The skill shows you 3 candidates with live title-slide previews.

Workflow B

4 Built-in CSS Themes

Self-contained single-file output. No template selection needed.

Cyberpunk
Dark · Neon · Futuristic
Corporate
Light · Professional · Blue
Minimal
Black · White · Swiss
Nature
Cream · Green · Organic
Decision Guide

Which Workflow?

Use Workflow A when...

You want a visually distinctive deck. You have time to compare 3 templates. You need animated transitions, custom fonts, and a specific mood.

→ Go with Workflow A for pitches, keynotes, client presentations

Use Workflow B when...

You need a quick deck. You know which theme you want. You want a single self-contained HTML file with zero external dependencies.

→ Go with Workflow B for stand-ups, tech talks, internal reports
Workflow A Process

How It Works

1

Describe Your Topic

Tell the skill what you want to present — product launch, tech talk, research findings, team review.

2

Pick Your Template

The skill shows 3 candidates with live title-slide previews. Choose the one that fits your vibe.

3

Review & Refine

The skill builds the full deck. Add, remove, or reorder slides to match your content outline.

4

Open & Present

Get a self-contained index.html. Open in any browser — keyboard, click, or swipe to navigate.

Capabilities

Built-in Features

  • Keyboard navigation (arrow keys)
  • Click & touch / swipe support
  • Animated slide transitions
  • Staggered content reveals
  • Progress dots & slide counter
  • Fully responsive scaling
  • Self-contained single HTML file
  • No external JS dependencies
  • Custom fonts per template
  • Custom color palettes
  • Bar charts & stat layouts
  • Split layouts & quote slides
Output

Where Are Files Saved?

Default Output
~/slides/<deck-name>/index.html
Preview Files (Workflow A)
~/slides/<deck-name>/previews/
Custom Path

You can specify any output directory: "save it to ~/my-decks" or "output to /tmp/slides"

Get Started

Try It Now

Workflow A — Templates

"Create a presentation about our Q3 product roadmap for a team review"

Workflow B — Theme

"Make a cyberpunk presentation on AI agent architectures"

Install

One Command Setup

npx skills add yugasun/slides-skills

Requires Claude Code. After install, just start a conversation and describe what you want to present.

Or just tell Claude Code what you want:

Install the slides skill https://github.com/yugasun/slides-skills
Inspiration

What Can You Build?

LEVEL UP
YOUR DECK

Stop wrestling with slide software. Start creating presentations that actually look like you gave a damn.

1 / 14