What makes html-ppt-skill notable?

1.7K downloads. Trust evidence available

How should html-ppt-skill be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

html-ppt-skill

制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。每当用户提到"做 PPT"、"做幻灯片"、"做演示文稿"、"写 PPT"、"制作 slides"、"de... Skill: html-ppt-skill Owner: boboy-j Summary: 制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。每当用户提到"做 PPT"、"做幻灯片"、"做演示文稿"、"写 PPT"、"制作 slides"、"de... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-28T08:42:25.803Z | auto Initial release of html-ppt-skill: - Create fully responsive HTML-based slideshows as a modern PPT alternative. - Enforces strict 16:9 r

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.7k

Updated

Oct 10, 2026

Version

1.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.7K downloads reported by the source. Last updated 10/10/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 10, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 10, 2026
Adoption signal: 1.7K downloadsadoption · observed Oct 10, 2026
Latest release: 1.0.0release · observed May 28, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17ckg9br2p4k5kx6cr8fc4jz5852pah:html-ppt-skill

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/snapshot"

Documentation

CLAWHUB

22,485 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: html-ppt
description: >
  制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9
  比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。
  每当用户提到"做 PPT"、"做幻灯片"、"做演示文稿"、"写 PPT"、"制作 slides"、"deck"
  等关键词时，必须触发本 skill，优先以 HTML 形式交付，而非生成 .pptx 文件。
  即使用户只说"帮我做个介绍某主题的 PPT"而未指明格式，也应主动采用本 skill 的方案。
---

# HTML PPT Skill

用 HTML + CSS 制作媲美专业设计软件的幻灯片，视觉效果远超传统 PPT 工具。

## 核心规范（必须遵守）

### 1. 比例与分页

```css
/* 每张幻灯片：宽 = 100vw，高 = 56.25vw（即 9/16）*/
.slide {
  width: 100vw;
  height: 56.25vw;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* body 开启强制对齐 */
body {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100%;
}
html { height: 100%; }
```

**原理**：`56.25vw = 9/16 × 100vw`，无论屏幕分辨率如何，每页都精确为 16:9。

### 2. 打印 / 导出 PDF

```css
@media print {
  html, body { height: auto; overflow: visible; scroll-snap-type: none; }
  #nav-dots, #nav-arrows { display: none !important; }
  .slide {
    width: 297mm;
    height: 167.0625mm;   /* 297 × 9/16 = 167.0625 */
    page-break-after: always;
    break-after: page;
    scroll-snap-align: none;
  }
}
```

用户按 **Ctrl+P → 另存为 PDF** 即可导出，每页精确对应一张幻灯片。

### 3. 导航 JS（标准实现，每次必须包含）

```javascript
const slides = Array.from(document.querySelectorAll('.slide'));
let current = 0;

function goTo(i) {
  i = Math.max(0, Math.min(slides.length - 1, i));
  slides[i].scrollIntoView({ behavior: 'smooth' });
  current = i;
  updateDots(i);
}

// 键盘支持
document.addEventListener('keydown', e => {
  if (['ArrowDown','ArrowRight','PageDown'].includes(e.key)) { e.preventDefault(); goTo(current+1); }
  if (['ArrowUp','ArrowLeft','PageUp'].includes(e.key))      { e.preventDefault(); goTo(current-1); }
});

// IntersectionObserver 同步当前页
const io = new IntersectionObserver(entries => {
  entries.forEach(en => { if (en.isIntersecting) { current = slides.indexOf(en.target); updateDots(current); }});
}, { threshold: 0.6 });
slides.forEach(s => io.observe(s));
```

---

## 标准文件结构

每次生成的 HTML 文件必须包含以下部分：

```
<head>
  Google Fonts 引入（选择与主题匹配的中文字体）
  <style>
    1. CSS 变量（颜色、字体）
    2. 核心框架（slide 比例、scroll-snap、body）
    3. 导航组件样式（dots、arrows）
    4. 通用设计组件（见下方）
    5. @media print
  </style>
</head>
<body>
  <nav id="nav-dots">（自动生成）</nav>
  <div id="nav-arrows">↑ ↓ 按钮</div>

  <section class="slide" id="slide-1"> ... </section>
  <section class="slide" id="slide-2"> ... </section>
  ...

  <script> 导航逻辑 </script>
</body>
```

---

## 设计规范

详细设计组件库见 `references/design-system.md`。

