diff --git a/config/external-sources.lock.json b/config/external-sources.lock.json index 635339c4..c80bb0d8 100644 --- a/config/external-sources.lock.json +++ b/config/external-sources.lock.json @@ -69,8 +69,8 @@ "repo": "https://github.com/shadcn-ui/ui.git", "ref": "main", "adapter": "claude-skill", - "commit": "3ba91b1cc83e1bbe4ab35a422ff2a694849c5048", - "syncedAt": "2026-09-08T16:00:01Z" + "commit": "2b3e6d4f8d9161fe5c19340dc383aade392012dd", + "syncedAt": "2026-09-14T15:59:59Z" }, { "id": "frontend-slides", @@ -96,8 +96,8 @@ "repo": "https://github.com/lewislulu/html-ppt-skill.git", "ref": "main", "adapter": "claude-skill", - "commit": "f3a8435d3901697d5ac5e64d356c933637e43107", - "syncedAt": "2026-06-11T03:57:53Z" + "commit": "fd1629067909ff55b36b905476de4e5f26062a1f", + "syncedAt": "2026-09-14T15:59:59Z" }, { "id": "ppt-master", @@ -105,8 +105,8 @@ "repo": "https://github.com/hugohe3/ppt-master.git", "ref": "main", "adapter": "claude-skill", - "commit": "b3073f8fcf5d2ebeda621a424097dde9dd771cea", - "syncedAt": "2026-09-11T16:00:01Z" + "commit": "c6ae4896da10497464ad7e87f5833bfc14321621", + "syncedAt": "2026-09-14T15:59:59Z" }, { "id": "grill-me", @@ -141,8 +141,8 @@ "repo": "https://github.com/vercel/next.js.git", "ref": "canary", "adapter": "skill-collection", - "commit": "d155ba9ebfffe4742efefda8d68c2e0e8e490924", - "syncedAt": "2026-09-11T16:00:01Z" + "commit": "3dc93da27e29048d601546ed610c903705f7fd6c", + "syncedAt": "2026-09-14T15:59:59Z" }, { "id": "shuorenhua", @@ -150,8 +150,8 @@ "repo": "https://github.com/MrGeDiao/shuorenhua.git", "ref": "main", "adapter": "claude-skill", - "commit": "d2d0ce27da295581c3cf87a30ab65deb7d0ddfb8", - "syncedAt": "2026-09-03T02:45:43Z" + "commit": "5a9eafefe03807404135f4d2ee4f42fe61d58759", + "syncedAt": "2026-09-14T15:59:59Z" } ] } diff --git a/plugins/codex/plugins/html-ppt/README.md b/plugins/codex/plugins/html-ppt/README.md index a30a84a3..8bb8c41a 100644 --- a/plugins/codex/plugins/html-ppt/README.md +++ b/plugins/codex/plugins/html-ppt/README.md @@ -1,7 +1,7 @@ # html-ppt — HTML PPT Studio > A world-class AgentSkill for producing professional HTML presentations in -> **36 themes**, **15 full-deck templates**, **31 page layouts**, +> **36 themes**, **15 full-deck templates**, **36 page layouts**, > **47 animations** (27 CSS + 20 canvas FX), and a **true presenter mode** > with pixel-perfect previews + speaker script + timer — all pure static > HTML/CSS/JS, no build step. @@ -54,6 +54,65 @@ that supports AgentSkills can author presentations by asking things like: > "turn this outline into a pitch deck" > "做一个小红书图文,9 张,白底柔和风" +## Offline / manual install + +`npx skills add ` needs network on the target machine. Three alternatives, +in decreasing order of how much network they need. + +**1. Install from a local copy.** Fetch the repo anywhere, move the folder over +(git, zip, USB), then point the CLI at the directory instead of the URL: + +```bash +git clone https://github.com/lewislulu/html-ppt-skill +npx skills add ./html-ppt-skill +``` + +`npx` still downloads the `skills` package itself once. For a fully air-gapped +machine, run `npm i -g skills` on a connected one first, or use method 2. + +**2. Copy it in by hand — no Node, no CLI.** A skill is just a folder with +`SKILL.md` at its root. Drop it in the directory your agent scans: + +| Agent | Project scope | Global scope | +|---|---|---| +| Claude Code | `.claude/skills/html-ppt/` | `~/.claude/skills/html-ppt/` | +| Codex | `.agents/skills/html-ppt/` | `~/.codex/skills/html-ppt/` | +| Cursor | `.agents/skills/html-ppt/` | `~/.cursor/skills/html-ppt/` | +| OpenCode | `.agents/skills/html-ppt/` | `~/.config/opencode/skills/html-ppt/` | +| Gemini CLI | `.agents/skills/html-ppt/` | `~/.gemini/skills/html-ppt/` | +| Windsurf | `.windsurf/skills/html-ppt/` | `~/.codeium/windsurf/skills/html-ppt/` | + +```bash +mkdir -p ~/.claude/skills +cp -R html-ppt-skill ~/.claude/skills/html-ppt +ls ~/.claude/skills/html-ppt/SKILL.md # must exist +``` + +Only `SKILL.md`, `assets/`, `templates/`, `references/` and `scripts/` are +needed at runtime. `docs/` is ~4.6 MB of README artwork and can be dropped from +an offline copy. + +**3. No agent at all.** The templates are plain static files — usable directly: + +```bash +./scripts/new-deck.sh my-talk +open examples/my-talk/index.html +``` + +### Does it run without a network? + +Yes, with one caveat. Themes, layouts, animations, presenter mode and PNG +rendering are all local static HTML/CSS/JS with no build step and no runtime +fetches. The single remote dependency is `assets/fonts.css`, which `@import`s +Google Fonts. + +Offline, those imports simply fail and the browser falls back to the system +stack already declared in `assets/base.css` (`-apple-system` / Helvetica / +Georgia / Menlo), so decks render correctly — just in different typefaces. To +pin typography offline, replace `assets/fonts.css` with `@font-face` rules +pointing at font files you ship yourself, or delete the imports and accept the +system stack. + ## What's in the box | | Count | Where | @@ -61,7 +120,7 @@ that supports AgentSkills can author presentations by asking things like: | 🎤 **Presenter mode** | **NEW** | `S` key / `?preview=N` | | 🎨 **Themes** | **36** | `assets/themes/*.css` | | 📑 **Full-deck templates** | **15** | `templates/full-decks//` | -| 🧩 **Single-page layouts** | **31** | `templates/single-page/*.html` | +| 🧩 **Single-page layouts** | **36** | `templates/single-page/*.html` | | ✨ **CSS animations** | **27** | `assets/animations/animations.css` | | 💥 **Canvas FX animations** | **20** | `assets/animations/fx/*.js` | | 🖼️ **Showcase decks** | 4 | `templates/*-showcase.html` | @@ -108,7 +167,7 @@ decks can be previewed side-by-side without collisions. Browse the full gallery in `templates/full-decks-index.html`. -### 31 Single-page layouts +### 36 Single-page layouts cover · toc · section-divider · bullets · two-column · three-column · big-quote · stat-highlight · kpi-grid · table · code · diff · terminal · @@ -120,7 +179,7 @@ Every layout ships with realistic demo data so you can drop it into a deck and immediately see it render. -*The big iframe is loading `templates/single-page/.html` directly and cycling through all 31 layouts every 2.8 seconds.* +*The big iframe is loading `templates/single-page/.html` directly and cycling through all 36 layouts every 2.8 seconds.* ### 27 CSS animations + 20 Canvas FX @@ -145,21 +204,71 @@ module auto-initialised on slide enter via `fx-runtime.js`. # Scaffold a new deck from the base template ./scripts/new-deck.sh my-talk +# ...or from a full-deck template, into any directory you like. +# Asset paths are computed for wherever the deck lands, then verified. +./scripts/new-deck.sh my-talk ~/decks -t pitch-deck + # Browse everything open templates/theme-showcase.html # all 36 themes (iframe-isolated) -open templates/layout-showcase.html # all 31 layouts +open templates/layout-showcase.html # all 36 layouts open templates/animation-showcase.html # all 47 animations -open templates/full-decks-index.html # all 14 full decks +open templates/full-decks-index.html # all 15 full decks # Render any template to PNG via headless Chrome ./scripts/render.sh templates/theme-showcase.html ./scripts/render.sh examples/my-talk/index.html 12 ``` +## Images on a slide + +Five layouts take real images — pick by how many the page has to carry: + +| I have… | Layout | +|---|---| +| one screenshot / diagram / chart | `image-single.html` — letterboxed, never cropped | +| one photo that should carry the page | `image-full-bleed.html` — fills the slide, scrim keeps the title readable | +| one image plus an argument | `image-text-split.html` — 50/50, `flip` to swap sides | +| 3–6 images | `image-gallery.html` — uniform grid, one caption each | +| a before and an after | `image-compare.html` — both sides identical size | + +They share one primitive from `assets/base.css`: + +```html +
+
+``` + +The frame owns the aspect ratio (`--img-ratio`) and the crop, so you can drop in +a portrait, square or ultrawide image without touching the layout. Placeholder +artwork in `assets/demo-images/` is hand-written SVG (~1 KB each) so every +layout renders **offline**. + +## Custom logo + +Brand a deck with one attribute — no per-slide `` copy-paste: + +```html + +``` + +`data-logo-position` takes `top-left` / `top-right` / `bottom-left` / +`bottom-right` (default `top-right`); `data-logo-size` sets the height. +Skip it on a single slide with `
` — handy +for the cover. The logo also shows in the presenter preview, and on **every +page** of a PDF export (skipping the `data-no-logo` ones). + +Prefer to place it yourself? `` +inside `.deck` works with no JS at all. + ## Keyboard cheat sheet +On a phone or tablet, **swipe left for the next slide, right for the previous +one** — no keyboard needed. Pinch-zoom, vertical scrolling, the overview grid +and the notes drawer are left alone. + ``` ← → Space PgUp PgDn Home End navigate +swipe ← / → (touch) navigate F fullscreen S open presenter window (magnetic cards) N quick notes drawer (bottom) @@ -181,7 +290,7 @@ html-ppt-skill/ │ ├── themes.md 36 themes with when-to-use │ ├── layouts.md 31 layout types │ ├── animations.md 27 CSS + 20 FX catalog -│ ├── full-decks.md 14 full-deck templates +│ ├── full-decks.md 15 full-deck templates │ └── authoring-guide.md full workflow ├── assets/ │ ├── base.css shared tokens + primitives @@ -195,10 +304,10 @@ html-ppt-skill/ ├── templates/ │ ├── deck.html minimal starter │ ├── theme-showcase.html iframe-isolated theme tour -│ ├── layout-showcase.html all 31 layouts +│ ├── layout-showcase.html all 36 layouts │ ├── animation-showcase.html 47 animation slides -│ ├── full-decks-index.html 14-deck gallery -│ ├── full-decks// 14 scoped multi-slide decks +│ ├── full-decks-index.html 15-deck gallery +│ ├── full-decks// 15 scoped multi-slide decks │ └── single-page/*.html 31 layout files with demo data ├── scripts/ │ ├── new-deck.sh scaffold diff --git a/plugins/codex/plugins/html-ppt/README.zh-CN.md b/plugins/codex/plugins/html-ppt/README.zh-CN.md index 6acd818f..cb56e662 100644 --- a/plugins/codex/plugins/html-ppt/README.zh-CN.md +++ b/plugins/codex/plugins/html-ppt/README.zh-CN.md @@ -1,7 +1,7 @@ # html-ppt · HTML PPT 工作室 > 一款专业级的 AgentSkill,让 AI 做出真正能打的 HTML 演示文稿。 -> **36 套主题**、**15 套完整 deck 模板**、**31 种页面布局**、**47 个动效** +> **36 套主题**、**15 套完整 deck 模板**、**36 种页面布局**、**47 个动效** > (27 个 CSS + 20 个 Canvas FX),加上全新的 **演讲者模式** —— 像素级 > 完美预览 + 逐字稿提词器 + 计时器。纯静态 HTML/CSS/JS,无需构建。 @@ -10,7 +10,7 @@ **English docs:** [README.md](README.md) -> 一行命令装好 **36 主题 × 20 Canvas FX × 31 布局 × 15 完整 deck + 演讲者模式**。 +> 一行命令装好 **36 主题 × 20 Canvas FX × 36 布局 × 15 完整 deck + 演讲者模式**。 ## 🎤 演讲者模式(全新) @@ -51,6 +51,60 @@ npx skills add https://github.com/lewislulu/html-ppt-skill > "做一个小红书图文,9 张,白底柔和风" > "做一份带演讲者模式的产品分享,我想要有逐字稿" +## 离线 / 手动安装 + +`npx skills add ` 需要目标机器能联网。下面三种方式,对网络的依赖依次递减。 + +**1. 从本地副本安装。** 在任意能联网的机器上取到仓库,把整个目录搬过去(git、zip、U 盘都行), +然后把 CLI 指向本地目录而不是 URL: + +```bash +git clone https://github.com/lewislulu/html-ppt-skill +npx skills add ./html-ppt-skill +``` + +`npx` 本身仍需下载一次 `skills` 包。完全隔离的机器请先在联网机器上 +`npm i -g skills`,或者直接用方式 2。 + +**2. 纯手工拷贝 —— 不需要 Node,也不需要 CLI。** 一个 skill 就是一个根目录下放着 +`SKILL.md` 的文件夹。放进你的 agent 会扫描的目录即可: + +| Agent | 项目级 | 全局 | +|---|---|---| +| Claude Code | `.claude/skills/html-ppt/` | `~/.claude/skills/html-ppt/` | +| Codex | `.agents/skills/html-ppt/` | `~/.codex/skills/html-ppt/` | +| Cursor | `.agents/skills/html-ppt/` | `~/.cursor/skills/html-ppt/` | +| OpenCode | `.agents/skills/html-ppt/` | `~/.config/opencode/skills/html-ppt/` | +| Gemini CLI | `.agents/skills/html-ppt/` | `~/.gemini/skills/html-ppt/` | +| Windsurf | `.windsurf/skills/html-ppt/` | `~/.codeium/windsurf/skills/html-ppt/` | + +```bash +mkdir -p ~/.claude/skills +cp -R html-ppt-skill ~/.claude/skills/html-ppt +ls ~/.claude/skills/html-ppt/SKILL.md # 必须存在 +``` + +运行时只需要 `SKILL.md`、`assets/`、`templates/`、`references/`、`scripts/`。 +`docs/` 是约 4.6 MB 的 README 配图,离线拷贝时可以删掉。 + +**3. 完全不用 agent。** 模板就是普通静态文件,可以直接用: + +```bash +./scripts/new-deck.sh my-talk +open examples/my-talk/index.html +``` + +### 断网能用吗? + +能,只有一个前提要说清楚。主题、布局、动效、演讲者模式、PNG 导出全部是本地静态 +HTML/CSS/JS,零构建、运行时不发请求。唯一的远程依赖是 `assets/fonts.css`, +它 `@import` 了 Google Fonts。 + +断网时这些 import 直接失败,浏览器回落到 `assets/base.css` 里已经声明好的系统字体栈 +(`-apple-system` / Helvetica / Georgia / Menlo),所以 deck 照常渲染,只是字体不同。 +如果要在离线环境下锁定字体,把 `assets/fonts.css` 换成指向自带字体文件的 `@font-face` +规则,或者删掉这些 import、接受系统字体。 + ## Skill 内容一览 | | 数量 | 位置 | @@ -58,7 +112,7 @@ npx skills add https://github.com/lewislulu/html-ppt-skill | 🎤 **演讲者模式** | **新增** | `S` 键 / `?preview=N` | | 🎨 **主题** | **36** | `assets/themes/*.css` | | 📑 **完整 deck 模板** | **15** | `templates/full-decks//` | -| 🧩 **单页布局** | **31** | `templates/single-page/*.html` | +| 🧩 **单页布局** | **36** | `templates/single-page/*.html` | | ✨ **CSS 动画** | **27** | `assets/animations/animations.css` | | 💥 **Canvas FX 动画** | **20** | `assets/animations/fx/*.js` | | 🖼️ **Showcase deck** | 4 | `templates/*-showcase.html` | @@ -108,7 +162,7 @@ npx skills add https://github.com/lewislulu/html-ppt-skill 同时加载不会互相污染。在 `templates/full-decks-index.html` 可以看全套 gallery。 -### 31 种单页布局 +### 36 种单页布局 cover · toc · section-divider · bullets · two-column · three-column · big-quote · stat-highlight · kpi-grid · table · code · diff · terminal · @@ -148,9 +202,13 @@ chart-pie · chart-radar · arch-diagram · process-steps · cta · thanks # 从 base 模板新建一个 deck ./scripts/new-deck.sh my-talk +# 也可以指定完整 deck 模板和任意输出目录。 +# assets 路径会按 deck 的实际位置算出来,并逐条校验能否解析。 +./scripts/new-deck.sh my-talk ~/decks -t pitch-deck + # 浏览所有内容 open templates/theme-showcase.html # 全部 36 主题(iframe 隔离) -open templates/layout-showcase.html # 全部 31 布局 +open templates/layout-showcase.html # 全部 36 布局 open templates/animation-showcase.html # 全部 47 动效 open templates/full-decks-index.html # 全部 15 个完整 deck @@ -159,10 +217,55 @@ open templates/full-decks-index.html # 全部 15 个完整 deck ./scripts/render.sh examples/my-talk/index.html 12 ``` +## 放图片的版式 + +五个版式用的是真实 ``,按「这一页要放几张图」挑: + +| 我有… | 版式 | +|---|---| +| 一张截图 / 示意图 / 图表 | `image-single.html` —— 完整显示,**不裁剪** | +| 一张想撑满整页的照片 | `image-full-bleed.html` —— 整页铺满,底部压暗保证标题可读 | +| 一张图 + 一段论述 | `image-text-split.html` —— 各占一半,加 `flip` 左右互换 | +| 3~6 张图 | `image-gallery.html` —— 等大网格,每张一句话 | +| 改版前 / 改版后 | `image-compare.html` —— 两侧严格同尺寸 | + +它们共用 `assets/base.css` 里的同一个原语: + +```html +
+
+``` + +比例和裁剪由**框**决定(`--img-ratio`),不由图片决定 —— 竖图、方图、超宽图 +直接换 `src` 就行,版式不用改。示例图放在 `assets/demo-images/`,是手写的 +SVG(每个约 1KB),所以这些版式**离线也能正常渲染**。 + +## 自定义 LOGO + +一个属性给整份 deck 加上公司 / 产品 LOGO,不用每页粘一个 ``: + +```html + +``` + +`data-logo-position` 可选 `top-left` / `top-right` / `bottom-left` / +`bottom-right`(默认 `top-right`);`data-logo-size` 设置高度,宽度按比例。 +某一页不想要(通常是封面)就写 `
`。 +演讲者模式的预览里带 LOGO;导出 PDF 时**每一页都带**(写了 `data-no-logo` +的那页除外)。 + +想自己摆位置:在 `.deck` 里直接写 +``, +样式在 `base.css` 里,**完全不依赖 JS**。 + ## 键盘快捷键 +手机 / 平板上**向左划到下一页,向右划回上一页**,不需要键盘。 +双指缩放、纵向滚动、总览网格和 notes 抽屉都不受影响。 + ``` ← → Space PgUp PgDn Home End 翻页 +左划 / 右划(触摸) 翻页 F 全屏 S 打开演讲者窗口(磁吸卡片模式) N 底部 notes 抽屉 @@ -183,7 +286,7 @@ html-ppt-skill/ ├── README.zh-CN.md 本文件 ├── references/ 详细文档 │ ├── themes.md 36 主题 + 使用场景 -│ ├── layouts.md 31 布局 +│ ├── layouts.md 36 布局 │ ├── animations.md 27 CSS + 20 FX 目录 │ ├── full-decks.md 15 完整 deck 模板 │ ├── presenter-mode.md 🎤 演讲者模式 + 逐字稿指南 @@ -200,11 +303,11 @@ html-ppt-skill/ ├── templates/ │ ├── deck.html 最小起步模板 │ ├── theme-showcase.html iframe 隔离的主题 tour -│ ├── layout-showcase.html 全部 31 布局 +│ ├── layout-showcase.html 全部 36 布局 │ ├── animation-showcase.html 47 动画 slide │ ├── full-decks-index.html 15 deck gallery │ ├── full-decks// 15 个 scoped 多页 deck 模板 -│ └── single-page/*.html 31 个布局文件(带示例数据) +│ └── single-page/*.html 36 个布局文件(带示例数据) ├── scripts/ │ ├── new-deck.sh 脚手架 │ ├── render.sh headless Chrome → PNG diff --git a/plugins/codex/plugins/html-ppt/THIRD_PARTY_SOURCE.json b/plugins/codex/plugins/html-ppt/THIRD_PARTY_SOURCE.json index 935cb7f9..5eb1639c 100644 --- a/plugins/codex/plugins/html-ppt/THIRD_PARTY_SOURCE.json +++ b/plugins/codex/plugins/html-ppt/THIRD_PARTY_SOURCE.json @@ -2,8 +2,8 @@ "sourceId": "html-ppt", "repo": "https://github.com/lewislulu/html-ppt-skill.git", "ref": "main", - "commit": "f3a8435d3901697d5ac5e64d356c933637e43107", + "commit": "fd1629067909ff55b36b905476de4e5f26062a1f", "adapter": "claude-skill", "sourcePath": ".", - "syncedAt": "2026-06-11T03:57:53Z" + "syncedAt": "2026-09-14T15:59:59Z" } diff --git a/plugins/codex/plugins/html-ppt/skills/html-ppt/.gitignore b/plugins/codex/plugins/html-ppt/skills/html-ppt/.gitignore new file mode 100644 index 00000000..e43b0f98 --- /dev/null +++ b/plugins/codex/plugins/html-ppt/skills/html-ppt/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/plugins/codex/plugins/html-ppt/skills/html-ppt/README.md b/plugins/codex/plugins/html-ppt/skills/html-ppt/README.md index a30a84a3..8bb8c41a 100644 --- a/plugins/codex/plugins/html-ppt/skills/html-ppt/README.md +++ b/plugins/codex/plugins/html-ppt/skills/html-ppt/README.md @@ -1,7 +1,7 @@ # html-ppt — HTML PPT Studio > A world-class AgentSkill for producing professional HTML presentations in -> **36 themes**, **15 full-deck templates**, **31 page layouts**, +> **36 themes**, **15 full-deck templates**, **36 page layouts**, > **47 animations** (27 CSS + 20 canvas FX), and a **true presenter mode** > with pixel-perfect previews + speaker script + timer — all pure static > HTML/CSS/JS, no build step. @@ -54,6 +54,65 @@ that supports AgentSkills can author presentations by asking things like: > "turn this outline into a pitch deck" > "做一个小红书图文,9 张,白底柔和风" +## Offline / manual install + +`npx skills add ` needs network on the target machine. Three alternatives, +in decreasing order of how much network they need. + +**1. Install from a local copy.** Fetch the repo anywhere, move the folder over +(git, zip, USB), then point the CLI at the directory instead of the URL: + +```bash +git clone https://github.com/lewislulu/html-ppt-skill +npx skills add ./html-ppt-skill +``` + +`npx` still downloads the `skills` package itself once. For a fully air-gapped +machine, run `npm i -g skills` on a connected one first, or use method 2. + +**2. Copy it in by hand — no Node, no CLI.** A skill is just a folder with +`SKILL.md` at its root. Drop it in the directory your agent scans: + +| Agent | Project scope | Global scope | +|---|---|---| +| Claude Code | `.claude/skills/html-ppt/` | `~/.claude/skills/html-ppt/` | +| Codex | `.agents/skills/html-ppt/` | `~/.codex/skills/html-ppt/` | +| Cursor | `.agents/skills/html-ppt/` | `~/.cursor/skills/html-ppt/` | +| OpenCode | `.agents/skills/html-ppt/` | `~/.config/opencode/skills/html-ppt/` | +| Gemini CLI | `.agents/skills/html-ppt/` | `~/.gemini/skills/html-ppt/` | +| Windsurf | `.windsurf/skills/html-ppt/` | `~/.codeium/windsurf/skills/html-ppt/` | + +```bash +mkdir -p ~/.claude/skills +cp -R html-ppt-skill ~/.claude/skills/html-ppt +ls ~/.claude/skills/html-ppt/SKILL.md # must exist +``` + +Only `SKILL.md`, `assets/`, `templates/`, `references/` and `scripts/` are +needed at runtime. `docs/` is ~4.6 MB of README artwork and can be dropped from +an offline copy. + +**3. No agent at all.** The templates are plain static files — usable directly: + +```bash +./scripts/new-deck.sh my-talk +open examples/my-talk/index.html +``` + +### Does it run without a network? + +Yes, with one caveat. Themes, layouts, animations, presenter mode and PNG +rendering are all local static HTML/CSS/JS with no build step and no runtime +fetches. The single remote dependency is `assets/fonts.css`, which `@import`s +Google Fonts. + +Offline, those imports simply fail and the browser falls back to the system +stack already declared in `assets/base.css` (`-apple-system` / Helvetica / +Georgia / Menlo), so decks render correctly — just in different typefaces. To +pin typography offline, replace `assets/fonts.css` with `@font-face` rules +pointing at font files you ship yourself, or delete the imports and accept the +system stack. + ## What's in the box | | Count | Where | @@ -61,7 +120,7 @@ that supports AgentSkills can author presentations by asking things like: | 🎤 **Presenter mode** | **NEW** | `S` key / `?preview=N` | | 🎨 **Themes** | **36** | `assets/themes/*.css` | | 📑 **Full-deck templates** | **15** | `templates/full-decks//` | -| 🧩 **Single-page layouts** | **31** | `templates/single-page/*.html` | +| 🧩 **Single-page layouts** | **36** | `templates/single-page/*.html` | | ✨ **CSS animations** | **27** | `assets/animations/animations.css` | | 💥 **Canvas FX animations** | **20** | `assets/animations/fx/*.js` | | 🖼️ **Showcase decks** | 4 | `templates/*-showcase.html` | @@ -108,7 +167,7 @@ decks can be previewed side-by-side without collisions. Browse the full gallery in `templates/full-decks-index.html`. -### 31 Single-page layouts +### 36 Single-page layouts cover · toc · section-divider · bullets · two-column · three-column · big-quote · stat-highlight · kpi-grid · table · code · diff · terminal · @@ -120,7 +179,7 @@ Every layout ships with realistic demo data so you can drop it into a deck and immediately see it render. -*The big iframe is loading `templates/single-page/.html` directly and cycling through all 31 layouts every 2.8 seconds.* +*The big iframe is loading `templates/single-page/.html` directly and cycling through all 36 layouts every 2.8 seconds.* ### 27 CSS animations + 20 Canvas FX @@ -145,21 +204,71 @@ module auto-initialised on slide enter via `fx-runtime.js`. # Scaffold a new deck from the base template ./scripts/new-deck.sh my-talk +# ...or from a full-deck template, into any directory you like. +# Asset paths are computed for wherever the deck lands, then verified. +./scripts/new-deck.sh my-talk ~/decks -t pitch-deck + # Browse everything open templates/theme-showcase.html # all 36 themes (iframe-isolated) -open templates/layout-showcase.html # all 31 layouts +open templates/layout-showcase.html # all 36 layouts open templates/animation-showcase.html # all 47 animations -open templates/full-decks-index.html # all 14 full decks +open templates/full-decks-index.html # all 15 full decks # Render any template to PNG via headless Chrome ./scripts/render.sh templates/theme-showcase.html ./scripts/render.sh examples/my-talk/index.html 12 ``` +## Images on a slide + +Five layouts take real images — pick by how many the page has to carry: + +| I have… | Layout | +|---|---| +| one screenshot / diagram / chart | `image-single.html` — letterboxed, never cropped | +| one photo that should carry the page | `image-full-bleed.html` — fills the slide, scrim keeps the title readable | +| one image plus an argument | `image-text-split.html` — 50/50, `flip` to swap sides | +| 3–6 images | `image-gallery.html` — uniform grid, one caption each | +| a before and an after | `image-compare.html` — both sides identical size | + +They share one primitive from `assets/base.css`: + +```html +
+
+``` + +The frame owns the aspect ratio (`--img-ratio`) and the crop, so you can drop in +a portrait, square or ultrawide image without touching the layout. Placeholder +artwork in `assets/demo-images/` is hand-written SVG (~1 KB each) so every +layout renders **offline**. + +## Custom logo + +Brand a deck with one attribute — no per-slide `` copy-paste: + +```html + +``` + +`data-logo-position` takes `top-left` / `top-right` / `bottom-left` / +`bottom-right` (default `top-right`); `data-logo-size` sets the height. +Skip it on a single slide with `
` — handy +for the cover. The logo also shows in the presenter preview, and on **every +page** of a PDF export (skipping the `data-no-logo` ones). + +Prefer to place it yourself? `` +inside `.deck` works with no JS at all. + ## Keyboard cheat sheet +On a phone or tablet, **swipe left for the next slide, right for the previous +one** — no keyboard needed. Pinch-zoom, vertical scrolling, the overview grid +and the notes drawer are left alone. + ``` ← → Space PgUp PgDn Home End navigate +swipe ← / → (touch) navigate F fullscreen S open presenter window (magnetic cards) N quick notes drawer (bottom) @@ -181,7 +290,7 @@ html-ppt-skill/ │ ├── themes.md 36 themes with when-to-use │ ├── layouts.md 31 layout types │ ├── animations.md 27 CSS + 20 FX catalog -│ ├── full-decks.md 14 full-deck templates +│ ├── full-decks.md 15 full-deck templates │ └── authoring-guide.md full workflow ├── assets/ │ ├── base.css shared tokens + primitives @@ -195,10 +304,10 @@ html-ppt-skill/ ├── templates/ │ ├── deck.html minimal starter │ ├── theme-showcase.html iframe-isolated theme tour -│ ├── layout-showcase.html all 31 layouts +│ ├── layout-showcase.html all 36 layouts │ ├── animation-showcase.html 47 animation slides -│ ├── full-decks-index.html 14-deck gallery -│ ├── full-decks// 14 scoped multi-slide decks +│ ├── full-decks-index.html 15-deck gallery +│ ├── full-decks// 15 scoped multi-slide decks │ └── single-page/*.html 31 layout files with demo data ├── scripts/ │ ├── new-deck.sh scaffold diff --git a/plugins/codex/plugins/html-ppt/skills/html-ppt/README.zh-CN.md b/plugins/codex/plugins/html-ppt/skills/html-ppt/README.zh-CN.md index 6acd818f..cb56e662 100644 --- a/plugins/codex/plugins/html-ppt/skills/html-ppt/README.zh-CN.md +++ b/plugins/codex/plugins/html-ppt/skills/html-ppt/README.zh-CN.md @@ -1,7 +1,7 @@ # html-ppt · HTML PPT 工作室 > 一款专业级的 AgentSkill,让 AI 做出真正能打的 HTML 演示文稿。 -> **36 套主题**、**15 套完整 deck 模板**、**31 种页面布局**、**47 个动效** +> **36 套主题**、**15 套完整 deck 模板**、**36 种页面布局**、**47 个动效** > (27 个 CSS + 20 个 Canvas FX),加上全新的 **演讲者模式** —— 像素级 > 完美预览 + 逐字稿提词器 + 计时器。纯静态 HTML/CSS/JS,无需构建。 @@ -10,7 +10,7 @@ **English docs:** [README.md](README.md) -> 一行命令装好 **36 主题 × 20 Canvas FX × 31 布局 × 15 完整 deck + 演讲者模式**。 +> 一行命令装好 **36 主题 × 20 Canvas FX × 36 布局 × 15 完整 deck + 演讲者模式**。 ## 🎤 演讲者模式(全新) @@ -51,6 +51,60 @@ npx skills add https://github.com/lewislulu/html-ppt-skill > "做一个小红书图文,9 张,白底柔和风" > "做一份带演讲者模式的产品分享,我想要有逐字稿" +## 离线 / 手动安装 + +`npx skills add ` 需要目标机器能联网。下面三种方式,对网络的依赖依次递减。 + +**1. 从本地副本安装。** 在任意能联网的机器上取到仓库,把整个目录搬过去(git、zip、U 盘都行), +然后把 CLI 指向本地目录而不是 URL: + +```bash +git clone https://github.com/lewislulu/html-ppt-skill +npx skills add ./html-ppt-skill +``` + +`npx` 本身仍需下载一次 `skills` 包。完全隔离的机器请先在联网机器上 +`npm i -g skills`,或者直接用方式 2。 + +**2. 纯手工拷贝 —— 不需要 Node,也不需要 CLI。** 一个 skill 就是一个根目录下放着 +`SKILL.md` 的文件夹。放进你的 agent 会扫描的目录即可: + +| Agent | 项目级 | 全局 | +|---|---|---| +| Claude Code | `.claude/skills/html-ppt/` | `~/.claude/skills/html-ppt/` | +| Codex | `.agents/skills/html-ppt/` | `~/.codex/skills/html-ppt/` | +| Cursor | `.agents/skills/html-ppt/` | `~/.cursor/skills/html-ppt/` | +| OpenCode | `.agents/skills/html-ppt/` | `~/.config/opencode/skills/html-ppt/` | +| Gemini CLI | `.agents/skills/html-ppt/` | `~/.gemini/skills/html-ppt/` | +| Windsurf | `.windsurf/skills/html-ppt/` | `~/.codeium/windsurf/skills/html-ppt/` | + +```bash +mkdir -p ~/.claude/skills +cp -R html-ppt-skill ~/.claude/skills/html-ppt +ls ~/.claude/skills/html-ppt/SKILL.md # 必须存在 +``` + +运行时只需要 `SKILL.md`、`assets/`、`templates/`、`references/`、`scripts/`。 +`docs/` 是约 4.6 MB 的 README 配图,离线拷贝时可以删掉。 + +**3. 完全不用 agent。** 模板就是普通静态文件,可以直接用: + +```bash +./scripts/new-deck.sh my-talk +open examples/my-talk/index.html +``` + +### 断网能用吗? + +能,只有一个前提要说清楚。主题、布局、动效、演讲者模式、PNG 导出全部是本地静态 +HTML/CSS/JS,零构建、运行时不发请求。唯一的远程依赖是 `assets/fonts.css`, +它 `@import` 了 Google Fonts。 + +断网时这些 import 直接失败,浏览器回落到 `assets/base.css` 里已经声明好的系统字体栈 +(`-apple-system` / Helvetica / Georgia / Menlo),所以 deck 照常渲染,只是字体不同。 +如果要在离线环境下锁定字体,把 `assets/fonts.css` 换成指向自带字体文件的 `@font-face` +规则,或者删掉这些 import、接受系统字体。 + ## Skill 内容一览 | | 数量 | 位置 | @@ -58,7 +112,7 @@ npx skills add https://github.com/lewislulu/html-ppt-skill | 🎤 **演讲者模式** | **新增** | `S` 键 / `?preview=N` | | 🎨 **主题** | **36** | `assets/themes/*.css` | | 📑 **完整 deck 模板** | **15** | `templates/full-decks//` | -| 🧩 **单页布局** | **31** | `templates/single-page/*.html` | +| 🧩 **单页布局** | **36** | `templates/single-page/*.html` | | ✨ **CSS 动画** | **27** | `assets/animations/animations.css` | | 💥 **Canvas FX 动画** | **20** | `assets/animations/fx/*.js` | | 🖼️ **Showcase deck** | 4 | `templates/*-showcase.html` | @@ -108,7 +162,7 @@ npx skills add https://github.com/lewislulu/html-ppt-skill 同时加载不会互相污染。在 `templates/full-decks-index.html` 可以看全套 gallery。 -### 31 种单页布局 +### 36 种单页布局 cover · toc · section-divider · bullets · two-column · three-column · big-quote · stat-highlight · kpi-grid · table · code · diff · terminal · @@ -148,9 +202,13 @@ chart-pie · chart-radar · arch-diagram · process-steps · cta · thanks # 从 base 模板新建一个 deck ./scripts/new-deck.sh my-talk +# 也可以指定完整 deck 模板和任意输出目录。 +# assets 路径会按 deck 的实际位置算出来,并逐条校验能否解析。 +./scripts/new-deck.sh my-talk ~/decks -t pitch-deck + # 浏览所有内容 open templates/theme-showcase.html # 全部 36 主题(iframe 隔离) -open templates/layout-showcase.html # 全部 31 布局 +open templates/layout-showcase.html # 全部 36 布局 open templates/animation-showcase.html # 全部 47 动效 open templates/full-decks-index.html # 全部 15 个完整 deck @@ -159,10 +217,55 @@ open templates/full-decks-index.html # 全部 15 个完整 deck ./scripts/render.sh examples/my-talk/index.html 12 ``` +## 放图片的版式 + +五个版式用的是真实 ``,按「这一页要放几张图」挑: + +| 我有… | 版式 | +|---|---| +| 一张截图 / 示意图 / 图表 | `image-single.html` —— 完整显示,**不裁剪** | +| 一张想撑满整页的照片 | `image-full-bleed.html` —— 整页铺满,底部压暗保证标题可读 | +| 一张图 + 一段论述 | `image-text-split.html` —— 各占一半,加 `flip` 左右互换 | +| 3~6 张图 | `image-gallery.html` —— 等大网格,每张一句话 | +| 改版前 / 改版后 | `image-compare.html` —— 两侧严格同尺寸 | + +它们共用 `assets/base.css` 里的同一个原语: + +```html +
+
+``` + +比例和裁剪由**框**决定(`--img-ratio`),不由图片决定 —— 竖图、方图、超宽图 +直接换 `src` 就行,版式不用改。示例图放在 `assets/demo-images/`,是手写的 +SVG(每个约 1KB),所以这些版式**离线也能正常渲染**。 + +## 自定义 LOGO + +一个属性给整份 deck 加上公司 / 产品 LOGO,不用每页粘一个 ``: + +```html + +``` + +`data-logo-position` 可选 `top-left` / `top-right` / `bottom-left` / +`bottom-right`(默认 `top-right`);`data-logo-size` 设置高度,宽度按比例。 +某一页不想要(通常是封面)就写 `
`。 +演讲者模式的预览里带 LOGO;导出 PDF 时**每一页都带**(写了 `data-no-logo` +的那页除外)。 + +想自己摆位置:在 `.deck` 里直接写 +``, +样式在 `base.css` 里,**完全不依赖 JS**。 + ## 键盘快捷键 +手机 / 平板上**向左划到下一页,向右划回上一页**,不需要键盘。 +双指缩放、纵向滚动、总览网格和 notes 抽屉都不受影响。 + ``` ← → Space PgUp PgDn Home End 翻页 +左划 / 右划(触摸) 翻页 F 全屏 S 打开演讲者窗口(磁吸卡片模式) N 底部 notes 抽屉 @@ -183,7 +286,7 @@ html-ppt-skill/ ├── README.zh-CN.md 本文件 ├── references/ 详细文档 │ ├── themes.md 36 主题 + 使用场景 -│ ├── layouts.md 31 布局 +│ ├── layouts.md 36 布局 │ ├── animations.md 27 CSS + 20 FX 目录 │ ├── full-decks.md 15 完整 deck 模板 │ ├── presenter-mode.md 🎤 演讲者模式 + 逐字稿指南 @@ -200,11 +303,11 @@ html-ppt-skill/ ├── templates/ │ ├── deck.html 最小起步模板 │ ├── theme-showcase.html iframe 隔离的主题 tour -│ ├── layout-showcase.html 全部 31 布局 +│ ├── layout-showcase.html 全部 36 布局 │ ├── animation-showcase.html 47 动画 slide │ ├── full-decks-index.html 15 deck gallery │ ├── full-decks// 15 个 scoped 多页 deck 模板 -│ └── single-page/*.html 31 个布局文件(带示例数据) +│ └── single-page/*.html 36 个布局文件(带示例数据) ├── scripts/ │ ├── new-deck.sh 脚手架 │ ├── render.sh headless Chrome → PNG diff --git a/plugins/codex/plugins/html-ppt/skills/html-ppt/SKILL.md b/plugins/codex/plugins/html-ppt/skills/html-ppt/SKILL.md index 54af9164..869b5767 100644 --- a/plugins/codex/plugins/html-ppt/skills/html-ppt/SKILL.md +++ b/plugins/codex/plugins/html-ppt/skills/html-ppt/SKILL.md @@ -17,14 +17,21 @@ npx skills add https://github.com/lewislulu/html-ppt-skill One command, no build. Pure static HTML/CSS/JS with only CDN webfonts. +No network on the target machine? Point the CLI at a local copy +(`npx skills add ./html-ppt-skill`), or just copy this folder into your agent's +skills directory — `~/.claude/skills/html-ppt/` for Claude Code. Decks render +offline; only the webfonts fall back to the system stack. See +[README.md](README.md#offline--manual-install). + ## What the skill gives you - **36 themes** (`assets/themes/*.css`) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint - **15 full-deck templates** (`templates/full-decks//`) — complete multi-slide decks with scoped `.tpl-` CSS. 8 extracted from real-world decks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, **presenter-mode-reveal** — 演讲者模式专用) -- **31 layouts** (`templates/single-page/*.html`) with realistic demo data +- **36 layouts** (`templates/single-page/*.html`) with realistic demo data, including **5 real-image layouts** (single / full-bleed / image+text / gallery / before-after) - **27 CSS animations** (`assets/animations/animations.css`) via `data-anim` - **20 canvas FX animations** (`assets/animations/fx/*.js`) via `data-fx` — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion - **Keyboard runtime** (`assets/runtime.js`) — arrows, T (theme), A (anim), F/O, **S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards)**, N (notes drawer), R (reset timer in presenter) +- **Touch navigation** — swipe left/right to change slides on phones and tablets - **FX runtime** (`assets/animations/fx-runtime.js`) — auto-inits `[data-fx]` on slide enter, cleans up on leave - **Showcase decks** for themes / layouts / animations / full-decks gallery - **Headless Chrome render script** for PNG export @@ -78,7 +85,7 @@ tasteful default and confirm. - Academic / report → `academic-paper`, `editorial-serif`, `minimal-white` - Edgy / cyber / launch → `cyberpunk-neon`, `vaporwave`, `y2k-chrome`, `neo-brutalism` -3. **Starting point.** One of the 14 full-deck templates, or scratch? Point +3. **Starting point.** One of the 15 full-deck templates, or scratch? Point to the closest `templates/full-decks//` and ask if it fits. If the user's content suggests something obvious (e.g. "我要做产品发布会" → `product-launch`), propose it confidently instead of asking blindly. @@ -99,7 +106,9 @@ Only after those are clear, scaffold the deck and start writing. ./scripts/new-deck.sh my-talk open examples/my-talk/index.html ``` -2. **Pick a theme.** Open the deck and press `T` to cycle. Or hard-code it: +2. **Pick a theme.** Open the deck and press `T` to cycle. Or hard-code it + (`../assets/` here is a placeholder — use whatever prefix the rest of the + file already uses; `new-deck.sh` has set it to the right depth): ```html ``` @@ -112,10 +121,15 @@ Only after those are clear, scaffold the deck and start writing. For canvas FX, use `
...
` and include ``. Catalog in [references/animations.md](references/animations.md). -5. **Use a full-deck template.** Copy `templates/full-decks//` into - `examples/my-talk/` as a starting point. Each folder is self-contained with - scoped CSS. Catalog in [references/full-decks.md](references/full-decks.md) - and gallery at `templates/full-decks-index.html`. +5. **Use a full-deck template.** Scaffold from it, don't copy it by hand — + the template's `../../../assets/` is relative to *its own* location, so a + manual copy lands the paths at the wrong depth: + ```bash + ./scripts/new-deck.sh my-talk -t pitch-deck + ``` + Each folder is self-contained with scoped CSS. Catalog in + [references/full-decks.md](references/full-decks.md) and gallery at + `templates/full-decks-index.html`. 6. **Render to PNG.** ```bash ./scripts/render.sh templates/theme-showcase.html # one shot @@ -129,12 +143,28 @@ Only after those are clear, scaffold the deck and start writing. - **Use tokens, not literal colors.** Every color, radius, shadow should come from CSS variables defined in `assets/base.css` and overridden by a theme. Good: `color: var(--text-1)`. Bad: `color: #111`. + Text on top of an `--accent` fill is the one people get wrong: it needs + `color: var(--accent-ink)`, because accents here run from `#ffffff` to + `#000000` and no literal ink is readable on all of them. - **Don't invent new layout files.** Prefer composing existing ones. Only add - a new `templates/single-page/*.html` if none of the 30 fit. + a new `templates/single-page/*.html` if none of the 36 fit. +- **Putting images on a slide?** Start from one of the five `image-*` layouts and + use `.img-frame` — see *Images* below. Never drop a bare `` into a slide: + an unframed image ignores the slide's height and pushes the rest off the page. - **Respect chrome slots.** `.deck-header`, `.deck-footer`, `.slide-number` and the progress bar are provided by `assets/base.css` + `runtime.js`. -- **Keyboard-first.** Always include `` - so the deck supports ← → / T / A / F / S / O / hash deep-links. +- **Add a logo declaratively, once.** Put `data-logo` on `` — don't paste + an `` into every slide. See *Custom logo* below. +- **Keyboard-first.** Always include the runtime, e.g. + ``, so the deck supports + ← → / T / A / F / S / O / hash deep-links. +- **Never hand-edit the `../` depth in asset paths.** Every `assets/` reference + is relative to the file that holds it: `templates/deck.html` uses + `../assets/`, `templates/single-page/*.html` use `../../assets/`, and + `templates/full-decks/*/index.html` use `../../../assets/`. Copying a file to + a new depth silently breaks all of them. Scaffold with + `./scripts/new-deck.sh [parent] [-t