Agent skill

Narrated HTML Presentations

by glebis in glebis/claude-skills

Generates a self-contained HTML presentation with article and slides modes, ElevenLabs voiceover narration and optional GPT Image 2 illustrations.

MITAuto-check: notesDocuments & Office

Install Narrated HTML Presentations

skills CLI
$ npx skills add glebis/claude-skills --skill present -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install glebis/claude-skills present --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/present .claude/skills/present && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
present
GitHub stars
388
Token cost
~2.3k tokens
SKILL.md length
923 words
Files
5 (incl. scripts, references, assets)
Skills in repo
91
Repo updated
First seen
Licence
MIT

At a glance

Generates a self-contained HTML presentation with article and slides modes, ElevenLabs voiceover narration and optional GPT Image 2 illustrations.

  • Works in 7 steps: Content Analysis → Slide Planning → Generate Audio → …
  • Turning research notes into a presentation that doubles as a readable article
  • SKILL.md covers What This Skill Produces, Quick Start, Parameters and Workflow, plus 2 more sections
  • Runs Python scripts from its folder; calls python3 and vercel; needs ELEVENLABS_API_KEY

What it does

Output is a single `index.html` plus audio and optional image assets, which opens locally, deploys to a static host such as Vercel or Netlify, or is shared as a folder. Viewers toggle between article mode, a scrollable report with Tufte-inspired typography, and slides mode, which has keyboard or click navigation and narrated audio playback. Scroll-reveal animations are included, and `assets/template.html` and `references/slide-types.md` support the build.

Parameters set the slide count (5 to 20, default 12), the detail level (executive, standard or detailed), the narrator voice (default daniel), an image style or none, the output folder, a deploy target, the title, and `--no-audio` to skip narration. Executive runs 5 to 7 slides, standard 10 to 14 and detailed 15 to 20. Narration uses the ElevenLabs API with the key read as `ELEVENLABS_API_KEY` from a `.env` file in the elevenlabs-tts skill folder, and a `scripts/generate_audio.py` helper is bundled.

When your agent uses it

  • Turning research notes into a presentation that doubles as a readable article
  • Producing a narrated briefing for stakeholders who will not attend live
  • Making a shareable deck that can be hosted as a static page

Example prompts

  • “/present research/ai-adoption.md --detail detailed --voice alice”
  • “Make a narrated deck from these meeting summaries at executive level, with no images.”
  • “Present the quarterly findings as 12 slides with risograph illustrations and deploy it to Vercel.”

Requirements

  • An ElevenLabs API key available as `ELEVENLABS_API_KEY`
  • Access to GPT Image 2 for the optional illustrations

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Content Analysis
  2. Slide Planning
  3. Generate Audio
  4. Generate Images (if enabled)
  5. Build HTML
  6. Test
  7. Deploy (if requested)

What it can do on your machine

Read from SKILL.md and the folder at commit 7524dff. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • vercel

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use vercel, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • ELEVENLABS_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Narrated HTML Presentations loads about 2.3k tokens when it runs, and up to ~3.8k if it reads all its reference files. Until then it costs about 188 tokens; SKILL.md has 923 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~188
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:54
    lable in `~/claude-skills/elevenlabs-tts/.env` as `ELEVENLABS_API_KEY`.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from glebis/claude-skills at commit 7524dff, republished under its MIT licence (© glebis). 923 words, ~2,279 tokens.

Download SKILL.mdSave it as .claude/skills/present/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
present
description
Generate interactive HTML presentations with professional ElevenLabs voiceover narration synced to slides. Supports dual article/slides mode, scroll-reveal animations, GPT Image 2 illustrations, and configurable detail levels. Use this skill when the user wants to create a presentation, slide deck, narrated briefing, research report with voiceover, or any content that should be presentable as both a readable article and a navigable slide deck. Also triggers on "make a presentation", "create slides", "present this", "narrated deck", "voiceover slides", "briefing with audio", or requests to turn research/notes into a shareable presentation. Works with any content — research findings, meeting summaries, proposals, educational material.

Present — Narrated Interactive Presentations

Generate a self-contained HTML presentation with dual article/slides mode, ElevenLabs narration, optional GPT Image 2 illustrations, and scroll-reveal animations.

What This Skill Produces

A single index.html file (plus audio and optional image assets) that can be:

  • Opened locally in a browser
  • Deployed to Vercel, Netlify, or any static host
  • Shared as a folder

The output has two modes the viewer can toggle between:

  1. Article mode — long-form scrollable report with Tufte-inspired typography
  2. Slides mode — navigable presentation with keyboard/click navigation and narrated audio playback

