TED Presentation Skill for Claude Code

A Claude Code skill that generates stunning, single-file HTML presentations in a TED talk style with cinematic dark design, keyboard navigation, animations, and screenshot support.

What It Does

When you ask Claude to create a presentation, slide deck, or pitch deck, this skill:

1. Asks a short quiz (3-4 questions) to understand your topic, audience, language, and style
2. Generates a complete HTML file — no dependencies, no build tools, just open in a browser

Features

• Single HTML file — everything embedded, share it anywhere
• Keyboard navigation — Arrow keys, Space, Enter, number keys (1-9, 0) for quick jump
• Touch/swipe — works on tablets and phones
• Fullscreen — press F
• Fragment reveals — dramatic step-by-step content reveals on click
• Stagger animations — elements animate in sequence when a slide appears
• Progress bar — visual progress indicator at the bottom
• Screenshot support — drop images in img/ folder, reference them in slides
• Meme slides — humor breaks with proper framing

Design System

Dark minimalism inspired by TED and Apple keynotes:

Token	Value	Usage
--bg	#08080a	Background
--accent	#ff6b2c	Warm orange highlights
--teal	#4ecdc4	Secondary accent
--text	#f0ede6	Primary text
--text-dim	#8a8a96	Muted text

Typography:

• Syne (600-800) — headings, big statements
• Literata (400-600) — body text, quotes
• JetBrains Mono (400-500) — labels, code, metrics

All fonts are loaded from Google Fonts. Minimum body font size: 20px for readability at distance.

Installation

Copy the skill to your Claude Code skills directory:

# Clone the repo
git clone https://github.com/Nitrych/ted-presentation-skill.git

# Copy to Claude skills directory
cp -r ted-presentation-skill ~/.claude/skills/ted-presentation

Or manually create ~/.claude/skills/ted-presentation/ and copy SKILL.md + references/ into it.

Usage

Just ask Claude to create a presentation:

Create a presentation about our Q1 results

Сделай презу про внедрение AI в команде

Build a pitch deck for our new product

Claude will ask you a few questions and then generate a complete HTML file.

Trigger Words

The skill activates on: presentation, slide deck, pitch deck, prezu, preza

Adding Images

1. Create an img/ folder next to your HTML file
2. Drop screenshots, diagrams, or memes into it
3. Tell Claude what each image shows — it will place them in the right slides

Slide Structure (TED Talk Arc)

The presentation follows a proven emotional arc:

1. HOOK (1-2 slides) — Provocative opener
2. PROBLEM (1-2 slides) — Why should they care?
3. EVIDENCE (4-6 slides) — Cases with before/after metrics
4. INSIGHT (1-2 slides) — The key revelation
5. HOW (2-4 slides) — Practical tools and workflows
6. ASSESSMENT (1-2 slides) — Where are we now?
7. CALL TO ACTION (1-2 slides) — Specific, actionable steps
8. CLOSE (1 slide) — Memorable ending

Target: 15-22 slides for a 10-15 minute talk.

Key CSS Classes

Class	Purpose
.fragment	Hidden until revealed on click
.stagger	Auto-animates on slide enter
.split	50/50 two-column layout
.split-img-right	Text left, image right (45/55)
.center-content	Centered content
.screenshot-frame	Framed screenshot with shadow
.screenshot-pair	Two screenshots side by side
.meme-frame	Meme image with rounded corners
.label	Uppercase mono label
.tag / .tag.accent / .tag.teal	Pill-shaped tags
.accent	Orange text
.teal	Teal text
.dim	Muted text

Demo

See demo/ai-era-challenges-2026.html for a 10-slide example presentation about the challenges of humanity in the AI era.

License

MIT