Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
glebis avatar

Present

glebis/claude-skills

  • 85 installs
  • 339 repo stars
  • Updated August 4, 2026
  • glebis/claude-skills

Generate a self-contained HTML presentation with dual article/slides mode, ElevenLabs voiceover narration, optional images, and scroll-reveal animations.

About

Turns research or notes into one index.html with a readable article mode and a navigable narrated slides mode, using ElevenLabs TTS and configurable detail levels. A developer uses it to produce a shareable narrated briefing or deck from content.

  • Dual article/slides output, deployable as a static folder
  • Configurable slide count, detail level, voice, and images

Present by the numbers

  • 85 all-time installs (skills.sh)
  • Ranked #339 of 688 Office & Documents skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/glebis/claude-skills --skill present

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs85
repo stars★ 339
Last updatedAugust 4, 2026
Repositoryglebis/claude-skills ↗

What it does

Generate a self-contained HTML presentation with dual article/slides mode, ElevenLabs voiceover narration, optional images, and scroll-reveal animations.

Files

SKILL.mdMarkdownGitHub ↗

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:

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:

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.

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:

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

Related skills

open.feishu.cnLark DocGenerate, update, and maintain structured documentation directly inside Lark/Feishu using natural language and agentic workflows.494kopen.feishu.cnLark DriveLet their coding agents read, create, update and search documents stored in Lark (Feishu) Drive directly from prompts.493kopen.feishu.cnLark SheetsConnect Claude, Cursor or other agents directly to Feishu/Lark spreadsheets for live data reads, writes, and structured automation.493kopen.feishu.cnLark WikiGenerate, update, and sync structured knowledge bases inside Lark (Feishu) directly from code, specs, or agent output.493kopen.feishu.cnLark WhiteboardGenerate, edit, and collaborate on visual diagrams and flowcharts directly inside Claude, Cursor or other agents.493kopen.feishu.cnLark SlidesInstantly generate polished, professional slide decks from specs, roadmaps, or meeting notes using Lark/Feishu.493k
Office & Documentsnotes
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.