Ppt SkillCAUTION

🧠 Curated collection of 1209+ best OpenClaw skills — weekly updated by MyClaw.ai

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/white.css">
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
\`\`\`

### HTML 结构

\`\`\`html
<div class="reveal">
  <div class="slides">
    <section>
      <h1>第一页标题</h1>
      <p>第一页内容</p>
    </section>
    <section>
      <h2>第二页标题</h2>
      <ul>
        <li>要点一</li>
        <li>要点二</li>
      </ul>
    </section>
  </div>
</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;
  --

CAUTIONgrade B · trust 89/100 Install with care. The audit found things worth knowing before you trust its output.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (2)

**IMPORTANT: Before adding ANY chart, you MUST read [references/charts.md](references/charts.md).** Charts require specific flexbox/grid patterns to size correctly and avoid overflow. Do not attempt t

<key>k5Ey9KFlkqpj+SDkUw+5ED9lTA3En/qUi0zdrydUCH3kMWTE3Eh65NXnFCaxlY2omY2JHnlEoK7Li7oOEvM7eG5VPdcO/sFlMfoCRdnLYdepJ+uLzYwOWR8W4yQVve/clxVFTVRL4DFleKInGdpAxIbHZT2yi4ADAMENls1N1XSLojRuqXePXDeAT/4Mv4TTx0s

Gates applied: no_behavioural_pass.