Html Slideshow

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

Security Scan

The skill appears to do what it claims (convert Markdown outlines into static HTML slides), but there are several implementation choices that are unnecessary for the stated purpose or increase risk (unsanitized HTML output, runtime code generation, and hard-coded absolute paths in examples).

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).

What to consider before installing

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).

将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 目录包含完整示例。