live-deck: live, clickable HTML presentations with Claude

A live deck is one HTML file that runs a whole presentation, offline, in any browser. On almost every slide the room does something: guesses, sorts, taps or watches a demo play out. This skill teaches Claude to design, build, check and hand over such a deck for any talk, in any style.

What you get

• One file. No app, no account, no internet needed in the room. Double-click it, press F11, present. Send the same file round afterwards.
• A live example on every slide. Guess-the-cards, typing chats, sort-into-buckets, staircases, approval gates, hands-up tallies, before/after toggles, and more, each documented with a skeleton and its pitfalls.
• A real slide engine. Cross-fade transitions, side arrows, swipe, Home/End. A bottom bar with progress dots, the chapter label and a mini route. Speaker notes with a Bridge line into the next slide (N), a timer (T), a blank screen (B), a shortcuts overlay (?), and Doc mode (D), which turns the deck into a scrolling page for reading later.
• Night slides and fit slides. Dark slides for the title and breathers; demo slides that fill the screen.
• Any style. Three presets, or your own theme built from a brand book, a website, an existing deck, a logo, or a few words such as "warm editorial". Colours, fonts and logo all come from one theme.json.
• Scaffold, build, check. new_deck.py starts a deck project, build_deck.py turns it into one HTML file, check_deck.py passes or fails it: ASCII, escapes, CSS and JS syntax, duplicate ids, notes and bridges, banned words, and WCAG colour contrast.
• The method, written down. How to shape a talk into a journey, which demo fits which idea, the markup contract, style and voice rules, a browser verification routine, a multi-agent build recipe, and lessons learned in real rooms.

It suits trainings and courses, workshops, sales pitches, networking features, project kick-offs and updates, product demos, all-hands, conference talks, onboarding and safety briefings.

Install

a. Claude Code plugin marketplace

/plugin marketplace add https://forgejo.app.flowlineops.com/Tristan/live-deck-skill.git
/plugin install live-deck@flowline

b. Manual copy

Copy the skill folder plugins/live-deck/skills/live-deck to one of:

• ~/.claude/skills/live-deck to have it in every project (personal), or
• <project>/.claude/skills/live-deck to have it in one project only.

git clone https://forgejo.app.flowlineops.com/Tristan/live-deck-skill.git
cp -r live-deck-skill/plugins/live-deck/skills/live-deck ~/.claude/skills/live-deck

c. claude.ai

Zip the skill folder so that live-deck/ sits at the top of the zip:

cd live-deck-skill/plugins/live-deck/skills
zip -r live-deck.zip live-deck

Upload live-deck.zip where claude.ai lists your skills (under Settings > Capabilities). Code execution must be on for the build and check scripts to run.

Quick start

Ask Claude in plain words. The skill picks up requests like these:

• "Make a live deck for a 30-minute onboarding session for new warehouse staff. Here is our brand book."
• "Turn this outline into a 10-minute networking talk I can click through. Warm editorial style."
• "Build a 45-minute workshop for our accounting team on the month-end close, in the colours of our website."

Claude asks only what it cannot work out (the room, the length, the goal, anything that must not be said), then designs the journey, writes the slides and demos, builds, checks, drives the deck in a browser, and hands over the file with a minute count, a cut order and the facts you should confirm.

You can also run the tools yourself, from your own working folder. SKILL is wherever the skill folder (the one holding SKILL.md) lives on your machine:

SKILL=~/.claude/skills/live-deck

# 1. Scaffold a project: deck.json, order.json and parts/ with a welcome slide,
#    one hands-on example slide per stop and a wrap slide. Placeholders are marked TODO.
python $SKILL/scripts/new_deck.py talks/onboarding --title "Your first week at the depot" \
    --stops "Find your way,Stay safe,Ask for help" --theme ember --minutes 20

# 2. Build one HTML file (default: talks/onboarding/<slug of the title>.html)
python $SKILL/scripts/build_deck.py talks/onboarding

# 3. Check it: PASS or FAIL, with reasons. --strict also fails on warnings,
#    including any TODO still in the deck.
python $SKILL/scripts/check_deck.py talks/onboarding/your-first-week-at-the-depot.html --strict

Other build options: --out <file.html>, --theme <name|path> to try another style without editing deck.json, --template <path> for a different base deck, --check to run the checker straight after the build.

Then open the file in a browser and press ? for the keys.

Themes

Preset	Look
studio	The default. Neutral and light: near-black ink on cool off-white, one confident blue accent, deep navy night slides.
ember	Warm editorial: brown-black ink on cream, a terracotta accent, espresso night slides, a serif display face.
flowline	Flowline Operations' own look and logo. Also a complete example of a theme with logo files.

Your own theme. Copy a preset from themes/, change the colours, fonts and logo, and either keep it next to your deck (--theme talks/onboarding/theme.json) or save it as themes/<name>.json with its logos in themes/<name>/ to use it by name. A theme has twenty colour tokens (ink, paper, card, line, muted, an accent, good, warn and night colours, each with its text and soft shades), three fonts, a light and a dark logo or a wordmark, and a corner radius. The build derives the in-between shades and checks contrast.

references/style-and-voice.md explains every token and walks through building a theme from a brand book, a website, a PowerPoint or PDF, a logo, or a few words, with the contrast traps to avoid.

Repo layout

.claude-plugin/marketplace.json        the "flowline" plugin marketplace
plugins/live-deck/
  .claude-plugin/plugin.json           the plugin manifest
  skills/live-deck/                    the skill itself
    SKILL.md                           what Claude reads first: process, hard rules, files
    assets/template.html               the neutral starter deck: engine, CSS, bar, example slides
    themes/                            studio.json, ember.json, flowline.json (+ flowline/ logos)
    scripts/                           new_deck.py, build_deck.py, check_deck.py
    references/                        journey-design, demo-patterns, slide-contract,
                                       style-and-voice, verification, multi-agent-build, lessons
    examples/                          smoke/: a tiny two-stop deck project for testing
README.md

Requirements

• Python 3, standard library only, for the three scripts.
• Node.js, which the checker uses to syntax-check the deck's JavaScript.
• A modern browser to present, and to verify the deck before anyone sees it.
• Optional: Pillow (pip install pillow), only for sampling colours from a PNG logo.

Credits

Made by Flowline Operations. The method was worked out building real live decks: a 90-minute training and a 10-minute networking talk.