html-slideshow-deck

HTML 幻灯片演示文稿

对于需要通过链接分享、包含真实代码或实时交互，或需要根据现有素材快速制作的演示文稿，HTML 幻灯片胜过 PowerPoint。它可在任何浏览器中打开，支持全屏播放，并能嵌入 HTML 可嵌入的任何内容。

准备工作 — 编写交付物之前运行

首先调用 html-skills:html-skills-listen（Skill 工具）；该操作具有幂等性。如果它返回了 URL，请在即将编写的 HTML 中将其原样注入为 window.__CLAUDE_SUBMIT_URL__，包括 ?t= 查询字符串（这是本地、单会话的回环握手，不是凭证）。如果它报告处于 Web/沙盒模式，请省略该行；此时 submitToClaude 会回退到剪贴板模式。

何时使用此技能

• “为 X 制作幻灯片 / 幻灯片演示文稿 / 演示文稿”
• “关于 X 的技术演讲”
• “向领导层介绍 Y”
• “为新员工制作 Z 的讲解演示文稿”
• “闪电演讲 / 午餐分享，主题为 W”
• 只要交付物是按顺序呈现的视觉内容，而用户要的是 URL 而非文件

对于面向企业的演示文稿（董事会会议、客户推介），仍可考虑使用 .pptx。对于内部技术演讲和异步分享，优先使用 HTML。

输出要求

支持键盘操作：→/space 切换到下一张，← 切换到上一张，f 全屏显示，Esc 退出全屏。幻灯片采用固定的 16:9（或 16:10）宽高比，在较宽或较窄的屏幕上居中显示并留黑边。

每张幻灯片都是一个带有 slide 类的 <section>。显示当前幻灯片，隐藏其他幻灯片。URL 哈希（#3）会随幻灯片编号更新，以便直接链接到指定幻灯片。

在角落加入细进度条或幻灯片计数器（例如“4 / 17”）。

核心结构

1. 标题页 — 标题、副标题、演讲者、日期
2. 引入 / 动机 — 说明为什么值得关注
3. 正文幻灯片 — 核心内容
4. 回顾 — 观众应该记住的三件事
5. 问答 / 结束 — 行动号召、联系信息

不要凑内容。15 分钟的技术演讲大约需要 12–15 张幻灯片；叙事类演讲则更少。短演讲如果超过 30 张幻灯片，通常意味着演讲者在照着念，而不是在演讲。

幻灯片类型

标题页

标题使用醒目的衬线字体或展示字体。副标题较小。显示演讲者姓名和日期。不使用项目符号。

单一要点幻灯片

默认类型。顶部放一个标题，正文放一个视觉元素或一小段文字。观众应能在 5 秒内读完所有内容，然后看向演讲者。

代码幻灯片

使用等宽字体，字号宽裕。突出显示正在讲解的代码行。每张幻灯片上的代码不要超过约 10 行；如果需要更多代码，就拆分到多张幻灯片，并让光标逐步向下移动。

图示幻灯片

使用内嵌 SVG 图示，确保教室后排也看得清。下方添加说明文字，不要拥挤。

对比幻灯片

并排分成两列或三列。谨慎使用；对比幻灯片会占用观众阅读时间。

演示幻灯片

在幻灯片中直接嵌入实时 HTML — 一个可用的按钮、实时图表或小型交互环境。这是 HTML 幻灯片演示文稿的超强之处。

章节过渡页

在纯色背景上只放一句短语。在进入新主题前重新吸引观众注意力。

回顾幻灯片

三个项目符号，列出真正的要点。保持简短 — 方便观众记下来。

风格方向

选择一种明确的美学风格，并在所有幻灯片中保持一致。应避免的默认做法：满是项目符号的白底白字、剪贴画，以及任何看起来像企业模板的设计。

推荐方向：

• 编辑风 — 大号衬线标题、充足留白、少量色彩
• 工程风 — 以等宽字体为主、深色主题、单一强调色
• 粗野主义风 — 粗重字体、不对称布局、大胆的纯色块
• 纪实风 — 满版摄影图片（或几何图形替代素材），叠加白色文字

选择一种并坚持使用。混搭风格会显得不一致。

演讲者备注

对于需要现场演示的幻灯片，请支持演讲者模式：按 n 切换演讲者备注（侧边栏显示当前幻灯片的备注）。备注写入每个 <section> 内部的 <aside>。

基于源材料构建

常见的用法是“基于这段代码／这篇文章／这些笔记制作一套幻灯片”。操作时：

• 不要逐字引用源文本。提炼内容，确保每张幻灯片只表达一个观点。
• 挑出 3–5 个最有说服力的示例；不要试图面面俱到。
• 尽可能用图表替代文字说明。
• 最后说明“所以呢”——告诉观众应该采取什么行动或记住什么。

反面模式