### 字体选择原则
- **中文展示字体**：`ZCOOL XiaoWei`（庄重）、`Ma Shan Zheng`（书法）、`Long Cang`（手写）
- **中文正文字体**：`Noto Serif SC`（衬线）、`Noto Sans SC`（无衬线）
- **英文展示字体**：`Playfair Display`、`Cormorant Garamond`、`Space Mono`
- **禁止使用**：Arial、Inter、Roboto、system-ui（太通用，无设计感）

### 颜色主题选择
根据演示主题选择合适的色系，参考 `references/design-system.md` 中的预设主题。

### 每张幻灯片的尺寸感知
- 字体大小使用 `vw` 单位（如 `3.5vw`），随屏幕等比缩放
- 间距使用 `%` 或 `vw` 单位，避免固定 `px`
- 内容区 padding 建议：`4% 6%`

---

## 典型页面类型

| 页面类型 | 适用场景 | 布局要点 |
|----------|----------|----------|
| 封面页   | 第一页   | 大标题居中或左对齐，背景有视觉冲击

README.md

# HTML PPT Skill — 用 HTML + CSS 制作专业幻灯片

> **版本**：V1.0.0  
> **语言**：HTML / CSS / JavaScript  
> **核心理念**：用 Web 技术取代传统 PPT/PPTX，制作 16:9 比例、可键盘翻页、可导出 PDF 的专业演示文稿。

---

## 概述

HTML PPT Skill 是一套完整的基于 HTML + CSS 制作幻灯片的工作流方案。与 PowerPoint / Keynote / Canva 等传统工具不同，它利用 **CSS `scroll-snap`** 实现精准的页面切割，以 **16:9 视口比例** 固定每张幻灯片，最终可通过浏览器 **Ctrl+P 导出为 PDF**。

适用场景：
- 技术分享 / 开发者演讲
- 学术报告 / 论文答辩
- 品牌宣传 / 产品路演
- 企业文化 / 历史展示

---

## 特性

| 特性 | 说明 |
|------|------|
| 🎯 **16:9 精确比例** | 每张幻灯片严格 `100vw × 56.25vw`，任何屏幕均等比例显示 |
| ⌨️ **键盘导航** | `↑ ↓ ← → PageUp PageDown` 均可翻页 |
| 🔵 **导航指示器** | 右侧圆点导航 + 底部箭头按钮，自动高亮当前页 |
| 🖨️ **一键导出 PDF** | 浏览器打印 → 另存为 PDF，每页精确对应一张幻灯片 |
| 📱 **响应式** | 所有尺寸使用 `vw` 单位，手机 / 平板 / 投影仪等比缩放 |
| 🎨 **预设主题** | 6 套精心搭配的配色方案（深空暗黑、金墨、自然绿、纯白简约、暖橙、冰蓝） |
| 🧩 **即用组件** | 排版系统、卡片、数据统计、进度条、时间线等开箱即用 |
| ✨ **动画效果** | 入场动画、脉冲光圈、滚动网格等轻量 CSS 动画 |
| 🖼️ **背景装饰** | 网格、光晕、水印、斜线分割、圆点阵列 5 种背景模式 |

---

## 快速开始

### 方式一：从空白模板开始

直接打开 `assets/blank-starter.html`，在 `<!-- ★ 在此开始添加幻灯片 ★ -->` 注释下方复制 `.slide` 块即可。

### 方式二：从设计系统模板开始

参考 `references/design-system.md` 中的布局代码（封面页、双栏页、四格卡片页、数据页、时间线页），复制粘贴后修改内容。

---

## 文件结构

```
V1.0.0/
├── SKILL.md                       # Skill 核心指令（AI 调用入口）
├── assets/
│   └── blank-starter.html         # 空白起始模板（开箱即用）
├── references/
│   └── design-system.md           # 完整设计系统文档
│       ├── 6 套预设颜色主题
│       ├── 通用 CSS 组件（排版 / 卡片 / 统计 / 列表等）
│       ├── 5 种背景装饰模式
│       ├── 5 种布局模板代码
│       ├── 动画效果库
│       └── 导航组件完整代码
└── README.md                      # 本文件
```

---

## 使用指南

### 1. 核心 HTML 结构

```html
<section class="slide" id="slide-1">
  <div class="slide-body">
    <!-- 内容 -->
  </div>
  <span class="slide-num">01 / 10</span>
</section>
```

