Back to Details

html-presentation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

HTML Presentation Skill

HTML 演示文稿制作技能

Convert documents, outlines, or freeform content into polished, self-contained HTML slide presentations with keyboard and scroll navigation.
将文档、大纲或自由格式内容转换为支持键盘和滚动导航的精美独立HTML幻灯片演示文稿。

When This Skill Triggers

技能触发场景

  • User provides a document and asks for a "presentation", "slides", or "deck" as HTML
  • User asks to convert notes/outline/content into browser-presentable slides
  • User wants a Reveal.js or scroll-based HTML presentation
  • User references wanting to present from a browser rather than PowerPoint
  • 用户提供文档，并要求制作HTML格式的“演示文稿”、“幻灯片”或“演示文稿组”
  • 用户要求将笔记/大纲/内容转换为可在浏览器中展示的幻灯片
  • 用户需要基于Reveal.js或滚动模式的HTML演示文稿
  • 用户明确希望在浏览器中进行演示，而非使用PowerPoint

Step 0: Gather Requirements

步骤0：收集需求

Before generating anything, check whether the user has specified the following. If any are missing, ask for clarification in a single concise message. Do NOT ask more than once — use sensible defaults for anything the user declines to specify.
Required context (ask if missing):
ParameterWhat to askDefault if not specified
Navigation mode"Should slides go left-to-right (horizontal) or top-to-bottom (vertical scroll)?"
horizontal
Theme"Which visual style? Options: 
dark-editorial
(dark bg, serif headlines, editorial feel), 
light-minimal
(clean white, sans-serif), 
corporate
(navy/white, professional), 
hacker
(terminal green-on-black, monospace)"
dark-editorial
Audience & tone"Who is this for? (e.g., investors, engineers, conference talk, internal team)"Infer from content
Slide count preference"Roughly how many slides?"Auto-determine from content density
Branding"Any logo text, tagline, or accent color to use in the header?"None
CTA / closing"Any call-to-action, links, or contact info for the final slide?"None
If the user provides a document and says something like "make this a presentation", ask all missing parameters in one shot. If they say "just make it look good", use defaults and proceed.
在生成演示文稿前，先确认用户是否已指定以下信息。若有缺失，用一条简洁的消息询问用户。请勿多次询问——对于用户不愿指定的内容，使用合理默认值。
需确认的信息（缺失时询问）：
参数询问内容未指定时的默认值
导航模式“幻灯片应采用左右切换（横向）还是上下滚动（垂直）？”
horizontal
主题“需要哪种视觉风格？可选：
dark-editorial
（深色背景，衬线标题，编辑风）、
light-minimal
（简洁白色，无衬线字体）、
corporate
（深蓝/白色，专业风）、
hacker
（终端绿黑配色等宽字体）”
dark-editorial
受众与语气“演示面向的受众是？（例如：投资者、工程师、会议演讲、内部团队）”根据内容推断
幻灯片数量偏好“大致需要多少张幻灯片？”根据内容密度自动确定
品牌标识“是否需要在页眉中添加标志文字、标语或强调色？”无
行动号召/收尾“最后一张幻灯片是否需要添加行动号召、链接或联系信息？”无
若用户提供文档并表示“把这个做成演示文稿”，一次性询问所有缺失的参数。若用户表示“只要做得好看就行”，则使用默认值继续操作。

Step 1: Analyze the Source Document

步骤1：分析源文档

Read the uploaded document or provided content. Identify:
  1. Logical sections — these become slides or slide groups
  2. Key data points — numbers, metrics, percentages → use metric/stat slide layouts
  3. Lists and comparisons — feature lists, pros/cons → use card grids or comparison tables
  4. Quotes or testimonials — use quote-block layouts
  5. Sequential processes — workflows, timelines → use workflow/timeline slide layouts
  6. Title and conclusion — first and last slides get special treatment
Create a mental outline mapping content sections to slide types before writing any HTML.
阅读用户上传的文档或提供的内容，确定：
  1. 逻辑章节——这些将成为单张幻灯片或幻灯片组
  2. 关键数据点——数字、指标、百分比→使用指标/统计幻灯片布局
  3. 列表与对比内容——功能列表、优缺点→使用卡片网格或对比表格
  4. 引用或推荐语——使用引用块布局
  5. 流程步骤——工作流、时间线→使用工作流/时间线幻灯片布局
  6. 标题与结论——第一张和最后一张幻灯片采用特殊样式
在编写HTML前，先在脑中规划好内容章节与幻灯片类型的对应关系。

Step 2: Select Slide Layouts

步骤2：选择幻灯片布局

