Lecture Deck

Build a high-quality animated HTML lecture or workshop deck from a storyboard, in any theme. Use whenever someone asks for a slide deck, session deck, workshop slides, lecture screens, a run-of-show deck, or speaker notes for a talk, especially one delivered live (in a room or on Zoom) with breakouts, share-screen moments and handoffs. Produces one self-contained HTML file with keyboard navigation, speaker notes, overview, print, copy-to-clipboard prompts and a mode strip on every screen, plus PNG renders for checking. Ships with three themes and a kit for diagrams, animation, a recurring cast

49 stars 10 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add RinDig/lecture-deck-skill --skill lecture-deck
Manual install
git clone --depth 1 https://github.com/RinDig/lecture-deck-skill.git /tmp/lecture-deck-skill
mkdir -p ~/.claude/skills
cp -r /tmp/lecture-deck-skill/. ~/.claude/skills/lecture-deck

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Lecture deck

One claim per screen, one picture that shows the mechanism, one caption, and everything else in the notes. The deck is built from Python screen modules against a theme, rendered to PNG for checking, and checked for register before it leaves.

## When you get a request

1. Ask for or infer the room: who, how many, where, how long, what they already know, who speaks and who runs the room. If a run of show exists (a host's timings), take it as given.
2. Write `storyboard.md` first, using `reference/storyboard-template.md`. Goal, argument as numbered claims, run of show with modes, then one entry per screen with its picture and its bridge. Read the headers alone as an argument; then the bridges alone. Fix order here.
3. For anything over ten screens, critique the storyboard before building (flow, audience level, whether each picture explains its claim, coverage of the brief). Fold the changes in.
4. Scaffold and build the screens (`reference/workflow.md`, `reference/kit-api.md`). For a long deck split screens into modules and build them in parallel.
5. Render every screen and look at every contact sheet. Fix overflow, clipping, unreadable text, pictures that decorate instead of explain.
6. Run the register check with `--dump` and read the text flat. Fix, re-render what changed, repeat until clean.
7. Deliver the HTML, name what is placeholder (dates, names, a platform that may not be ready), and say how to present it (arrows, N, O, B, F, Print).
Read the full skill on GitHub

Details

Skill name
lecture-deck
License
MIT
Repo updated
12 September 2026

FAQ

What does the Lecture Deck skill do?

Build a high-quality animated HTML lecture or workshop deck from a storyboard, in any theme. Use whenever someone asks for a slide deck, session deck, workshop slides, lecture screens, a run-of-show deck, or speaker notes for a talk, especially one delivered live (in a room or on Zoom) with breakouts, share-screen moments and handoffs. Produces one self-contained HTML file with keyboard navigation, speaker notes, overview, print, copy-to-clipboard prompts and a mode strip on every screen, plus PNG renders for checking. Ships with three themes and a kit for diagrams, animation, a recurring cast

How do I install the Lecture Deck skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add RinDig/lecture-deck-skill --skill lecture-deck. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Lecture Deck popular?

It lives in RinDig/lecture-deck-skill, which has 49 GitHub stars and 10 forks.

Related skills

Qiaomu Icon Generator

55

joeseesun/qiaomu-icon-generator

Generate multiple app, favicon, or website icon candidates with either the local QM Icon Studio CLI or Codex built-in image generation with reference icons, then present a contact sheet so the user can choose. Use when building websites or apps and needing reusable icon options.

Frontend & Design

Kunpeng Skill

55

hufeng173/kunpeng-skill

跨智能体、本地优先的多源蒸馏与迁移工作流。用于收录或蒸馏代码仓库、网站、App、UI/交互、图片与品牌、视频、音频、文章、文档、书籍、课程及混合素材,形成带证据的可迁移画像、再生成规范、产品方案和本地方法库;也用于把画像应用到新主题或新 idea 并验收结果。

Frontend & Design

Exploded

59

diip3sh/exploded

Turn a real, rendered UI component (button, input, switch, card, menu, dialog, any React/Vue/HTML component) into a live, interactive exploded spec sheet. The component is pulled apart in isometric into its paint layers (elevation, surface, stroke, inner surfaces, content, focus ring), every state (hover, focus, pressed, disabled, invalid, on/off) can be switched, and every measurement (padding, radius, gap, type, shadow, ring) plus the design token the author actually wrote is read from the browser, never typed. Use this whenever someone wants component documentation, a design-system or Story

Frontend & Design

Wp Block Theme Converter

49

siddik-web/wp-block-theme-converter

Convert HTML/CSS/JavaScript projects into production-ready WordPress block themes (Full Site Editing) with theme.json v3, FSE templates and parts, block patterns, the Interactivity API, Block Bindings, and optional WooCommerce support. Use whenever the user wants to convert, port, or rebuild a static site, landing page, or classic WordPress theme as a block, FSE, or Gutenberg theme; scaffold a block theme from scratch; generate theme.json from design tokens; turn HTML into block patterns or templates; build custom blocks or style variations; migrate content or page builders (Elementor, Divi) t

Frontend & Design16

Feel

61

diip3sh/feel

Build UI interactions whose motion comes from a physical model instead of durations and easing curves. Turn a feel described in words ("a toggle that feels heavy", "a drawer with a magnetic snap", "a card you throw into a corner", "a knob with heavy detents", "a sticky slider") into a production component driven by mass, stiffness, damping and force fields (magnets, friction, walls), on a line, in a plane or around a dial, plus a test rig that plots position, velocity and the force field, overlays the model's prediction on the measured motion, and exports the same spring to Framer Motion, reac

Frontend & Design

UX Wise Agent

52

marvinrez/ux-wise-agent

Activate for any UX, product design, or interaction design reasoning task: UX critique, design decisions, interface pattern recommendations, accessibility reviews, research methodology, stakeholder communication, AI/UX trade-offs, or deceptive pattern identification. Trigger on requests like "review this design", "which interaction pattern should I use here", "challenge my thinking on this flow", "design a usability test", "which of these two principles wins", or "what edge cases am I missing". It works at senior practitioner level: it interrogates premises, holds positions under pushback, and

Frontend & Design11

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.