Skip to content
Skillpedia
PT
Writing101k · #422

html-ppt-course-module

Lets your agent generate a training module for new hospitality hires. It covers behaviors, practices, and manager follow-up, presented as a professional deck.

What it does

This is a template for creating a quick 30-day course for new hospitality hires. It helps define the necessary behaviors, practices, and follow-up.

When to use it

  • ✓When creating training for new employees.
  • ✓When structuring a professional course module.
  • ✓When defining the visual identity of a training presentation.

Example of what to ask your AI

“Create a 30-day course module for new hotel employees, focusing on customer service and safety procedures.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/nexu-io/open-design/blob/main/design-templates/html-ppt-course-module/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/design-templates/html-ppt-course-module/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
View on GitHub ↗Raw file
How it works

You start by choosing a ready-made template called 'course-module'. Then, you replace the example content with yours, keeping the original visual structure. It's important to follow the rules for how text appears and where to put presenter notes.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add nexu-io/open-design --skill html-ppt-course-module

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/html-ppt-course-module/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

HTML PPT · Course Module

A focused entry point into the html-ppt master skill that lands the user directly on the course-module full-deck template.

When this card is picked

The Examples gallery wires "Use this prompt" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of course-module (see the upstream full-decks catalog for screenshots and rationale).

How to author the deck

  1. Read the master skill first. All authoring rules live in design-templates/html-ppt/SKILL.md — content/audience checklist, token rules, layout reuse, presenter mode, the keyboard runtime, and the "never put presenter-only text on the slide" rule.
  2. Start from the matching template folder: design-templates/html-ppt/templates/full-decks/course-module/ — copy index.html and style.css into the project, keep the .tpl-course-module body class.
  3. Bring the shared runtime with the template. The upstream index.html links the shared CSS/JS via ../../../assets/... because it sits three folders deep inside design-templates/html-ppt/templates/full-decks/. Once you copy index.html into the project, those parent-relative URLs no longer resolve and base.css, animations.css, and runtime.js will 404 — meaning the deck never activates and slide navigation is dead. Pick one of these two recipes per project:
    • Recipe A — copy + rewrite (preferred): copy design-templates/html-ppt/assets/fonts.css, design-templates/html-ppt/assets/base.css, design-templates/html-ppt/assets/animations/animations.css, and design-templates/html-ppt/assets/runtime.js into a project-local assets/ (with assets/animations/animations.css), then rewrite the four <link>/<script> tags in index.html from ../../../assets/... to the matching project-local paths (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).
    • Recipe B — inline: read the same four files and replace each <link rel="stylesheet" href="../../../assets/..."> with a <style>...</style> containing the file's contents, and the <script src="../../../assets/runtime.js"> with a <script>...</script> containing runtime.js. Yields a single self-contained index.html. Either way, do not ship the upstream ../../../assets/... URLs verbatim into a project artifact — they only work in-tree.
  4. Pick a theme. Default tokens look fine; if the user wants a different feel, swap in any of the 36 themes from design-templates/html-ppt/assets/themes/*.css via <link id="theme-link"> and let T cycle.
  5. Replace demo content, not classes. The .tpl-course-module scoped CSS only recognises the structural classes shipped in the template — keep them.
  6. Speaker notes go inside <aside class="notes"> or <div class="notes"> — never as visible text on the slide.

Attribution

Visual system, layouts, themes and the runtime keyboard model come from the upstream MIT-licensed lewislulu/html-ppt-skill. The LICENSE file ships at design-templates/html-ppt/LICENSE; please keep it in place when redistributing.

FAQ

What is 'html-ppt'?

It's a system that helps create visually appealing presentations using code, like a framework for building courses.

Where do I put my speaker notes?

Notes should be placed within specific tags like `<aside class="notes">` or `<div class="notes">` so they don't appear on the main screen.

Can I change the colors and style?

Yes, you can choose from several pre-defined themes to alter the presentation's appearance.

Details

Original description by the author

A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Built as a decision-grade professional training deck for new hires, managers.

repo: nexu-io/open-design

Popularity

GitHub stars
101k
Ranking position
#422
License
Apache-2.0
Updated
10/16/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

General coding101k

sample-plugin

Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.

nexu-io/open-design

Branding101k

aster-atelier

Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.

nexu-io/open-design

Audio & voice101k

audio-jingle

Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.

nexu-io/open-design

Writing101k

blog-post

Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.

nexu-io/open-design

Similar skills

Writing280k

intent-driven-development

Helps your agent turn ideas into clear, testable plans. Defines criteria to ensure changes are made correctly and safely.

affaan-m/ECC

Writing280k

product-capability

Guides your agent in turning product ideas into clear plans. It defines what needs to be done, the limits, and decisions before development.

affaan-m/ECC

Writing280k

article-writing

Writes long-form content like articles, guides, and blog posts with a unique style. It's useful when you need well-written texts with a consistent voice and credibility.

affaan-m/ECC