每张幻灯片必备：
- `class="slide"` — 应用 16:9 尺寸和 scroll-snap 对齐
- `id="slide-N"` — 唯一标识（N 为页码序号）
- `.slide-num` — 底部页码

### 2. 导航系统（自动生效）

- **右侧圆点**：点击跳转对应页面
- **底部箭头**：上 / 下翻页
- **键盘**：`↑ ↓ ← →` 或 `PageUp / PageDown`
- **滚动**：鼠标滚轮 / 触控板逐页滑动
- **IntersectionObserver**：滚动时自动同步高亮当前页

### 3. 导出 PDF

1. 在浏览器中打开 HTML 文件
2. 按 `Ctrl + P` (Windows) 或 `Cmd + P` (Mac)
3. 目标打印机选择「另存为 PDF」
4. 取消勾选「页眉和页脚」
5. 保存 — 每张幻灯片即为一页 PDF

### 4. 编写新幻灯片

SKILL.md 中定义了 8 种典型页面类型：

| 页面类型 | 适用场景 |
|----------|----------|
| 封面页 | 第一页，大标题 + 视觉冲击背景 |
| 目录页 | 第二页，2×2 或 1×N 卡片网格 |
| 双栏内容页 | 文字 + 图片 / 列表 |
| 全图页 | 图片铺满 + 半透明遮罩文字 |
| 数据页 | 大数字 + 进度条 + 指标说明 |
| 时间线页 | 历史 / 流程 / 路线图 |
| 引用页 | 金句 / 观点 / 名人名言 |
| 结尾页 | 致谢 / Q&A / 联系方式 |

---

## 设计系统

详见 `references/design-system.md`，包含：

### 预设颜色主题

| 主题 | 场景 | 主色 |
|------|------|------|
| 🌑 深空暗黑 | 科技 / 互联网 | `#4F8EF7` |
| 🏮 金墨 | 中国文化 / 历史 | `#D4A017` |
| 🌿 自然绿 | 环保 / 农业 / 医疗 | `#34D399` |
| ☁️ 纯白简约 | 学术 / 报告 | `#2563EB` |
| 🔥 暖橙 | 创业 / 品牌 / 活力 | `#F97316` |
| 🧊 冰蓝 | 金融 / 咨询 / 企业 | `#1E40AF` |

### 字体体系

- **中文展示**：`ZCOOL XiaoWei`（庄重）、`Ma Shan Zheng`（书法）、`Long Cang`（手写）
- **中文正文**：`Noto Serif SC`（衬线）、`Noto Sans SC`（无衬线）
- **英文展示**：`Playfair Display`、`Cormorant Garamond`、`Space Mono`
- **禁止使用**：Arial、Inter、Roboto、system-ui（太通用）

### CSS 组件

| 组件 | 类名 | 用途 |
|------|------|-----

_meta.json

{
  "ownerId": "kn7ae6m5fzwqs7fmdmh97gr1yh82m2py",
  "slug": "html-ppt-skill",
  "version": "1.0.0",
  "publishedAt": 1779957745803
}

references/design-system.md

# HTML PPT Design System

设计组件库与预设主题，供 SKILL.md 引用。

---

