📦 Revealjs Slide Creator — Reveal.js 幻灯片生成器

v0.1.2

使用 Reveal.js 通过 CDN 创建精美的 HTML 幻灯片,输出单个 HTML 文件。

2· 232·1 当前·1 累计
tomowang 头像by @tomowang (Tomo Wang)·MIT-0
下载技能包
License
MIT-0
最后更新
2026/3/17
0
安全扫描
VirusTotal
无害
查看报告
OpenClaw
安全
high confidence
技能的需求和指令与其声明的用途(创建 Reveal.js HTML 幻灯片文件)相匹配;没有请求或安装不匹配的内容,但生成的 HTML 引用了第三方 CDN 和媒体主机,打开时可能会泄露查看者元数据。
评估建议
该技能看起来是连贯的并且做到了它所说的:从模板生成 Reveal.js HTML 文件。在安装/使用之前,请注意提供的模板链接到第三方 CDN 和图片/视频主机——当您或其他人打开生成的 HTML 时,这些外部主机将接收请求并可能记录查看者的 IP 或其他元数据。如果您需要离线/自包含的幻灯片文件或想避免外部请求,请让技能(或编辑模板)嵌入资源或使用库的本地副本。在广泛分享之前,始终在安全环境中预览生成的 HTML。...
详细分析 ▾
用途与能力
名称/描述说明:生成 Reveal.js HTML 文件。该技能仅为指令性质,读取本地模板,填充 <div class="slides"> 容器,并保存 HTML 文件——对于此目的来说都是适当且预期的。
指令范围
SKILL.md 保持任务聚焦(收集内容、使用模板、生成文件)。它确实指示将输出写入用户指定的位置。模板和指令依赖于 CDN 托管的 Reveal.js、MathJax 和外部媒体(picsum.photos、static.slid.es、cdnjs/jsdelivr)。打开生成的 HTML 将导致查看者的浏览器获取第三方资源(可能的 IP/元数据泄露和外部跟踪)。该技能本身并不指示代理获取或传输用户文件或密钥。
安装机制
没有安装规范,平台也不执行任何代码——仅为指令性质的技能。从安装角度来看,这是最低风险的。
凭证需求
该技能不请求环境变量、凭证或配置路径。这与其声明的功能是相称的。
持久化与权限
always 为 false,该技能不请求持久/全局权限或修改其他技能;预期的行为是正常的有限文件写入(保存生成的 HTML)。
安全有层次,运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发,无需署名。

运行时依赖

无特殊依赖

版本

latestv0.1.22026/3/17

- 添加了通过 CDN 创建 Reveal.js 幻灯片组的详细使用说明,输出单个 HTML 文件。 - 强制执行严格的内容约束以防止幻灯片溢出;如果内容超过显示区域,必须拆分幻灯片。 - 列出了要使用的高级 Reveal.js 功能,包括 markdown、背景、媒体、代码高亮、数学、片段和超链接。 - 包含了利用原生 Reveal.js 布局辅助类的指南,以改进幻灯片设计。 - 明确所有资源必须通过 CDN 加载,幻灯片必须使用提供的 HTML 模板以保持一致性。 - 概述了工作流程:收集内容、生成幻灯片、保存 HTML 文件并通知用户。

无害

安装命令

点击复制
官方npx clawhub@latest install revealjs-slide-creator
镜像加速npx clawhub@latest install revealjs-slide-creator --registry https://cn.longxiaskill.com

技能文档

目标

当用户请求您创建演示文稿、幻灯片或 Reveal.js 幻灯片组时使用此技能。您将使用 Reveal.js CDN 生成一个自包含的 HTML 文件。

说明

  • 从用户处收集演示文稿内容(标题、章节、幻灯片、演讲者备注)。如果内容未完全提供,请使用 notify_user 工具请求澄清。
  • 从此技能文件夹中的 templates/template.html 读取标准的 Reveal.js 模板。
  • 用实际的幻灯片内容替换
    容器中的占位符内容。
- 使用 表示单个水平幻灯片。 - 使用嵌套的 元素表示垂直幻灯片。 - 如果您更喜欢或内容主要是基于文本的,您也可以在 中使用 markdown。
  • 将最终输出保存为 HTML 文件到用户期望的位置(如果未指定,则保存在当前文件夹中)。
  • 告知用户文件已创建,他们可以直接在浏览器中打开。

指南

  • 内容约束(关键):严格约束每个 的内容,使文本和元素不超过屏幕尺寸(默认的 Reveal.js 显示区域)。如果为单个幻灯片提供的内容太长,您必须将其拆分为多个单独的幻灯片(例如,使用连续的 元素),而不是将其全部塞入一张幻灯片。
  • 高级功能:您必须使用 Reveal.js 原生支持的高级功能来创建引人入胜的幻灯片:
- Markdown:使用 ...markdown content...。 - 背景:在 上使用 data-background-color="color"data-background-image="url"data-background-video="url"。 - 媒体和外部内容:使用标准 HTML 或 iframe 来获取交互式媒体。 - 代码:使用
...
进行语法高亮。 - 数学:MathJax3 已配置。使用 $e^{i\pi} + 1 = 0$ 表示行内数学,使用 \[...\] 表示块级公式。 - 片段:添加 class="fragment"class="fragment fade-up"class="fragment highlight-red" 等,以逐步显示元素。 - 链接:标准的 锚点标签。 - 布局辅助类:通过使用原生布局辅助功能来最大化视觉吸引力: - class="r-stack":将多个图片/元素包装在
中,使它们相互叠加居中(通常与 class="fragment" 配对使用)。 - class="r-fit-text":添加到标题(例如

),使它们完美填充幻灯片宽度。 - class="r-stretch":添加到图片或视频,使其自动缩放以填充幻灯片上的剩余垂直空间。 - class="r-frame":添加到图片或容器,为其添加一个整洁的边框框架。
  • 始终使用模板中提供的 CDN 上的 Reveal.js CSS 和 JS(例如 https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.0.4/)。
  • 除非明确要求,否则不要为此技能下载 Reveal.js 或使用 npm;坚持使用 CDN 以获取独立的 HTML 文件。
  • 模板中默认启用了插件(Markdown、Highlight、Notes)。如果适用,请使用它们(例如,使用 表示演讲者备注)。
  • 确保生成的 HTML 完全功能正常、正确缩进,并包含在标准的 HTML5 模板中。

数据来源ClawHub ↗ · 中文优化:龙虾技能库