{"id":"256b2f45-91a3-4b3c-a565-136f35eff1f9","shortId":"PQUL8G","kind":"skill","title":"html-ppt-presenter-mode","tagline":"演讲者模式专用 deck — tokyo-night 默认主题，5 套主题 T 键切换，每页带 150-300 字逐字稿示例（<aside class=\"notes\">），按 S 打开 popup（CURRENT / NEXT / SCRIPT / TIMER 四张磁吸卡片）。用于技术分享、公开演讲、课程讲解，怕忘词或要提词器的场景。","description":"# HTML PPT · Presenter Mode (演讲者模式)\n\nA focused entry point into the [`html-ppt`](../html-ppt/SKILL.md) master skill that lands the user directly on the **`presenter-mode-reveal`** 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 `presenter-mode-reveal` (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/presenter-mode-reveal/` — copy `index.html` and\n   `style.css` into the project, keep the `.tpl-presenter-mode-reveal` 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-presenter-mode-reveal` 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","presenter","mode","reveal","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-html-ppt-presenter-mode-reveal","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-presenter-mode-reveal","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,377 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:21.067Z","embedding":null,"createdAt":"2026-05-02T06:52:42.305Z","updatedAt":"2026-05-11T06:52:21.067Z","lastSeenAt":"2026-05-11T06:52:21.067Z","tsv":"'-300':18 '/../../assets':199,294 '/html-ppt/references/full-decks.md':113 '/html-ppt/skill.md':47,135 '/lewislulu/html-ppt-skill).':395 '1':123 '150':17 '2':159 '3':183 '36':327 '4':307 '404':229 '5':12,337 '6':362 'accept':84 'activ':234 'animations.css':225 'artifact':300 'asset':264 'assets/animations/animations.css':266 'attribut':375 'author':120,130 'base.css':224 'bodi':181 'bring':184 'card':67,88 'catalog':112 'checklist':137 'class':182,342,355 'come':385 'contain':271,278,285 'content':275,340 'content/audience':136 'copi':167,210,250,253 'css':331,350 'css/js':197 'current':24 'cycl':336 'dead':239 'deck':7,63,111,122,232 'deep':205 'default':311 'demo':339 'differ':320 'direct':54 'either':287 'entri':40 'exact':97 'exampl':71,79 'feel':321 'file':273,398 'fine':314 'first':128 'focus':39 'folder':165,204 'four':270 'full':62,110 'full-deck':61,109 'galleri':72 'github.com':394 'github.com/lewislulu/html-ppt-skill).':393 'go':365 'html':2,33,45 'html-ppt':44 'html-ppt-presenter-mod':1 'ident':100 'in-tre':304 'index.html':168,193,211,286 'insid':206,366 'keep':174,360,403 'keyboard':145,383 'land':51 'layout':140,378 'let':334 'lewislulu/html-ppt-skill':392 'licens':391,397 'link':194 'live':132 'local':263 'longer':221 'look':313 'master':48,126 'match':163 'mean':230 'mit':390 'mit-licens':389 'mode':5,36,59,104,143,179,347 'model':384 'navig':237 'never':149,233,368 'next':25 'night':10 'note':364 'one':241 'parent':217 'parent-rel':216 'per':246 'pick':69,92,240,308 'place':406 'pleas':402 'point':41 'popup':23 'ppt':3,34,46 'prefer':252 'present':4,35,58,103,142,152,178,346 'presenter-mode-rev':57,102 'presenter-on':151 'project':173,214,247,262,299 'project-loc':261 'prompt':76,80,86 'put':150 'rational':117 'read':124 'recip':245,248 'recognis':352 'redistribut':408 'relat':218 'replac':338 'resolv':222 'reus':141 'reveal':60,105,180,348 'rewrit':251,268 'right':91 'rule':131,139,158 'runtim':146,187,382 'runtime.js':227,279 'scope':349 'screenshot':115 'script':26 'see':106 'self':284 'self-contain':283 'share':186,196 'ship':291,356,399 'singl':282 'sit':202 'skill':49,127 'skill-html-ppt-presenter-mode-reveal' 'skills/html-ppt/assets/animations/animations.css':256 'skills/html-ppt/assets/base.css':255 'skills/html-ppt/assets/fonts.css':254 'skills/html-ppt/assets/runtime.js':258 'skills/html-ppt/assets/themes':330 'skills/html-ppt/license':401 'skills/html-ppt/skill.md':134 'skills/html-ppt/templates/full-decks':207 'skills/html-ppt/templates/full-decks/presenter-mode-reveal':166 'slide':157,236,374 'source-nexu-io' 'speaker':363 'start':160 'structur':354 'style.css':170 'swap':322 'system':377 'templat':64,164,190,359 'text':154,371 'theme':310,328,379 'three':203 'timer':27 'token':138,312 'tokyo':9 'tokyo-night':8 '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,345 'tpl-presenter-mode-rev':176,344 'tree':306 'two':244 'upstream':108,192,293,388 'url':219,295 'use':74 'user':53,95,317 'verbatim':296 'via':198,332 'visibl':370 'visual':99,376 'want':96,318 'way':288 'wire':73 'work':303 'yield':280 '公开演讲':30 '四张磁吸卡片':28 '套主题':13 '字逐字稿示例':19 '怕忘词或要提词器的场景':32 '打开':22 '按':20 '每页带':16 '演讲者模式':37 '演讲者模式专用':6 '用于技术分享':29 '课程讲解':31 '键切换':15 '默认主题':11","prices":[{"id":"b295fd9e-0b60-4aba-babb-d55c4cf3b007","listingId":"256b2f45-91a3-4b3c-a565-136f35eff1f9","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:42.305Z"}],"sources":[{"listingId":"256b2f45-91a3-4b3c-a565-136f35eff1f9","source":"github","sourceId":"nexu-io/open-design/html-ppt-presenter-mode-reveal","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-presenter-mode-reveal","isPrimary":false,"firstSeenAt":"2026-05-02T06:52:42.305Z","lastSeenAt":"2026-05-11T06:52:21.067Z"}],"details":{"listingId":"256b2f45-91a3-4b3c-a565-136f35eff1f9","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-presenter-mode-reveal","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":"8035a78cd7141812106804207b6679ac63314f9d","skill_md_path":"skills/html-ppt-presenter-mode-reveal/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-presenter-mode-reveal"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-presenter-mode","description":"演讲者模式专用 deck — tokyo-night 默认主题，5 套主题 T 键切换，每页带 150-300 字逐字稿示例（<aside class=\"notes\">），按 S 打开 popup（CURRENT / NEXT / SCRIPT / TIMER 四张磁吸卡片）。用于技术分享、公开演讲、课程讲解，怕忘词或要提词器的场景。"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-presenter-mode-reveal"},"updatedAt":"2026-05-11T06:52:21.067Z"}}