html-presentation

用途

html-presentation 用于把文档、大纲或自由格式内容转换成精炼、自包含的 HTML 幻灯片演示，支持键盘和滚动导航。当用户提供文档并要求以 HTML 形式呈现“演示”“幻灯片”或“deck”，或要求把笔记/大纲/内容转换为可在浏览器中展示的幻灯片，或希望使用 Reveal.js 或基于滚动的 HTML 演示，或表示想在浏览器而非 PowerPoint 中演示时，该技能会被触发。

主要能力

支持两种导航模式：横向（left-to-right，基于 Reveal.js）和纵向滚动（top-to-bottom，自定义滚动吸附）。
提供四种主题：dark-editorial（深色背景、衬线标题、编辑风格）、light-minimal（干净白色、无衬线）、corporate（海军蓝/白色、专业风格）、hacker（终端绿黑配色、等宽字体）。
内置多种幻灯片布局：标题、分栏、网格卡片、指标、引用、工作流、对比表、时间线、列表、结尾行动号召。
横向模式支持片段动画（fragment）、幻灯片编号、进度条、控件、代码高亮（如存在代码块）。
纵向模式支持方向键、鼠标滚轮（防抖）、Page Up/Down、Home/End、触摸滑动、进度条和淡入动画。
生成单个自包含 HTML 文件，除 CDN 资源（Google Fonts、Reveal.js、Lucide 图标）外所有样式和脚本内联。
响应式设计，包含 1400px、1024px、768px 断点的媒体查询。
每张内容幻灯片带有编号 kicker（如 01 // Section Name）和带图标与分区标签的头部栏。

使用方式

技能首先收集需求：导航模式（默认 horizontal）、主题（默认 dark-editorial）、受众与语气（从内容推断）、幻灯片数量偏好（根据内容密度自动决定）、品牌信息（默认无）、结尾行动号召/链接/联系方式（默认无）。若用户未指定，会一次性询问所有缺失参数；若用户表示“只要好看就行”，则使用默认值继续。

随后分析源文档，识别逻辑分区、关键数据点、列表与对比、引用、顺序流程、标题与结论，并规划内容到幻灯片类型的映射。接着从技能的 references 目录读取 THEMES.md、TEMPLATES.md、NAVIGATION.md，获取所选主题的 CSS 变量、各布局的 HTML 模式以及所选导航模式的 JS 初始化方式，然后组装为单个 HTML 文件。

横向模式的 CDN 依赖包括：

https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css
https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js
https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js（如有代码块）
https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/monokai.css（如有代码块）
https://unpkg.com/lucide@latest（图标）

纵向滚动模式对 Reveal.js 零 CDN 依赖，使用自定义 CSS scroll-snap 和原生 JS。

横向模式的 Reveal.js 配置示例：

Reveal.initialize({
  hash: true,
  slideNumber: true,
  controls: true,
  controlsLayout: "bottom-right",
  progress: true,
  center: false,
  transition: "slide",
  width: "100%",
  height: "100%",
  margin: 0.04,
  navigationMode: "linear",
  autoAnimate: true,
  autoAnimateDuration: 0.7,
  plugins: [RevealHighlight], // only if code blocks present
});

生成后，将 HTML 文件写入合适输出路径（如 ./presentation.html 或用户指定位置）并呈现给用户。若内容超过 15 张幻灯片，会先写骨架再分块追加内容。

适用场景

将文档、笔记或大纲快速转为浏览器可演示的幻灯片。
需要横向翻页或纵向滚动两种浏览体验的演示。
希望使用 Reveal.js 或纯滚动 HTML 演示而非 PowerPoint 的场景。
需要多种视觉主题（编辑风、极简、企业、黑客风）的演示。
包含指标、对比、时间线、工作流等结构化内容的演示。

限制

横向模式依赖 CDN 资源（Reveal.js、Lucide、Google Fonts），网络不可用或 CDN 故障时需切换为内联样式/脚本、内联 SVG 图标和系统字体栈。
内容过多可能导致幻灯片视口溢出，需拆分幻灯片或转为项目符号列表。
字体可能因 Google Fonts CDN 被阻止或缓慢而渲染异常，需添加系统字体回退。
Reveal.js 可能因脚本加载顺序或缺少插件而初始化失败，需检查 CDN 脚本标签顺序和浏览器控制台 404。
关于收费、价格、平台支持等具体信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制