Each slide should use one of these layout patterns. Mix them for visual variety — never use the same layout for more than 2 consecutive slides.
LayoutWhen to UseCSS Class
TitleOpening slide, section dividers
slide--section slide--center
SplitText + supporting content side-by-side
split
or 
split--60-40
Grid Cards3-6 related items (features, risks, components)
grid-2
, 
grid-3
, 
grid-4
MetricsKey numbers/stats to emphasize
metrics
with 
metric
items
QuoteExpert quotes, testimonials, key statements
quote-block
WorkflowSequential process, pipeline, architecture
workflow
with arrow connectors
Comparison TableFeature comparison, before/after
comparison-table
TimelineChronological events, roadmap phases
timeline
ListOrdered or unordered key points
list
, 
list--check
, 
list--numbered
CTA / ClosingFinal slide with links and contact
slide--section slide--center
+ 
contact-grid
每张幻灯片应使用以下布局模式之一。混合使用多种布局以增加视觉多样性——连续两张幻灯片不得使用相同布局。
布局使用场景CSS 类
标题页开场幻灯片、章节分隔页
slide--section slide--center
分栏布局文本+辅助内容左右分栏
split
或 
split--60-40
网格卡片3-6个相关条目（功能、风险、组件）
grid-2
, 
grid-3
, 
grid-4
指标页需要突出展示的关键数字/统计
metrics
搭配 
metric
条目
引用页专家引用、推荐语、关键声明
quote-block
工作流流程步骤、管道、架构
workflow
搭配箭头连接器
对比表格功能对比、前后对比
comparison-table
时间线时间顺序事件、路线图阶段
timeline
列表页有序或无序关键点
list
, 
list--check
, 
list--numbered
行动号召/收尾页包含链接和联系信息的最后一张幻灯片
slide--section slide--center
+ 
contact-grid

Step 3: Generate the HTML

步骤3：生成HTML

Read the appropriate theme and template files from this skill's references directory before writing code:
  1. Always read 
    references/THEMES.md
    to get the CSS variables and styles for the selected theme
  2. Always read 
    references/TEMPLATES.md
    to get the HTML patterns for each slide layout
  3. Always read 
    references/NAVIGATION.md
    to get the correct JS initialization for the selected navigation mode
Then assemble the presentation as a single self-contained HTML file:
编写代码前，先从技能的参考目录中读取对应的主题和模板文件：
  1. 务必阅读 
    references/THEMES.md
    ，获取所选主题的CSS变量和样式
  2. 务必阅读 
    references/TEMPLATES.md
    ，获取每种幻灯片布局的HTML模板
  3. 务必阅读 
    references/NAVIGATION.md
    ，获取所选导航模式的正确JS初始化代码
随后将演示文稿组装为单个独立HTML文件：

File Structure

文件结构

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, fonts, Reveal.js CDN (horizontal) or custom CSS (vertical) -->
    <!-- All styles inline in <style> block -->
  </head>
  <body>
    <!-- Slides markup -->
    <!-- Scripts: Reveal.js init (horizontal) or custom scroll handler (vertical) -->
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, fonts, Reveal.js CDN (horizontal) or custom CSS (vertical) -->
    <!-- All styles inline in <style> block -->
  </head>
  <body>
    <!-- Slides markup -->
    <!-- Scripts: Reveal.js init (horizontal) or custom scroll handler (vertical) -->
  </body>
</html>

Key Rules

核心规则

  1. Single file — everything inline. No external CSS/JS files except CDN resources (Google Fonts, Reveal.js, Lucide icons).
  2. CDN dependencies (horizontal mode): 
    • 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
      (if code blocks present)
    • https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/monokai.css
      (if code blocks present)
    • https://unpkg.com/lucide@latest
      (for icons)
  3. Vertical scroll mode — zero CDN dependencies for Reveal.js. Uses custom CSS scroll-snap and vanilla JS for keyboard/scroll navigation.
  4. Google Fonts — load fonts matching the theme. Always use 
    <link rel="preconnect">
    for performance.
  5. Responsive — include media queries for 1400px, 1024px, and 768px breakpoints.
  6. Fragment animations — use 
    class="fragment"
    for progressive reveal in horizontal mode. For vertical mode, use intersection observer fade-in animations.
  7. Slide numbers — always show current slide number.
  8. Kicker text — each content slide gets a numbered kicker like 
    01 // Section Name
    for editorial feel.
  9. Header bar — each content slide (not title/section slides) gets a header with an icon and section label.
  1. 单文件——所有内容内联。除CDN资源（Google Fonts、Reveal.js、Lucide图标）外，无外部CSS/JS文件。
  2. 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
      （用于图标）
  3. 垂直滚动模式——无需Reveal.js的CDN依赖。使用自定义CSS滚动吸附和原生JS实现键盘/滚动导航。
  4. Google Fonts——加载与主题匹配的字体。为提升性能，务必使用
    <link rel="preconnect">
    。
  5. 响应式——包含针对1400px、1024px和768px断点的媒体查询。
  6. 分段动画——横向模式使用
    class="fragment"
    实现逐步展示。垂直模式使用交叉观察器实现淡入动画。
  7. 幻灯片编号——始终显示当前幻灯片编号。
  8. 小标题文本——每张内容幻灯片添加编号小标题，如
    01 // 章节名称
    ，增强编辑风质感。
  9. 页眉栏——每张内容幻灯片（非标题/章节页）添加带图标和章节标签的页眉。

