功能描述

将Markdown演示大纲转换为HTML静态幻灯片，自动分页、理解布局规划、生成对应HTML结构

使用说明 (SKILL.md)

HTML Slideshow

Name: Html Slideshow
Author: vincentlau2046-sudo

将Markdown格式的演示大纲，经过AI内容理解后，自动分页切分，根据每页的布局规划生成对应HTML结构，最终生成可交互的静态HTML幻灯片。

优化后的工作流程

1️⃣ 内容理解

读取完整大纲/主题文稿，AI理解内容逻辑，从材料内容角度查漏补缺，将内容按照PPTX幻灯片的诉求重新梳理成完整大纲及内容。

核心要点：

不是简单复制原文，而是按PPT展示逻辑重构(财报类的模版financial.md）
提炼核心观点，每个章节/重点清晰呈现
补充必要的背景说明和过渡语句

2️⃣ 内容分页

根据新的完整大纲，AI理解内容逻辑，合理切分成页，每页单独保存md文件到 slides-md/ 目录。

分页原则：

每页一个独立完整的主题
逻辑连贯，避免内容割裂
适当留白，保持视觉呼吸感

3️⃣ 布局解析

读取每页md文件，解析"页面布局规划"字段，生成具体HTML布局结构（分栏、网格等）。

支持的布局：

左右分栏 / 两栏布局
2×2网格 / 四格布局
上中下纵向分布
左侧内容+右侧图表
表格展示、图表集成

4️⃣ 样式统一

全局CSS统一风格，支持多主题（default/nvidia/aliyun/dark），保持配色一致。

5️⃣ 交互完整

键盘翻页、全屏演示，支持任何现代浏览器。

特性

严格16:9比例：每页固定16:9，不滚动，完美适配演示屏
智能分页：AI理解内容逻辑，自动切分成逻辑完整的页面
布局识别：根据"页面布局规划"文字描述，生成对应HTML布局
完整键盘交互：方向键、空格、回车、退格都支持翻页，F键全屏
多主题支持：default(蓝色商务)、nvidia(绿色)、aliyun(橙色)、dark(深色)、tech(科技风格-白色主色调/黑色字体/红色高亮)
静态输出：纯HTML+CSS+JS，所有资源CDN加载，打开即可演示

使用方法

完整流程（从大纲到幻灯片）：

# 1. AI分析内容，理解重构+分页生成每页md
node /home/Vincent/.openclaw/workspace/skills/html-slideshow/scripts/split-slides.js \
  --input /path/to/outline.md \
  --output /path/to/output \
  --title "演示标题"

# 2. 根据每页md生成HTML
node /home/Vincent/.openclaw/workspace/skills/html-slideshow/scripts/generate-html.js \
  --input-dir /path/to/output/slides-md \
  --output /path/to/output/html \
  --title "演示标题" \
  --theme tech  # 或 aliyun/nvidia/dark/default

支持的布局

根据"页面布局规划"文字自动识别：

描述	生成布局
"左右分栏" / "两栏布局"	`grid-template-columns: 1fr 1fr`
"2×2网格" / "四四布局"	2行2列网格
"上中下" / "顶部标题+中部内容+底部总结"	flex纵向分布
"左侧表格右侧图表"	左侧表格 + 右侧图表容器

交互快捷键

按键	功能
→ / Space / Enter / PageDown	下一页
← / Backspace / PageUp	上一页
F / f	切换全屏
Esc	退出全屏

输出结构

output/
├── slides-md/              # 每页拆分后的markdown
│   ├── 01-cover.md
│   ├── 02-overview.md
│   └── ...
└── html/                   # 最终HTML输出
    ├── index.html
    └── slides/
        ├── 01-cover.html
        ├── 02-overview.html
        └── ...

依赖

Node.js
Chart.js (CDN)
Marked (CDN)

示例

examples 目录包含完整示例。

安全使用建议

This skill is functionally coherent for converting Markdown into static HTML slides, but follow these precautions before running it: - Treat input markdown as potentially dangerous: the generator intentionally allows raw HTML and script tags (the code comments say 'Don't escape - marked will render correctly, HTML is allowed'). Only run the scripts on trusted Markdown or sanitize/strip HTML before processing. Opening generated HTML in a browser will execute any embedded scripts. - Review and audit templates and any custom themes you load. The template compiler uses dynamic code generation (new Function) to build renderers; if you or others add templates untrusted templates could execute code during generation. - The SKILL.md examples include a hard-coded absolute path (/home/Vincent/...), which is likely an environment artifact. When running, point the scripts at your own safe input and output directories — avoid blindly running commands copied verbatim from the README/SKILL.md. - Run the tool in an isolated environment (container or VM) if you need to process Markdown from untrusted sources, and inspect the produced HTML before serving it to others. Consider adding an HTML sanitizer (e.g., DOMPurify on the client or a server-side sanitizer) if you must accept untrusted input. - If you expect this to run autonomously in an agent, be cautious: the agent could read local files you point it at and write HTML that will execute in browsers — only give it directories and files you are comfortable exposing. If you want, I can point out the exact lines/files that allow raw HTML/script injection and show small code changes to mitigate the risk (e.g., sanitize output or disable inline scripts).

功能分析

Type: OpenClaw Skill Name: html-slideshow Version: 2.0.3 The skill bundle is a comprehensive tool for converting Markdown outlines into interactive HTML slideshows. It features automated content splitting, semantic layout analysis, and a component-based theme system. While the bundle includes several redundant script versions (e.g., generate-html-v2.1.js through v2.3.js) and employs potentially risky patterns such as 'new Function' for template compilation and allowing raw HTML in slides (XSS risk), these appear to be functional design choices for a developer tool rather than intentional malware. No evidence of data exfiltration, malicious prompt injection, or unauthorized remote execution was found.

能力评估

✓ Purpose & Capability

Name/description require Node and scripts to parse Markdown and generate HTML — the included Node scripts, layout analyzer, split/generate scripts, templates and themes align with the stated purpose. No unrelated credentials, binaries, or external services are requested.

⚠ Instruction Scope

Runtime instructions tell the agent to run included Node scripts that read a Markdown file and write HTML files (expected). However: (1) the SKILL.md examples use a hard-coded absolute path (/home/Vincent/.openclaw/...) which is odd and may cause the agent to reference an environment-specific path; (2) multiple generate scripts explicitly state they do not escape or sanitize input (e.g. 'Don't escape - marked will render correctly, HTML is allowed'), meaning user-provided Markdown can inject raw HTML and <script> tags into produced slides — this increases XSS/exfiltration risk when opening generated HTML; (3) templates and the component registry render client-side <script> blocks (registry.chart injects <script> new Chart(...)), so generated output can execute arbitrary JS in the viewer's browser. These behaviors are within a slide generator's domain but are high-risk when processing untrusted input.

✓ Install Mechanism

This is instruction-only with code files bundled in the skill (no external install/download). Required runtime is only Node.js. No remote downloads or URL-based installers were observed in the provided files.

✓ Credentials

No environment variables, credentials, or unrelated config paths are requested. The scripts read user-supplied input/output paths and create local output/themes directories which is proportional to the skill's purpose.

✓ Persistence & Privilege

The skill does not request always:true and does not modify other skills. It writes files to provided output folders and may create a themes/ directory under the skill location — behaviour expected for a generator. Model invocation is not disabled (normal).

版本历史

v2.0.3

- Added multiple new script files for content-aware splitting, layout parsing, and HTML generation (various versions and fixes). - Introduced a new slide template file (slide-v2.3.html). - Removed package.json from the repository. - Enhanced script modularity, providing more ways to process and generate slideshow content.

v1.0.2

Version 1.0.2 — Major upgrade with component architecture and advanced theming. - Introduced a pluggable UI component system for flexible, reusable slide components. - Added a complete theme management system; supports user-defined custom themes. - Implemented a dynamic content-aware pagination algorithm based on density and semantics. - Enhanced automatic layout recognition with 5 layout types. - Added new utility scripts for layout analysis, Markdown validation, smart splitting, and theme configuration. - Expanded documentation for custom theme creation and advanced workflows.

v1.0.1

- Added a "tech"主题风格 (白色主色调/黑色字体/红色高亮) to多主题支持 - 改进使用说明，示例命令行参数更详细，明确生成HTML的output目录与主题选择 - 新增 financial.md 演示模版示例，提升财报类场景支持 - 添加 package.json 和 README.md，丰富项目说明及依赖声明 - 移除 CONTRIBUTING.md 和 _meta.json，精简无关内容

v1.0.0

- Initial release of html-slideshow. - Converts Markdown outlines into interactive, static HTML slides with automated pagination and layout understanding. - Supports multi-theme styling (default, nvidia, aliyun, dark). - Intelligent AI-based slide segmentation and content reconstruction for logical presentation. - Interactive controls: keyboard navigation and fullscreen mode. - Outputs responsive, fixed 16:9 slides, ready to use in any modern browser.

元数据

Slug html-slideshow

版本 2.0.3

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 4

常见问题

Html Slideshow 是什么？

将Markdown演示大纲转换为HTML静态幻灯片，自动分页、理解布局规划、生成对应HTML结构. 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 136 次。

如何安装 Html Slideshow？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install html-slideshow」即可一键安装，无需额外配置。

Html Slideshow 是免费的吗？

是的，Html Slideshow 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

Html Slideshow 支持哪些平台？

Html Slideshow 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 Html Slideshow？

由 vincentlau2046-sudo（@vincentlau2046-sudo）开发并维护，当前版本 v2.0.3。

Html Slideshow