Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →open-deck-org/opendeck
Build animated, narrated HTML presentation decks — slides that reveal step-by-step as you click, hover tooltips, a thumbnail rail, fullscreen, plus AI voice narration generated in-browser via ElevenLabs that can be baked into a fully offline file.
Passed 18 of 20 test cases with the skill, and 4 of 20 without it.
and 19 more in the full report
16 fixed4 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.6-flash on 10/14/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
One of 15 test cases the skill fixed. Same model, same prompt, with and without the skill.
What specific HTML data attributes should be placed on each slide <section> to define its rail thumbnail label and presenter notes?
| Checked | Without skill | With skill |
|---|---|---|
| Uses data-label attribute for thumbnail rail text. | Missed | Passed |
| Uses data-speaker-notes attribute for presenter notes. | Missed | Passed |
The instructions your model reads when the skill loads.
Build an HTML slide deck with in-slide step animations, hover tooltips, a thumbnail rail, fullscreen, and AI voice narration — including an in-page "Audio Studio" that generates the voiceover with ElevenLabs and can bake it into a fully offline file.
Use this skill when the user asks for: a presentation/deck/slides that animates step-by-step, a self-running or narrated presentation, a deck they can present and also export, anything describing "click through and it talks," or to package a deck as a portable .deck file for a compatible player app.
The shippable kit lives in this skill's assets/ folder. A deck is a single deck file (starter-deck.html, or a .dc.html Design Component when building inside a Claude design project) plus five companion files (all copied into the same folder as the deck), and a zero-dependency bundler for offline export:
| File | Role | You edit it? |
|---|---|---|
deck-stage.js | Slide engine: auto-scaling, keyboard nav, thumbnail rail, speaker notes. | No — drop in as-is |
deck-enhance.js | data-step reveals + step dots, data-tip tooltips, Fullscreen (F) & Slides (S) buttons, edit-mode guard. | No — drop in as-is |
narration-script.js | The narration text, one line per slide/step. | Yes — this is where you write narration |
deck-narration.js | Narrate + Auto-play controls (merged into the deck overlay) and the Audio Studio. | No — drop in as-is |
narration-audio.js | Generated, not shipped. Holds the audio clips as base64 so narration plays offline. Created by the Studio's "Download audio". | No — produced by the user |
deck-export.js | In-browser bundler: deckExport.preview() builds a single self-contained file that keeps the Studio; deckExport.publish() builds the final share-ready file (Studio removed, audio baked); deckExport.deck() wraps a published build as a portable .deck package. Plain browser JS — no build step. | No — drop in as-is |
build-standalone.mjs | Headless bundler — the same job from disk with no browser/server: node build-standalone.mjs [deck.html] [--preview]. This is how you (the agent) bundle, anywhere the files sit together (the Claude web app code sandbox, a local checkout). | No — run it |
make-studio-link.mjs | Prints a link to the hosted Audio Studio (open-deck.org/studio) with the deck's narration pre-loaded — for generating audio when the deck preview's CSP blocks ElevenLabs (the Claude web app). node make-studio-link.mjs [narration-script.js]. | No — run it |
deck-animation.css is the required CSS for reveals/dots/tooltips — paste it into the deck's <style> (the starter deck already has it inline).
Three shapes of a deck — say which you mean. The editable deck (multi-file on disk, or one file with the Studio) is what you author. A preview is one self-contained
.htmlthat keeps the Studio — open it anywhere, keep tuning. Publishing produces one self-contained.htmlwith the Studio removed and audio baked — the file you share. Same single-file bundle; the only difference is whether authoring stays on.
Start from assets/starter-deck.html (in this skill) — it's a complete, working deck you can open directly: 3 slides, a stepped reveal, tooltips, the rail, and the narration controls. Copy it into the project together with the five companion files from assets/ (deck-stage.js, deck-enhance.js, narration-script.js, deck-narration.js, deck-animation.css) — all in one folder, no subdirectories. The engine resolves <script src> and the deck-stage mount relative to the deck, so a flat layout is required. Then replace the demo <section>s with the real slides.
A. Plain HTML (what starter-deck.html uses; also the shape of a "Save as standalone" export). Mount <deck-stage> directly and load the scripts at the end of <body>, stage first:
<deck-stage width="1920" height="1080">
<section data-label="Title" data-speaker-notes="…">…</section>
test cases passed, vs 4 / 20 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.