Horizontal Mode: Reveal.js Config

横向模式：Reveal.js 配置

javascript
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
});
javascript
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
});

Vertical Scroll Mode: Navigation Behavior

垂直滚动模式：导航行为

  • Each slide is a full-viewport section with 
    scroll-snap-align: start
  • Arrow keys (Up/Down/Left/Right) all navigate between slides
  • Mouse wheel scrolls between slides (debounced)
  • Page Up/Down, Home/End supported
  • Progress bar at bottom shows position
  • Smooth scroll transitions between slides
  • Touch swipe support for mobile
  • 每张幻灯片为全屏视口区域，设置
    scroll-snap-align: start
  • 方向键（上/下/左/右）均可切换幻灯片
  • 鼠标滚轮可切换幻灯片（防抖处理）
  • 支持Page Up/Down、Home/End键
  • 底部进度条显示当前位置
  • 幻灯片间平滑滚动过渡
  • 移动端支持触摸滑动

Step 4: Write to Output

步骤4：输出文件

  1. Create the HTML file at an appropriate output path (e.g., 
    ./presentation.html
    or a user-specified location)
  2. Present the file to the user
If the content is large (>15 slides), build iteratively — write the skeleton first, then append slide content in chunks.
  1. 在合适的输出路径创建HTML文件（例如：
    ./presentation.html
    或用户指定的位置）
  2. 将文件交付给用户
若内容较多（超过15张幻灯片），可分步骤生成——先编写框架，再批量添加幻灯片内容。

Error Handling

错误处理

ProblemCauseFix
CDN fails to load (Reveal.js, Lucide, Google Fonts)Network unavailable or CDN outageSwitch to inline styles/scripts: embed Reveal.js core inline, replace Lucide icons with inline SVG paths, use system font stack (
system-ui, -apple-system, sans-serif
)
Content overflows slide viewportToo much text or too many elements per slideSplit the slide into two: move supporting detail to a follow-up slide or convert prose to a bullet list
Fonts render incorrectly or fail to loadGoogle Fonts CDN blocked or slowAdd system font fallback in the font-family stack: 
'Font Name', system-ui, Georgia, serif
Reveal.js fails to initializeScript load order issue or missing pluginVerify CDN script tags appear before 
Reveal.initialize()
; check browser console for 404s
问题原因解决方法
CDN加载失败（Reveal.js、Lucide、Google Fonts）网络不可用或CDN故障切换为内联样式/脚本：将Reveal.js核心代码内联，用内联SVG路径替换Lucide图标，使用系统字体栈（
system-ui, -apple-system, sans-serif
）
内容超出幻灯片视口单张幻灯片文本过多或元素过多将幻灯片拆分为两张：将次要内容移至后续幻灯片，或将散文转换为项目符号列表
字体渲染异常或加载失败Google Fonts CDN被屏蔽或加载缓慢在字体栈中添加系统字体备选：
'Font Name', system-ui, Georgia, serif
Reveal.js初始化失败脚本加载顺序错误或插件缺失确认CDN脚本标签在
Reveal.initialize()
之前；检查浏览器控制台是否有404错误

Quality Checklist

质量检查清单

Before delivering, verify:
  • All slides render without overflow (content fits viewport)
  • Navigation works with arrow keys AND mouse scroll
  • Slide numbers are visible
  • Fragment animations work (horizontal) or fade-in works (vertical)
  • Links are clickable (
    pointer-events: auto
    in Reveal.js)
  • Code blocks have syntax highlighting (if present)
  • Responsive at all three breakpoints
  • No broken icon references (Lucide icons initialized)
  • Consistent kicker numbering across all slides
  • Title slide and closing slide have distinct visual treatment
交付前，请验证：
  • 所有幻灯片内容均在视口内，无溢出
  • 导航支持方向键和鼠标滚动
  • 幻灯片编号可见
  • 分段动画（横向模式）或淡入效果（垂直模式）正常工作
  • 链接可点击（Reveal.js中需设置
    pointer-events: auto
    ）
  • 代码块（若有）支持语法高亮
  • 在三个断点下均为响应式
  • 无无效图标引用（Lucide图标已初始化）
  • 所有幻灯片的小标题编号保持一致
  • 标题页和收尾页有独特的视觉样式