html-ppt-course-module

Generates HTML slide decks for course modules with learning-objective sidebars and MCQ self-checks.

Updated May 20, 2026
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-course-module-keimoshi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-ppt-course-module
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/html-ppt-course-module
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-course-module-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building teaching or training slide decks from scratch requires designing layouts, typography, and interactive elements like quizzes, which is time-consuming for educators and trainers who just want to present course content. ## Core Features & Use Cases - Course-module deck template: Produces a full HTML slide deck with a warm paper background, Playfair serif headings, and a persistent left sidebar listing learning objectives with progress states. - Built-in pedagogy patterns: Includes concept boxes, callouts, exercise blocks, syntax-highlighted code samples, and an MCQ self-check page for learner assessment. - Presenter support: Speaker notes live in hidden <aside class="notes"> elements, with a keyboard-driven runtime, overview mode, and 36 swappable themes. - Use Case: An instructor asks for a 7-slide module on recursion; the Skill copies the course-module template, wires in the shared runtime assets, and fills in objectives, examples, and a quiz. ## Quick Start Use the html-ppt-course-module template to build a 7-slide module deck on my topic, with 3-5 learning objectives pinned to the left rail and one MCQ self-check question at the end.

Frequently Asked Questions about html-ppt-course-module

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create HTML slides for a course or workshop?

Copy the course-module template's index.html and style.css into your project, keep the .tpl-course-module body class, and replace the demo content while preserving the structural classes. Then wire in the shared base.css, animations.css, and runtime.js assets so navigation works.

How do I add speaker notes to HTML presentation slides?

Place speaker notes inside an <aside class="notes"> or <div class="notes"> element within each slide. The CSS hides these from the audience view, and the runtime displays them in presenter mode. Never put presenter-only text as visible slide content.

Why is my HTML slide deck navigation not working after copying the template?

The upstream template links shared assets via ../../../assets/ paths that only resolve inside the skill tree. After copying index.html into a project, either copy the four asset files locally and rewrite the paths, or inline their contents directly into the HTML.

Can I change the color theme of the course module deck?

Yes, the deck supports 36 themes from the html-ppt assets/themes directory. Link one via the <link id="theme-link"> element, and viewers can cycle through themes by pressing the T key during the presentation.

What slide types does the course module template include?

The template ships with a cover slide, learning-objectives slide, concept explanation, worked code example, exercise prompt, and an MCQ self-check page. The left sidebar tracks objective progress with done and current states across slides.