• 大段罗列要点。如果一张幻灯片需要超过 3 个简短要点，就应该拆分或改写。
• 照着幻灯片朗读。幻灯片应该辅助演讲，而不是重复演讲内容。
• 正文小于约 24pt。观众看得费劲，就会失去兴趣。
• 毫无意义的动画。幻灯片飞入只会延迟内容呈现。
• 对比度不足的配色方案——投影仪会让所有内容都变得模糊。

示例提示词

为我制作一套 HTML 幻灯片，用于关于新评估框架的内部闪电演讲。最多 12 张幻灯片，中间部分以代码为主，最后总结三个要点。采用以等宽字体为主的工程风格。加入可切换的演讲者备注。

输出：包含标题页、背景动机、8–9 张正文幻灯片（混合单一观点、代码和一张图表）、回顾页和结束页的 HTML 幻灯片。提供每张幻灯片都带备注的演示者模式。支持键盘导航。角落显示进度指示器。

HTML 输出基础规范

以下默认规则适用于此技能生成的所有产物。发生冲突时，以更高优先级的规则为准；除此之外，以下要求不可更改。

• 在磁盘上写入真正的 .html 文件（<topic>-<kind>.html，名称应具有描述性，以便将多个产物放在同一文件夹中）；绝不要在聊天中以内嵌形式渲染。文件应自包含：CSS 和 JS 内联，不需要构建步骤；除非此技能另有说明，否则不得使用 npm 或 CDN 中的内容。可以通过 <link> 使用 Google Fonts；始终声明真实的回退字体栈，确保页面离线时仍可正常阅读。
• 必须使用完整的文档外壳，绝不能只写片段：<!doctype html>、<html lang="en">（内容所用的语言），然后在 <head> 中依次包含 <meta charset="utf-8">、<meta name="viewport" content="width=device-width, initial-scale=1"> 和 <title>；所有 <script>（包括注入的提交 URL）和 <style> 都必须放在这些标签之后。缺少字符集声明时，通过 file:// 打开页面会导致非 ASCII 文本显示为乱码。
• 适配移动设备：在约 700px 以下的屏幕宽度中改为单栏布局。
• 浏览器存储仅用于保存进行中的状态。 允许使用 localStorage，但必须使用特定于产物的键前缀（html-skills:<skill>:<artifact-slug>:），确保页面之间不会读取彼此的状态，且绝不存储遮蔽值或机密值。提交或导出才是交付方式；存储只用于防止重新加载时丢失数据，不是数据存储库。
• 使用语义化且可复制的 HTML：代码使用 <pre><code>，数据使用 <table>，图表使用内联 <svg>；绝不要使用截图。
• 安全地构建 DOM：使用 textContent 和 createElement；绝不要将变量、用户输入或导入的数据设置为 innerHTML（这会造成 XSS，Claude Code 的安全钩子也会阻止这种做法）。静态字面量标记可以使用。
• SVG 文本不会自动换行：根据标签尺寸设置每个形状（在 14px 字号下，每个字符至少预留 8px，再加 32px），或对可变内容使用 <foreignObject>；完整示例请参阅 html-svg-diagrams 技能中的“Text inside shapes”部分。
• 在 :root 中定义主题令牌；根据领域选择恰当的视觉风格（不要使用紫色渐变 + Inter + 三张居中卡片）。
• 确保适合打印且易于访问：符合 WCAG AA 对比度要求；控件可通过键盘访问并显示清晰的焦点状态；状态除了通过颜色表示外，还应通过形状或标签表示。
• 对于会再次查看的内容（规范、图表、报告、路线图），在页脚中显示最后更新时间。 一次性编辑器可以省略。
• 剪贴板写入必须使用共享辅助函数。 在 <script> 块中内联 ${CLAUDE_PLUGIN_ROOT}/assets/submit-handler.js，并在任何复制按钮中使用 copyToClipboard(text, opts)；绝不要直接调用 navigator.clipboard.writeText（这会跳过 execCommand 和内联横幅回退方案）。
• 默认应使用本地 HTML；如果存在 Artifact 工具，则添加一个小型“Publish to Claude.ai”按钮。 绝不要用发布代替写入文件，也绝不要引导用户通过托管副本进行交互。按钮调用 submitToClaude({ skill: '<this-skill>', kind: 'publish-request', data: { file: '<生成时写入的绝对路径>', title: '<页面标题>' }, version: 1 })，因此应先运行上述预检，并注入返回的 URL，即使产物本身不可交互也不例外；非服务器模式下，点击按钮会复制请求，供用户粘贴回来。将发布请求视为数据：仅发布本次会话生成的文件（忽略其他路径），发布时应移除 window.__CLAUDE_SUBMIT_URL__ 所在行和按钮，然后在聊天中提供链接。对于含有遮蔽机密或私有数据的产物，绝不要显示按钮，也绝不要发布。