⚡

// Skill profile

Reveal.js PPT Skill

Name: Reveal.js PPT Skill
Author: cao-yuu

name: ppt-skill

by cao-yuu · published 2026-03-22

图像生成数据处理加密货币

Total installs

Stars

★ 0

Last updated

2026-03

// Install command

$ claw add gh:cao-yuu/cao-yuu-ppt-skill

View on GitHub

// Full documentation

---

name: ppt-skill

version: 0.2.0

description: 触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示; 使用场景：用户需要生成演示文稿、汇报材料或教学幻灯片。

---

# Reveal.js PPT Skill

Overview

触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示

使用场景：用户需要生成基于 Reveal.js 的 HTML 演示文稿，在浏览器中运行。

使用 Reveal.js 创建专业的 HTML 演示文稿，支持丰富的过渡效果、图表集成、演讲者备注等功能。

---

设计原则

**关键要求**：在创建任何演示文稿之前，必须先分析内容并选择合适的设计元素。

内容驱动设计

1. **分析主题**：这个演示文稿是关于什么的？它暗示了什么样的基调、行业或情绪？

2. **检查品牌**：如果用户提到公司/组织，考虑其品牌色彩和身份

3. **匹配配色**：选择反映主题的颜色

4. **声明方案**：在编写代码之前，解释你的设计选择

**必须遵守**：

✅ 在编写代码之前，声明你的内容驱动设计方案