Quick Start

/present "AI adoption research for Arseny" --slides 12 --voice daniel --images risograph

Or with a file:

/present path/to/research.md --detail detailed --voice alice

Parameters

ParameterValuesDefaultDescription
--slides5-2012Number of slides
--detailexecutive, standard, detailedstandardContent depth
--voiceElevenLabs voice namedanielNarrator voice
--imagesstyle name or nonenoneImage generation style
--image-promptcustom stringautoOverride image prompt prefix
--outputpath./presentation/Output directory
--deployvercel project or nonenoneAuto-deploy target
--titlestringautoPresentation title
--no-audioflagfalseSkip audio generation
Detail Levels
  • executive (5-7 slides): Key findings only. One stat slide, one recommendation slide, sources. Best for busy stakeholders who need the bottom line.
  • standard (10-14 slides): Full narrative arc. Problem, evidence, analysis, recommendations, sources. The default for most presentations.
  • detailed (15-20 slides): Deep dive. Includes methodology, multiple evidence sections, case studies, detailed recommendations with implementation steps.
Voice Options

Uses ElevenLabs API. The key must be available in ~/claude-skills/elevenlabs-tts/.env as ELEVENLABS_API_KEY.

Recommended voices for presentations:

  • daniel — Steady Broadcaster, British, formal (default)
  • alice — Clear Educator, British, professional
  • matilda — Knowledgeable, American, upbeat
  • brian — Deep Resonant, American, comforting
  • george — Warm Storyteller, British, mature
Image Styles

When --images is set, the skill generates illustrations for key slides using GPT Image 2 (~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py). Available styles:

  • risograph — Gerd Arntz isotype style, muted colors, sand texture
  • editorial — Magazine photography style, dramatic lighting
  • blueprint — Technical drawing aesthetic, white on blue
  • ink — Black ink illustration, hand-drawn feel
  • constellation — Data visualization aesthetic, dots and lines
  • Custom: pass --image-prompt "your style description" to override

Images are generated in --draft mode first (~$0.006/image). The skill decides which slides benefit from illustration (typically 3-5 out of 12).

Workflow

Step 1: Content Analysis

Read the input content (a topic description, a markdown file, vault notes, meeting transcript, or research). Identify:

  • The core argument or narrative
  • Key data points and statistics
  • Natural section breaks
  • Quotable findings with sources
Step 2: Slide Planning

Based on --detail and --slides, create a slide plan. Each slide needs:

