{"id":"deeb1905-c0b3-44dc-a857-a2c3e816da77","shortId":"TCSF32","kind":"skill","title":"html-ppt-course-module","tagline":"Online-course / workshop module deck — warm paper background + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check page. Use for teaching modules, training materials, workshop slides.","description":"# HTML PPT · Course Module\n\nA focused entry point into the [`html-ppt`](../html-ppt/SKILL.md) master skill that lands the user directly on the **`course-module`** full-deck template.\n\n## When this card is picked\n\nThe 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](../html-ppt/references/full-decks.md) for screenshots and rationale).\n\n## How to author the deck\n\n1. **Read the master skill first.** All authoring rules live in\n   [`skills/html-ppt/SKILL.md`](../html-ppt/SKILL.md) — content/audience checklist,\n   token rules, layout reuse, presenter mode, the keyboard runtime, and the\n   \"never put presenter-only text on the slide\" rule.\n2. **Start from the matching template folder:**\n   `skills/html-ppt/templates/full-decks/course-module/` — copy `index.html` and\n   `style.css` into the project, keep the `.tpl-course-module` body class.\n3. **Bring the shared runtime with the template.** The upstream\n   `index.html` links the shared CSS/JS via `../../../assets/...` because it\n   sits three folders deep inside `skills/html-ppt/templates/full-decks/`.\n   Once you copy `index.html` into the project, those parent-relative URLs\n   no longer resolve and `base.css`, `animations.css`, and `runtime.js`\n   will 404 — meaning the deck never activates and slide navigation is\n   dead. Pick one of these two recipes per project:\n   - **Recipe A — copy + rewrite (preferred):** copy\n     `skills/html-ppt/assets/fonts.css`, `skills/html-ppt/assets/base.css`,\n     `skills/html-ppt/assets/animations/animations.css`, and\n     `skills/html-ppt/assets/runtime.js` into a project-local\n     `assets/` (with `assets/animations/animations.css`), then rewrite the\n     four `<link>`/`<script>` tags in `index.html` from\n     `../../../assets/...` to the matching project-local paths\n     (`assets/fonts.css`, `assets/base.css`,\n     `assets/animations/animations.css`, `assets/runtime.js`).\n   - **Recipe B — inline:** read the same four files and replace each\n     `<link rel=\"stylesheet\" href=\"../../../assets/...\">` with a\n     `<style>...</style>` containing the file's contents, and the\n     `<script src=\"../../../assets/runtime.js\">` with a\n     `<script>...</script>` containing `runtime.js`. Yields a single\n     self-contained `index.html`.\n   Either way, do not ship the upstream `../../../assets/...` URLs\n   verbatim into a project artifact — they only work in-tree.\n4. **Pick a theme.** Default tokens look fine; if the user wants a different\n   feel, swap in any of the 36 themes from `skills/html-ppt/assets/themes/*.css`\n   via `<link id=\"theme-link\">` and let `T` cycle.\n5. **Replace demo content, not classes.** The `.tpl-course-module` scoped CSS only\n   recognises the structural classes shipped in the template — keep them.\n6. **Speaker notes go inside `<aside class=\"notes\">` or `<div class=\"notes\">`** — never as visible text on the slide.\n\n## Attribution\n\nVisual system, layouts, themes and the runtime keyboard model come from\nthe upstream MIT-licensed [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill). The\nLICENSE file ships at `skills/html-ppt/LICENSE`; please keep it in place when\nredistributing.","tags":["html","ppt","course","module","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-html-ppt-course-module","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/html-ppt-course-module","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (3,328 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:20.514Z","embedding":null,"createdAt":"2026-05-02T06:52:41.701Z","updatedAt":"2026-05-11T06:52:20.514Z","lastSeenAt":"2026-05-11T06:52:20.514Z","tsv":"'/../../assets':198,293 '/html-ppt/references/full-decks.md':113 '/html-ppt/skill.md':49,135 '/lewislulu/html-ppt-skill).':393 '1':123 '2':159 '3':182 '36':326 '4':306 '404':228 '5':336 '6':360 'accept':85 'activ':233 'animations.css':224 'artifact':299 'asset':263 'assets/animations/animations.css':265 'attribut':373 'author':120,130 'background':14 'base.css':223 'bodi':180 'bring':183 'card':68,89 'catalog':112 'check':26 'checklist':137 'class':181,341,353 'come':383 'contain':270,277,284 'content':274,339 'content/audience':136 'copi':167,209,249,252 'cours':4,8,38,60,104,178,345 'course-modul':59,103 'css':330,348 'css/js':196 'cycl':335 'dead':238 'deck':11,64,111,122,231 'deep':204 'default':310 'demo':338 'differ':319 'direct':56 'either':286 'entri':42 'exact':98 'exampl':72,80 'feel':320 'file':272,396 'fine':313 'first':128 'focus':41 'folder':165,203 'four':269 'full':63,110 'full-deck':62,109 'galleri':73 'github.com':392 'github.com/lewislulu/html-ppt-skill).':391 'go':363 'html':2,36,47 'html-ppt':46 'html-ppt-course-modul':1 'ident':101 'in-tre':303 'index.html':168,192,210,285 'insid':205,364 'keep':174,358,401 'keyboard':145,381 'land':53 'layout':140,376 'learn':21 'left':18 'let':333 'lewislulu/html-ppt-skill':390 'licens':389,395 'link':193 'live':132 'local':262 'longer':220 'look':312 'master':50,126 'match':163 'materi':33 'mcq':23 'mean':229 'mit':388 'mit-licens':387 'mode':143 'model':382 'modul':5,10,31,39,61,105,179,346 'navig':236 'never':149,232,366 'note':362 'object':22 'one':240 'onlin':7 'online-cours':6 'page':27 'paper':13 'parent':216 'parent-rel':215 'per':245 'persist':17 'pick':70,93,239,307 'place':404 'playfair':15 'pleas':400 'point':43 'ppt':3,37,48 'prefer':251 'present':142,152 'presenter-on':151 'project':173,213,246,261,298 'project-loc':260 'prompt':77,81,87 'put':150 'rational':117 'read':124 'recip':244,247 'recognis':350 'redistribut':406 'relat':217 'replac':337 'resolv':221 'reus':141 'rewrit':250,267 'right':92 'rule':131,139,158 'runtim':146,186,380 'runtime.js':226,278 'scope':347 'screenshot':115 'see':106 'self':25,283 'self-check':24 'self-contain':282 'serif':16 'share':185,195 'ship':290,354,397 'sidebar':19 'singl':281 'sit':201 'skill':51,127 'skill-html-ppt-course-module' 'skills/html-ppt/assets/animations/animations.css':255 'skills/html-ppt/assets/base.css':254 'skills/html-ppt/assets/fonts.css':253 'skills/html-ppt/assets/runtime.js':257 'skills/html-ppt/assets/themes':329 'skills/html-ppt/license':399 'skills/html-ppt/skill.md':134 'skills/html-ppt/templates/full-decks':206 'skills/html-ppt/templates/full-decks/course-module':166 'slide':35,157,235,372 'source-nexu-io' 'speaker':361 'start':160 'structur':352 'style.css':170 'swap':321 'system':375 'teach':30 'templat':65,164,189,357 'text':154,369 'theme':309,327,377 'three':202 'token':138,311 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'tpl':177,344 'tpl-course-modul':176,343 'train':32 'tree':305 'two':243 'upstream':108,191,292,386 'url':218,294 'use':28,75 'user':55,96,316 'verbatim':295 'via':197,331 'visibl':368 'visual':100,374 'want':97,317 'warm':12 'way':287 'wire':74 'work':302 'workshop':9,34 'yield':279","prices":[{"id":"0d8bd3c6-270d-4429-be1e-c78f348c03c6","listingId":"deeb1905-c0b3-44dc-a857-a2c3e816da77","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-02T06:52:41.701Z"}],"sources":[{"listingId":"deeb1905-c0b3-44dc-a857-a2c3e816da77","source":"github","sourceId":"nexu-io/open-design/html-ppt-course-module","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-course-module","isPrimary":false,"firstSeenAt":"2026-05-02T06:52:41.701Z","lastSeenAt":"2026-05-11T06:52:20.514Z"},{"listingId":"deeb1905-c0b3-44dc-a857-a2c3e816da77","source":"skills_sh","sourceId":"nexu-io/open-design/html-ppt-course-module","sourceUrl":"https://skills.sh/nexu-io/open-design/html-ppt-course-module","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:22.101Z","lastSeenAt":"2026-05-07T22:42:09.148Z"}],"details":{"listingId":"deeb1905-c0b3-44dc-a857-a2c3e816da77","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-course-module","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"94b6a5056a10d66d12fc691c312686e9ddb0326d","skill_md_path":"skills/html-ppt-course-module/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-course-module"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-course-module","description":"Online-course / workshop module deck — warm paper background + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check page. Use for teaching modules, training materials, workshop slides."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-course-module"},"updatedAt":"2026-05-11T06:52:20.514Z"}}