✅ 使用网络安全字体或通过 \`@import\` 引入 Google Fonts

✅ 通过大小、粗细和颜色创建清晰的视觉层次

✅ 确保可读性：强对比度、适当的文字大小、整洁的对齐

✅ 保持一致性：在所有幻灯片中重复使用相同的模式、间距和视觉语言

配色方案选择

**创意选色原则**：

**超越默认**：什么颜色真正匹配这个特定主题？避免自动驾驶式的选择

**多角度考虑**：主题、行业、情绪、能量水平、目标受众、品牌身份

**大胆尝试**：尝试意想不到的组合——医疗演示不一定要用绿色，金融不一定要用深蓝

**构建调色板**：选择 3-5 种协调的颜色（主色 + 辅助色 + 强调色）

**确保对比度**：文字必须在背景上清晰可读

**精选配色方案**（选择一个、调整它，或创建你自己的）：

| 编号 | 名称 | 颜色组合 |

|------|------|----------|

| 1 | **Classic Blue** | 深海军蓝 \`#1C2833\`、石板灰 \`#2E4053\`、银色 \`#AAB7B8\`、米白 \`#F4F6F6\` |

| 2 | **Teal & Coral** | 青色 \`#5EA8A7\`、深青 \`#277884\`、珊瑚 \`#FE4447\`、白色 \`#FFFFFF\` |

| 3 | **Bold Red** | 红 \`#C0392B\`、亮红 \`#E74C3C\`、橙 \`#F39C12\`、黄 \`#F1C40F\`、绿 \`#2ECC71\` |

| 4 | **Warm Blush** | 淡紫 \`#A49393\`、腮红 \`#EED6D3\`、玫瑰 \`#E8B4B8\`、奶油 \`#FAF7F2\` |

| 5 | **Burgundy Luxury** | 酒红 \`#5D1D2E\`、深红 \`#951233\`、铁锈 \`#C15937\`、金色 \`#997929\` |

| 6 | **Deep Purple & Emerald** | 紫色 \`#B165FB\`、深蓝 \`#181B24\`、翡翠 \`#40695B\`、白色 \`#FFFFFF\` |

| 7 | **Cream & Forest** | 奶油 \`#FFE1C7\`、森林绿 \`#40695B\`、白色 \`#FCFCFC\` |

| 8 | **Pink & Purple** | 粉红 \`#F8275B\`、珊瑚 \`#FF574A\`、玫瑰 \`#FF737D\`、紫色 \`#3D2F68\` |

| 9 | **Lime & Plum** | 青柠 \`#C5DE82\`、李子 \`#7C3A5F\`、珊瑚 \`#FD8C6E\`、蓝灰 \`#98ACB5\` |

| 10 | **Black & Gold** | 金色 \`#BF9A4A\`、黑色 \`#000000\`、奶油 \`#F4F6F6\` |

| 11 | **Sage & Terracotta** | 鼠尾草 \`#87A96B\`、赤陶 \`#E07A5F\`、奶油 \`#F4F1DE\`、炭灰 \`#2C2C2C\` |

| 12 | **Charcoal & Red** | 炭灰 \`#292929\`、红色 \`#E33737\`、浅灰 \`#CCCBCB\` |

| 13 | **Vibrant Orange** | 橙色 \`#F96D00\`、浅灰 \`#F2F2F2\`、炭灰 \`#222831\` |

| 14 | **Forest Green** | 黑色 \`#191A19\`、绿色 \`#4E9F3D\`、深绿 \`#1E5128\`、白色 \`#FFFFFF\` |

| 15 | **Retro Rainbow** | 紫 \`#722880\`、粉 \`#D72D51\`、橙 \`#EB5C18\`、琥珀 \`#F08800\`、金 \`#DEB600\` |

| 16 | **Vintage Earthy** | 芥末 \`#E3B448\`、鼠尾草 \`#CBD18F\`、森林绿 \`#3A6B35\`、奶油 \`#F4F1DE\` |

| 17 | **Coastal Rose** | 老玫瑰 \`#AD7670\`、海狸 \`#B49886\`、蛋壳 \`#F3ECDC\`、灰绿 \`#BFD5BE\` |

| 18 | **Orange & Turquoise** | 浅橙 \`#FC993E\`、灰青 \`#667C6F\`、白色 \`#FCFCFC\` |

幻灯片内容多样化

**多样化展示是关键**。即使幻灯片有相似的内容类型，也要变化视觉呈现：

在不同幻灯片使用**不同布局**：一页用分栏，另一页用堆叠盒子，第三页用带图标的标注

混合容器样式：纯文本、盒子、标注、引用块

使用**视觉层次**：\`<strong>\` 标记关键词，不同颜色区分类别

用其他元素（引用、标注、分栏）打破列表的单调

不要在连续幻灯片上重复相同的布局模式

**保持可扫描性**：

短要点，不是段落

每页尽可能只有一个主要观点

使用图标（Font Awesome）增加视觉趣味

**内容少时放大**：当幻灯片内容较少时，使用更大的字号填充空间，不要留下大片空白配小字。

视觉细节选项

**几何图案 (Geometric Patterns)**：

对角线分隔符代替水平线

不对称列宽（30/70、40/60、25/75）

90° 或 270° 旋转文字标题

圆形/六边形图片框架

角落三角形装饰

重叠形状增加深度

**边框与框架处理 (Border & Frame Treatments)**：

单侧粗边框（10-20pt）

双线边框配对比色

角括号代替完整边框

L 形边框（上+左或下+右）

标题下划线强调（3-5pt 粗）

**排版处理 (Typography Treatments)**：

极端尺寸对比（72pt 标题 vs 11pt 正文）

全大写标题配宽字间距

超大编号显示

等宽字体用于数据/统计/技术内容

窄体字体用于密集信息

轮廓文字强调

**图表与数据样式 (Chart & Data Styling)**：

单色图表配单一强调色

水平条形图代替垂直

点图代替条形图

最少或无网格线

数据标签直接在元素上（无图例）

超大数字显示关键指标

**布局创新 (Layout Innovations)**：

全出血图片配文字叠加

侧边栏列（20-30% 宽度）用于导航/上下文

模块化网格系统（3×3、4×4 块）

Z 形或 F 形内容流

浮动文字框覆盖彩色形状

杂志风格多栏布局

**背景处理 (Background Treatments)**：

纯色块占据 40-60% 幻灯片

渐变填充（仅垂直或对角线）

分割背景（两色，对角线或垂直）

边缘到边缘色带

负空间作为设计元素

布局技巧

**图表/表格布局规则**：

✅ **两栏布局（首选）**：标题横跨全宽，下方两栏 - 一栏文字/要点，另一栏特色内容。使用不等宽 flexbox（如 40%/60%）优化空间

✅ **全屏布局**：让特色内容（图表/表格）占据整个幻灯片以获得最大冲击力和可读性

❌ **禁止垂直堆叠**：不要将图表/表格放在文字下方的单列中 - 这会导致可读性差和布局问题

---

核心规范

技术选型

使用 Reveal.js 实现（功能强大、专业演示库、支持丰富的过渡效果和主题）

**优势**：

专为演示文稿设计，支持嵌套幻灯片（垂直/水平导航）

内置多种过渡动画和主题样式

支持 Markdown、代码高亮、演讲者备注

完善的键盘导航和触控支持

响应式设计，自动适配不同屏幕

**CDN 引入**：

\`\`\`html

\`\`\`

HTML 结构

\`\`\`html

<h1>第一页标题</h1>

<p>第一页内容</p>

</section>

<h2>第二页标题</h2>

<ul>

</ul>

</section>

</div>

\`\`\`

布局要求

每页视口：**100% 宽度 × 100% 高度**（必须铺满容器）

内容居中：Reveal.js 自动处理水平+垂直居中

字号：标题 48-72px，正文 24-32px

每页建议：1 个主标题 + 3-5 个要点

内容必须适应单页，不能溢出

**⭐ 关键布局样式（必须包含）**：

\`\`\`css

/* 确保 Reveal.js 铺满容器 */

.reveal {

width: 100% !important;

height: 100% !important;

}

.reveal .slides {

width: 100% !important;

height: 100% !important;

}

.reveal .slides section {

width: 100% !important;

height: 100% !important;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 40px;

box-sizing: border-box;

}

\`\`\`

交互配置

Reveal.js 初始化（必须包含）：

\`\`\`javascript

Reveal.initialize({

hash: true,

controls: true,

progress: true,

center: true,

transition: "slide",

keyboard: true,

touch: true,

mouseWheel: false,

autoSlide: 0,

// ⭐ 关键：使用 100% 确保铺满容器

width: "100%",

height: "100%",

margin: 0,

minScale: 1,

maxScale: 1

});

\`\`\`

支持：键盘导航（← → ↑ ↓）、触摸滑动、全屏模式（F）、概览模式（ESC）

约束规范

**禁止**：

垂直滚动（每页内容必须适应视口）

复杂表单交互

需要滚动才能看到的内容

过多文字（每页控制在 50 字以内）

**注意**：

按逻辑段落分页，每页一个主题

确保引入 Reveal.js CDN 资源

在 DOMContentLoaded 后初始化 Reveal

---

CSS 组件库

CSS 变量定义

在 \`<style>\` 标签中定义以下 CSS 变量，便于统一管理主题：

\`\`\`css

:root {

/* 背景色 */

--background-color: #ffffff;

--section-divider-bg: #f5f5f5;

/* 主题色 */

--primary-color: #2196F3;

--secondary-color: #ff9800;

--text-color: #222;

--muted-color: #666;

/* 组件色 */

--box-bg: #f5f5f5;

--box-border: #ddd;

--box-radius: 8px;

/* Callout 颜色 */

--blue: #2196F3;

--blue-bg: #e3f2fd;

--orange: #ff9800;

--orange-bg: #fff3e0;

--green: #4caf50;

--green-bg: #e8f5e9;

--gray: #666;

--gray-bg: #f5f5f5;

}

\`\`\`

Boxes 盒子组件

\`\`\`css

/* 基础盒子 - 填充背景 */

.box {

background: var(--box-bg);

border: 1px solid var(--box-border);

border-radius: var(--box-radius);

padding: 20px;

margin: 10px 0;

}

/* 轮廓盒子 - 仅边框 */

.box-outlined {

border: 1px solid var(--box-border);

border-radius: var(--box-radius);

padding: 20px;

margin: 10px 0;

background: transparent;

}

\`\`\`

**使用示例**：

\`\`\`html

<p>这是一个重要的信息盒子</p>

</div>

\`\`\`

Callouts 标注组件

\`\`\`css

/* 基础标注 */

.callout {

border-left: 6px solid var(--primary-color);

padding: 15px 20px;

margin: 15px 0;

background: #f9f9f9;

border-radius: var(--box-radius);

}

/* 颜色变体 */

.callout-blue { border-left-color: var(--blue); background: var(--blue-bg); }

.callout-orange { border-left-color: var(--orange); background: var(--orange-bg); }

.callout-green { border-left-color: var(--green); background: var(--green-bg); }

.callout-gray { border-left-color: var(--gray); background: var(--gray-bg); }

/* 顶部边框变体 */

.callout-top {

border-left: none;

border-top: 6px solid var(--primary-color);

}

\`\`\`

**使用示例**：

\`\`\`html

<p>这是一个蓝色的提示标注</p>

</div>

<p>操作已成功完成</p>

</div>

\`\`\`

Blockquotes 引用块

\`\`\`css

.reveal blockquote {

border-left: 4px solid var(--primary-color);

padding-left: 20px;

margin: 20px 0;

font-style: italic;

background: none;

box-shadow: none;

width: 100%;

}

.reveal blockquote cite {

display: block;

margin-top: 10px;

font-style: normal;

color: var(--muted-color);

}

\`\`\`

**使用示例**：

\`\`\`html

"设计不仅仅是外观和感觉，设计是它如何工作的。"

<cite>— Steve Jobs</cite>

</blockquote>

\`\`\`

文字尺寸工具类

基础文字为 16pt，使用以下类在内容较少时放大：

\`\`\`css

.text-lg { font-size: 18pt !important; } /* 稍大 */

.text-xl { font-size: 20pt !important; } /* 中等强调 */

.text-2xl { font-size: 24pt !important; } /* 强调 */

.text-3xl { font-size: 28pt !important; } /* 很大 */

.text-4xl { font-size: 32pt !important; } /* 最大正文 */

.text-muted { color: var(--muted-color) !important; }

.text-center { text-align: center !important; }

\`\`\`

多栏布局

**始终使用内联 CSS Grid**（不要创建工具类）：

\`\`\`html

</div>

</div>

</div>

\`\`\`

---

图表集成

使用 Chart.js 插件为幻灯片添加专业图表。

引入 Chart.js

在 CDN 资源部分添加：

\`\`\`html

\`\`\`

初始化时添加插件：

\`\`\`javascript

Reveal.initialize({

// ... 其他配置

plugins: [ RevealChart ],

chart: {

defaults: {

color: "lightgray",

borderColor: "lightgray"

}

});

\`\`\`

图表布局模式

**⚠️ 关键**：图表必须使用 flexbox 容器模式，否则会溢出！

#### 全屏图表

\`\`\`html

<!--

{

"data": {

"labels": ["Q1", "Q2", "Q3", "Q4"],

"datasets": [{

"label": "营收",

"data": [45, 52, 61, 78],

"backgroundColor": "#2196F3"

}]

"options": {

"maintainAspectRatio": false

}

-->

</canvas>

</div>

</section>

\`\`\`

#### 左右分栏（图表 + 内容）

\`\`\`html

<ul>

<li>第一个要点</li>

<li>第二个要点</li>

<li>第三个要点</li>

</ul>

</div>

<!--

{

"data": {

"labels": ["A", "B", "C"],

"datasets": [{

"data": [45, 35, 20],

"backgroundColor": ["#2196F3", "#4caf50", "#ff9800"]

}]

"options": {

"maintainAspectRatio": false

}

-->

</canvas>

</div>

</section>

\`\`\`

#### 上下分栏（内容 + 图表）

\`\`\`html

<p><strong>摘要：</strong>Q4 表现强劲，所有区域均超额完成目标。</p>

</div>

<!--

{

"data": {

"labels": ["1月", "2月", "3月", "4月", "5月", "6月"],

"datasets": [{

"label": "增长",

"data": [100, 120, 135, 150, 180, 210],

"borderColor": "#2196F3",

"fill": false

}]

"options": {

"maintainAspectRatio": false

}

-->

</canvas>

</div>

</section>

\`\`\`

图表类型

支持的类型：\`bar\`、\`line\`、\`pie\`、\`doughnut\`、\`radar\`、\`polarArea\`、\`scatter\`

**常用场景**：

**bar**：比较类别

**line**：展示趋势

**pie/doughnut**：展示占比

**scatter**：展示变量关系

图表样式

\`\`\`json

"datasets": [{

"data": [12, 19, 8, 15],

"backgroundColor": ["#2196F3", "#ff9800", "#4caf50", "#e91e63"]

}]

\`\`\`

**常用配色数组**：

\`\`\`javascript

// 蓝色系

["#1565c0", "#1976d2", "#1e88e5", "#2196f3", "#42a5f5"]

// 暖色系

["#c62828", "#ef6c00", "#f9a825", "#2e7d32", "#1565c0"]

// 分类色（区分度高）

["#2196F3", "#ff9800", "#4caf50", "#e91e63", "#9c27b0"]

\`\`\`

---

高级特性

Fragments 渐进式展示

点击逐步显示内容：

\`\`\`html

<p class="fragment">点击后出现</p>

\`\`\`

**动画类型**：

\`fade-in\`（默认）、\`fade-out\`

\`fade-up\`、\`fade-down\`、\`fade-left\`、\`fade-right\`

\`highlight-red\`、\`highlight-green\`、\`highlight-blue\`

\`strike\`（删除线）

演讲者备注

按 \`S\` 键打开演讲者视图：

\`\`\`html

<h2>幻灯片标题</h2>

演讲者私人备注：

- 记得提及 X

- 过渡到下一个话题

</aside>

</section>

\`\`\`

自定义背景

\`\`\`html

\`\`\`

Auto-Animate 自动动画

在幻灯片之间自动动画过渡，匹配 \`data-id\` 的元素会平滑过渡：

\`\`\`html

</section>

<h2>副标题带动画出现</h2>

</section>

\`\`\`

代码高亮

\`\`\`html

def hello():

print("Hello")

</code></pre>

\`\`\`

**行号高亮（点击逐步）**：

\`\`\`html

let a = 1;

let b = 2;

let c = x => 1 + 2 + x;

c(3);

</code></pre>

\`\`\`

过渡效果

\`\`\`html

\`\`\`

---

最佳实践

专业设计规范

**字体选择**：

标题：使用无衬线字体（Inter、思源黑体、Noto Sans SC），字重 600-700

正文：字号不低于 24px 确保投影可读性，字重 400-500

数据/强调：可使用等宽字体（JetBrains Mono）突出关键数字

\`\`\`html

\`\`\`

**视觉层次**：

建立清晰的信息层级：标题 > 副标题 > 正文 > 注释

运用留白管理呼吸空间，避免信息拥挤

通过字体大小、粗细、颜色差异引导视觉流线

重要信息使用色块、边框或图标辅助强调

**⭐ 信息结构增强**：

**强烈推荐**：使用 **Infographic skill** 来生成专业信息图，代替纯文字列表

**优势**：视觉冲击力强、信息传达高效、专业感更强

内容结构优化

**信息密度控制**：

每页不超过 7 个要点（符合认知负荷原则）

每个要点控制在 15 字以内

优先使用图表、图标替代纯文字

复杂数据拆分为多页递进展示

**标题层级规范**：

H1：仅用于封面标题和章节分隔页

H2：每页主标题，概括本页核心内容

H3：小节标题，用于内容分组

避免超过 3 级标题层次

**逻辑递进结构**：

\`\`\`

封面页 → 目录/议程 → 背景/问题 → 分析/方案 → 数据/论证 → 结论/行动 → 致谢/Q&A

\`\`\`

快捷键速查

| 按键 | 功能 |

|------|------|

| F | 全屏模式 |

| S | 演讲者视图 |

| ESC | 概览/退出 |

| B / . | 黑屏暂停 |

| O | 幻灯片概览 |

| ? | 快捷键帮助 |

---

专业模板

重要说明

本场景运行在已有的 HTML 容器内，**不要输出** \`<!DOCTYPE>\`、\`<html>\`、\`<head>\`、\`<body>\` 等文档级标签

**必须先输出完整的 DOM 结构**，再加载 Reveal.js 资源，确保用户可以实时看到元素上屏

样式可以通过 \`<style>\` 标签内联，脚本通过 \`<script>\` 标签引入

标准输出顺序

\`\`\`

1. Tailwind CSS CDN

2. 内联样式 (<style>) - 包含 CSS 变量和组件类

3. Reveal.js 容器结构 (<div class="reveal">)

4. 所有幻灯片内容 (<section>)

5. 自定义导航按钮

6. CDN 资源引入 (<link> 和 <script>)

7. 初始化脚本

\`\`\`

完整模板

\`\`\`html

<style>

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap");

/* CSS 变量 */

:root {

--primary-color: #2196F3;

--secondary-color: #ff9800;

--text-color: #222;

--muted-color: #666;

--box-bg: #f5f5f5;

--box-border: #ddd;

--box-radius: 8px;

--blue: #2196F3;

--blue-bg: #e3f2fd;

--orange: #ff9800;

--orange-bg: #fff3e0;

--green: #4caf50;

--green-bg: #e8f5e9;

}

/* 关键：确保铺满容器 */

.reveal {

font-family: "Noto Sans SC", "Inter", sans-serif;

width: 100% !important;

height: 100% !important;

}

.reveal .slides {

width: 100% !important;

height: 100% !important;

}

.reveal .slides > section {

width: 100% !important;

height: 100% !important;

display: flex !important;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 60px;

box-sizing: border-box;

}

/* 组件类 */

.box {

background: var(--box-bg);

border: 1px solid var(--box-border);

border-radius: var(--box-radius);

padding: 20px;

margin: 10px 0;

}

.callout {

border-left: 6px solid var(--primary-color);

padding: 15px 20px;

margin: 15px 0;

background: #f9f9f9;

border-radius: var(--box-radius);

}

.callout-blue { border-left-color: var(--blue); background: var(--blue-bg); }

.callout-orange { border-left-color: var(--orange); background: var(--orange-bg); }

.callout-green { border-left-color: var(--green); background: var(--green-bg); }

/* 文字尺寸 */

.text-lg { font-size: 18pt !important; }

.text-xl { font-size: 20pt !important; }

.text-2xl { font-size: 24pt !important; }

.reveal .slide-number { @apply text-sm text-gray-500 bg-transparent px-4 py-2; }

.reveal .progress { @apply h-1; }

.reveal .controls { @apply hidden; }

</style>

</section>

<li>下一步计划</li>

</ol>

</section>

<p>这是一个重要的信息</p>

</div>

</div>

<aside class="notes">演讲者备注内容</aside>

</section>

<h2 class="text-4xl font-bold mb-8">业绩增长概览</h2>

</div>

</div>

</section>

</div>

</div>

(function() {

function initReveal() {

if (typeof Reveal === "undefined") {

setTimeout(initReveal, 50);

return;

}

Reveal.initialize({

hash: true,

controls: false,

progress: true,

slideNumber: "c/t",

transition: "fade",

width: "100%",

height: "100%",

margin: 0,

minScale: 1,

maxScale: 1,

plugins: typeof RevealChart !== "undefined" ? [RevealChart] : [],

chart: {

defaults: {

color: "lightgray",

borderColor: "lightgray"

}

});

// 自定义导航按钮事件

var navPrev = document.getElementById("nav-prev");

var navNext = document.getElementById("nav-next");

var navOverview = document.getElementById("nav-overview");

if (navPrev) navPrev.addEventListener("click", function() { Reveal.prev(); });

if (navNext) navNext.addEventListener("click", function() { Reveal.next(); });

if (navOverview) navOverview.addEventListener("click", function() { Reveal.toggleOverview(); });

function updateNavButtons() {

var indices = Reveal.getIndices();

var totalSlides = Reveal.getTotalSlides();

if (navPrev) navPrev.disabled = indices.h === 0;

if (navNext) navNext.disabled = indices.h === totalSlides - 1;

}

Reveal.on("slidechanged", updateNavButtons);

Reveal.on("ready", updateNavButtons);

}

initReveal();

})();

</script>

\`\`\`

关键要点

1. ✅ **先输出 DOM**：用户可以立即看到幻灯片结构和内容

2. ✅ **后加载资源**：CDN 资源放在 DOM 之后，避免阻塞渲染

3. ✅ **延迟初始化**：使用轮询检查 Reveal.js 是否加载完成

4. ✅ **容器适配**：移除所有文档级标签，直接输出可嵌入的片段

5. ✅ **流式友好**：按顺序输出，支持逐步渲染

6. ✅ **组件复用**：CSS 变量和组件类便于统一管理主题

---

参考文档

详细的图表配置和高级特性，请参阅：

[图表详细文档](revealjs/references/charts.md)

[高级特性文档](revealjs/references/advanced-features.md)

[CSS 变量参考](revealjs/references/base-styles.css)

脚本工具

可用的辅助脚本（位于 \`revealjs/scripts/\` 目录）：

\`create-presentation.js\`：生成演示文稿脚手架

\`check-overflow.js\`：检查内容溢出

\`check-charts.js\`：检查图表配置

// Comments

// Related skills

More tools from the same signal band

Order food/drinks (点餐) on an Android device paired as an OpenClaw node. Uses in-app menu and cart; add goods, view cart, submit order (demo, no real payment).

Sign plugins, rotate agent credentials without losing identity, and publicly attest to plugin behavior with verifiable claims and authenticated transfers.

The philosophical layer for AI agents. Maps behavior to Spinoza's 48 affects, calculates persistence scores, and generates geometric self-reports. Give your...

日历管理数据处理

1 installs★ 0