Slide N: [Type] — [Title]
Content: [what appears on screen]
Narration: [what the voice says — always more than what's on screen]
Read time: [seconds for an average reader to absorb the visual content]
Image: [yes/no, with prompt if yes]

Slide types: title, summary, stat, evidence, comparison, quote, framework, recommendation, case-study, sources

The narration script should be conversational and add context beyond what's displayed. It should NOT just read the slide text aloud — it should explain, connect, and elaborate. Target 15-30 seconds of narration per slide.

Step 3: Generate Audio

For each slide, generate narration using ElevenLabs:

bash
python3 ~/.claude/skills/elevenlabs-tts/scripts/elevenlabs_tts.py \
  --voice <voice_name> \
  --text "<narration>" \
  --output <output_dir>/audio/slide-<N>.mp3

Or use the direct API via the script at scripts/generate_audio.py in this skill.

Also generate a transition sound (Rhodes chord) for slide-to-slide transitions.

After generation, get durations with ffprobe to calculate slide timing.

Step 4: Generate Images (if enabled)

For slides that benefit from illustration, generate images using GPT Image 2:

bash
python3 ~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py --draft --size 1536x1024 \
  "<style prefix> <slide-specific prompt>" \
  <output_dir>/images/<name>.png

Typically generate 3-5 images for a 12-slide deck. Choose slides where a visual metaphor strengthens the point — stat slides, concept slides, and the title slide are good candidates. Don't illustrate every slide.

Show full SKILL.md (384 more words)Show less
Step 5: Build HTML

Use the template at assets/template.html as the base. The template includes:

  • Typography: EB Garamond (body) + DM Sans (labels/numbers)
  • Color palette: Configurable via CSS variables in :root
  • Article mode: Tufte-inspired layout with executive summary box, stat cards, two-column sections, data tables
  • Slides mode: Full-viewport slides with fade transitions, keyboard navigation (arrows, space), dot indicators
  • Audio engine: Single reusable <audio> element, slide-synced playback with progress bar, transition sounds between slides
  • Auto-hide controls: Top bar (mode switcher + audio) appears when cursor enters top 20% of viewport. Bottom nav appears in bottom 20%. Shift+. toggles always-show/always-hide/zone mode.
  • Scroll-reveal animations: Intersection Observer-based fade-up for sections, staggered stat cards, animated counters, h2 rule-draw effect
  • prefers-reduced-motion: All animations disabled when user prefers reduced motion

Populate the template by replacing placeholder sections with the actual slide and article content.

Step 6: Test

Open in browser using /real-browser or open <path>. Verify:

  • Article mode renders correctly, images load
  • Slides mode: all slides navigable, text fits within viewport
  • Audio plays when play button is clicked
  • Audio syncs to slide advancement (each slide waits for narration + read time)
  • Transition sounds play between slides
  • Auto-hide works for top and bottom bars
  • Keyboard navigation (arrows, space) works in slide mode
Step 7: Deploy (if requested)

If --deploy is set, copy output to the target project's public/ folder and deploy:

bash
cp -r <output_dir>/* <project_path>/public/<slug>/
cd <project_path> && vercel deploy --prod --yes

HTML Architecture

Audio Sync Model

Each slide has three timing properties:

  • data-audio="slide-name" — maps to audio file
  • data-read-time="N" — seconds for reading the visual content

The audio engine calculates: slide_duration = max(audio_duration, read_time) + 2s. After narration ends, it waits for any remaining read time plus a 2-second buffer, plays a transition sound (1.8s), then advances to the next slide.

Avoiding AI-Looking Formatting

The following patterns read as AI-generated and should be avoided:

  • Colored left-bar + bold heading + description blocks (finding cards)
  • Large italic pull quotes with colored left border
  • Uniform card grids with icon + heading + description
  • Gradient text on metrics

Instead use:

  • Natural prose paragraphs with inline emphasis
  • Definition lists (<dl>) for structured points
  • Tables for comparisons
  • Direct statements woven into flowing text
Image Paths

Use absolute paths from the deployment root: /slug/images/name.png, not relative paths. Relative paths break when URLs load without trailing slashes.

Files

  • SKILL.md — This file
  • scripts/generate_audio.py — ElevenLabs TTS batch generator
  • assets/template.html — Base HTML template with all CSS/JS
  • references/slide-types.md — Detailed slide type specifications and examples

© glebis, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts, references, assets) in present of glebis/claude-skills.

  • SKILL.md
  • README.md
  • assets/template.html
  • references/slide-types.md
  • scripts/generate_audio.py

Open the folder on GitHubat commit 7524dff

Compare with similar skills

Narrated HTML Presentations next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Narrated HTML Presentations compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Narrated HTML Presentations this skillglebis/claude-skills388—~2.3kAutomated safety check: NotesMIT
Video Productionspeechlab0210/video-production-skill105—~4.1kAutomated safety check: NotesMIT
Academic Presentation MakerOpenLAIR/dr-claw1.2k—~1.5kAutomated safety check: PassCustom licence
Book Media Generatordmccreary/ibook-skills105—~1.7kAutomated safety check: PassCC-BY-NC-4.0
Web Video PresentationConardLi/garden-skills13k—~3.5kAutomated safety check: PassMIT
Local AI Useamd/skills395—~5kAutomated safety check: NotesMIT

Similar skills

  • Video Production

    speechlab0210/video-production-skill

    AI educational video production pipeline. An agent skill from speechlab0210/video-production-skill.

    105 GitHub stars~4.1k tokensUpdated 3 mo ago
    Media & CreativeAuto-check: notes
  • Turns a research paper into a slide deck and, optionally, a narrated demo video, through script, slide generation, text-to-speech and video assembly stages you control.

    1.2k GitHub stars~1.5k tokensUpdated 20 days ago
    Documents & OfficeAuto-check passed
  • Book Media Generator

    dmccreary/ibook-skills

    Generates media for intelligent textbooks - slide decks and presentations (MARP web decks in docs/slides/ or PowerPoint .pptx lecture downloads), illustrated stories and graphic novels…

    105 GitHub stars~1.7k tokensUpdated 2 days ago
    Documents & OfficeAuto-check passed
  • Web Video Presentation

    ConardLi/garden-skills

    Turns an article or spoken script into a click-through, full-screen 16:9 web presentation that looks like a video, with optional synthesized narration.

    13k GitHub stars~3.5k tokensUpdated 2 mo ago
    Media & CreativeAuto-check passed
  • Local AI Use

    amd/skills

    Makes this agent generate images, transcribe audio, and synthesize speech on the user's own machine through a local Lemonade Server instead of a paid cloud API.

    395 GitHub stars~5k tokensUpdated today
    Media & CreativeAuto-check: notes
  • Videoagent Audio Studio

    pexoai/pexo-skills

    Tired of juggling multiple audio APIs?. An agent skill from pexoai/pexo-skills.

    800 GitHub starsUsed in 1 repo~1.7k tokens
    Media & CreativeAuto-check passed

More from glebis/claude-skills

All 91 skills in this repo
  • Runs a human-first workflow for labeling PII spans in a transcript, then scores inter-annotator agreement and drafts an adjudicated gold set.

    388 GitHub stars~1.3k tokensUpdated 11 days ago
    Auto-check passed
  • Automates a dedicated, logged-in Chrome instance per profile without ever closing the user's own open tabs or browser windows.

    388 GitHub stars~973 tokensUpdated 11 days ago
    Auto-check passed
  • Deep Research

    glebis/claude-skills

    This skill should be used when conducting comprehensive research on any topic using the OpenAI Deep Research API.

    388 GitHub stars~2.6k tokensUpdated 11 days ago
    Auto-check: notes
  • Elimination Research

    glebis/claude-skills

    This skill should be used for elimination-style research where the user wants to choose from a shortlist of products, tools, services, vendors, or other options using explicit criteria, numeric…

    388 GitHub stars~1.6k tokensUpdated 11 days ago
    Auto-check passed
  • Writes fictional but realistic coaching or therapy session transcripts for evals, demos and few-shot examples, in several modalities and export formats.

    388 GitHub stars~2.9k tokensUpdated 11 days ago
    Auto-check passed
  • The Goal Automation Diagnostic

    glebis/claude-skills

    Walks through Goldratt's Five Focusing Steps to find the real bottleneck in your work, then recommends one automation aimed at it and a list of what not to automate.

    388 GitHub stars~2k tokensUpdated 11 days ago
    Auto-check passed

Questions about Narrated HTML Presentations

What does Narrated HTML Presentations do?

Generates a self-contained HTML presentation with article and slides modes, ElevenLabs voiceover narration and optional GPT Image 2 illustrations. html` plus audio and optional image assets, which opens locally, deploys to a static host such as Vercel or Netlify, or is shared as a folder. Viewers toggle between article mode, a scrollable report with Tufte-inspired typography, and slides mode, which has keyboard or click navigation and narrated audio playback.

When should I use Narrated HTML Presentations?

Narrated HTML Presentations fits situations like: turning research notes into a presentation that doubles as a readable article; producing a narrated briefing for stakeholders who will not attend live; making a shareable deck that can be hosted as a static page.

How do I install Narrated HTML Presentations in Claude Code?

Run `npx skills add glebis/claude-skills --skill present -a claude-code`. Or copy the skill folder (present in glebis/claude-skills) into .claude/skills/present in your project. Claude Code loads it when a task matches its description.

How do I install Narrated HTML Presentations in Codex?

Run `npx skills add glebis/claude-skills --skill present -a codex`. Or copy the skill folder (present in glebis/claude-skills) into .agents/skills/present in your project. Codex loads it when a task matches its description.

Can I use Narrated HTML Presentations in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add glebis/claude-skills --skill present -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/present, .gemini/skills/present, .github/skills/present and .opencode/skills/present in your project.

What does Narrated HTML Presentations need to run?

Going by SKILL.md and its folder, Narrated HTML Presentations needs Python for the scripts in its folder, the command-line tools its instructions call (python3 and vercel) and credentials named ELEVENLABS_API_KEY. Our summary lists: An ElevenLabs API key available as `ELEVENLABS_API_KEY`; Access to GPT Image 2 for the optional illustrations.

Does Narrated HTML Presentations access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Narrated HTML Presentations safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Narrated HTML Presentations use?

Narrated HTML Presentations is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Narrated HTML Presentations use?

About 2.3k tokens (SKILL.md is roughly 9.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.5k tokens, read only when the agent opens those files.

What are the alternatives to Narrated HTML Presentations?

Skills that share tags, products or a category with Narrated HTML Presentations: Video Production (speechlab0210/video-production-skill, 105 stars), Academic Presentation Maker (OpenLAIR/dr-claw, 1.2k stars), Book Media Generator (dmccreary/ibook-skills, 105 stars) and Web Video Presentation (ConardLi/garden-skills, 13k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Narrated HTML Presentations?

glebis (a GitHub user) maintains it in glebis/claude-skills, which has 388 GitHub stars. The repository holds 91 skills in this directory. The repository was last updated on September 26, 2026.

Source: glebis/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.