## 目录
1. [预设颜色主题](#预设颜色主题)
2. [通用 CSS 组件](#通用-css-组件)
3. [背景装饰模式](#背景装饰模式)
4. [布局模板代码](#布局模板代码)
5. [动画效果库](#动画效果库)

---

## 预设颜色主题

### 🌑 深空暗黑（科技/互联网）
```css
--c-bg: #0D0F14; --c-surface: #151820;
--c-accent: #4F8EF7; --c-accent2: #A78BFA;
--c-text: #F0F2F8; --c-muted: rgba(240,242,248,0.45);
```

### 🏮 金墨（中国文化/历史/政府）
```css
--c-bg: #1A1209; --c-surface: #251A0D;
--c-accent: #D4A017; --c-accent2: #C0392B;
--c-text: #FAF5E8; --c-muted: rgba(250,245,232,0.5);
--f-display: 'ZCOOL XiaoWei', serif;
```

### 🌿 自然绿（环保/农业/医疗）
```css
--c-bg: #0A1A0F; --c-surface: #0F2415;
--c-accent: #34D399; --c-accent2: #6EE7B7;
--c-text: #ECFDF5; --c-muted: rgba(236,253,245,0.5);
```

### ☁️ 纯白简约（学术/报告/通用）
```css
--c-bg: #FFFFFF; --c-surface: #F8F9FA;
--c-border: rgba(0,0,0,0.08);
--c-accent: #2563EB; --c-accent2: #7C3AED;
--c-text: #111827; --c-muted: #6B7280;
```

### 🔥 暖橙（创业/品牌/活力）
```css
--c-bg: #0F0A06; --c-surface: #1A1208;
--c-accent: #F97316; --c-accent2: #FBBF24;
--c-text: #FFF7ED; --c-muted: rgba(255,247,237,0.5);
```

### 🧊 冰蓝（金融/咨询/企业）
```css
--c-bg: #F0F4F8; --c-surface: #FFFFFF;
--c-border: rgba(30,64,175,0.1);
--c-accent: #1E40AF; --c-accent2: #0EA5E9;
--c-text: #0F172A; --c-muted: #475569;
```

---

## 通用 CSS 组件

### 基础排版
```css
/* 超大展示标题 */
.title-xl {
  font-family: var(--f-display);
  font-size: 6.5vw; line-height: 1.1;
  letter-spacing: 0.04em;
}
/* 页面主标题 */
.title-lg {
  font-family: var(--f-serif, var(--f-body));
  font-size: 3.8vw; line-height: 1.25; font-weight: 700;
}
/* 章节标题 */
.title-md {
  font-size: 2.4vw; line-height: 1.3; font-weight: 700;
}
/* 正文 */
.body-text {
  font-size: 1.2vw; line-height: 1.9; color: var(--c-muted); font-weight: 300;
}
/* 小标签 */
.label {
  font-size: 0.85vw; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--c-accent); font-weight: 500; margin-bottom: 1%;
}
```

### 分割线
```css
.divider {
  width: 5vw; height: 2px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
  margin: 1.5% 0;
}
```

### 卡片
```css
.card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 2% 2.5%;
  transition: border-color 0.3s;
}
.card:hover { border-color: rgba(79,142,247,0.3); }
/* 顶部强调线变体 */
.card-accent { border-top: 2px solid var(--c-accent); }
```

### 数据统计
```css
.stat-num {
  font-family: var(--f-display);
  font-size: 5vw; color: var(--c-accent); line-height: 1;
}
.stat-label {
  font-size: 0.9vw; color: var(--c-muted);
  letter-spacing: 0.15em; margin-top: 0.3vw;
}
```

### 列表
```css
.bullet-list { list-style: none; display: flex; flex-direction: column; gap: 0.8%; }
.bullet-list li {
  font-size: 1.15vw; color: var(--c-muted);
  padding-left: 1.4vw; position: relative; line-height: 1.7;
}
.bullet-list li::before {
  content: ''; position: absolute; left: 0; top: 0.65vw;
  width: 0.4vw; height: 0.4vw;
  border-radius: 50%; background: var(--c-accent);
}
```

### 进度条
```css
/* 容器 */

skill-card.md

## Description:

Generates HTML-based slide decks as a modern alternative to PPT/PPTX, using 16:9 CSS scroll-snap slides with keyboard, scroll, on-screen navigation, and browser print-to-PDF export.

This skill is ready for commercial/non-commercial use.

## Publisher:

[boboy-j](https://clawhub.ai/user/boboy-j)

### License/Terms of Use:

MIT-0

## Use Case:

Developers, designers, and presentation authors use this skill to create responsive HTML slide decks for technical talks, academic reports, product pitches, brand presentations, and organization history or culture presentations.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: The skill strongly defaults presentation requests to HTML output instead of PPTX.

Mitigation: Ask the agent explicitly for PPTX when that format is required.

Risk: Generated decks may save files as part of the slide creation workflow.

Mitigation: Review generated file paths and contents before sharing or deploying the deck.

Risk: Generated HTML decks may load fonts from Google when opened in a browser.

Mitigation: Request local fonts or approved font sources when external font loading is not acceptable.

## Reference(s):

- [HTML PPT Design System](artifact/references/design-system.md)
- [Blank Starter Template](artifact/assets/blank-starter.html)

## Skill Output:

**Output Type(s):** [code, markdown, configuration, guidance]

**Output Format:** [HTML, CSS, JavaScript, and Markdown guidance]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [Produces 16:9 browser-rendered slide decks that can be exported to PDF through browser print.]

## Skill Version(s):

1.0.0 (source: server release evidence)

## Ethical Considerations:

Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.

Github ReposUpdated 12h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.