html-slides

html-slides is a skill for Codex from ontology-of-everything/SemanticSkills. It costs 82 tokens per session (2,198 once invoked), scanned A, original, Apache-2.0.

A workflow for creating a presentation as one self-contained HTML file sized for a 1920×1080 screen. It supports several visual styles and can export to PPTX when requested.

In plain words
What is it for?
Use it to make reports, teaching decks, and briefing slides with fixed page patterns, charts or diagrams, and selectable visual styles.
Why use it?
It turns a presentation request into a confirmed outline and page plan before writing slides, while keeping the output runnable without installed dependencies.

Skill for Codex

Written for Codex: agents/openai.yaml present. Also seen: $skill-name invocation; built for openclaw.

Good fit Use it to make reports, teaching decks, and briefing slides with fixed page patterns, charts or diagrams, and selectable visual styles.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/ontology-of-everything/semanticskills/html-slides
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add ontology-of-everything/SemanticSkills --skill html-slides
Clone the repo
git clone --depth 1 https://github.com/ontology-of-everything/SemanticSkills

Made for: Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for html-slides

README.md
[![agentmods](https://agentmods.dev/badge/skills/ontology-of-everything/semanticskills/html-slides/github.svg)](https://agentmods.dev/skills/ontology-of-everything/semanticskills/html-slides)
Your own site
<a href="https://agentmods.dev/skills/ontology-of-everything/semanticskills/html-slides"><img src="https://agentmods.dev/badge/skills/ontology-of-everything/semanticskills/html-slides/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for html-slides

Your own site · 80×15
<a href="https://agentmods.dev/skills/ontology-of-everything/semanticskills/html-slides"><img src="https://agentmods.dev/badge/skills/ontology-of-everything/semanticskills/html-slides.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 82 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,198 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00082 $0.02198
Opus 5 $0.00041 $0.01099
Sonnet 5 $0.00016 $0.00440
Haiku 4.5 $0.00008 $0.00220

Measured yesterday against content hash 6fae3016f31c, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

html-slides scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

The scan reads SKILL.md. This mod also ships 2 executable files (assets/core/runtime.js, tools/export_pptx.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/html-slides/SKILL.md · 95 lines

How it starts

The opening of the file, as written. The whole thing — 95 lines — stays where its author put it; the contents beside it link to each section on GitHub.

演示文稿生成(多风格)

概论

把一句话需求做成一份明文单文件 HTML 演示(1920×1080,内联 CSS,≤120 行运行时 JS)。

代码与文档分离:assets/core/ 放基础 CSS、运行时 JS 与页型骨架画廊,assets/<style>/ 放风格变量与专属组件,references/ 下的 md 只讲规则并指向这些文件。 视觉由风格插拔:核心只用 CSS 变量名,风格给取值、字体、专属页型与素材。首版收录 generic(默认兜底)、huawei(官方胶片分析)、apple(经验版);新增风格按 references/styles/_template.md 建一份 md + 一个 assets/<style>/ 目录即可。

仅显式调用:用户写 $html-slides(或同名斜杠命令)或点名本技能时启用;泛泛聊 PPT 不触发。不做的事:不代用户编造数据与引文;不安装依赖;PPTX 只在用户要求时导出并明说是哪一档(见输出格式)。

原则

每条只在指向的文件里定义细则,本节不重述。

  1. 先对齐再动手:主题与大纲未经用户确认不写页面 → process.md §1–2
  2. 标题即观点且点名技术:内容页标题是有判断的句子并含关键技术 / 方法名;全部标题连读 = 论证链 → style-guide.md §4
  3. 固定三页:第 1 页封面、第 2 页目录、末页致谢,目录随当前大纲重建 → page-patterns.md §1
  4. 每页塞进 1080section 固定尺寸 + overflow:hidden,超出被无声裁切;交付前 ?debug 零红框 → deck-format.md §5
  5. 字号按场景分档:授课散文 ≥21px;汇报 / 自读短语卡 ≥18px;表格、轴标签、图内文字 15px 图元豁免 → style-guide.md §3
  6. 连续 3 页换视觉家族,密页后接轻页;两个以上耦合维度用复合页型不拆薄 → page-patterns.md §2
  7. 同级卡片同构:同组同角色卡片的底 / 边 / 圆角 / 字体层级完全一致,只有文案说明了差异才允许单卡高亮 → style-guide.md §5
  8. 语言朴实可核验:不写套话、广告词、自造比喻,页面上不写「点击查看」类操作提示 → style-guide.md §4
  9. 字不如表,表不如图:机制 / 流程 / 架构页以图表为主表达;初版放类型化占位,终版落地并清零 data-todovisuals.md
  10. 动画只手动推进,汇报与自读默认静态 → motion.md
  11. 风格只改变量与专属组件assets/core/ 与骨架不出现具体色值;取值一律来自 assets/<style>/vars-*.cssdeck-format.md §3
  12. 图片经 data URI 内联,deck 拷走即用;素材来自 assets/<style>/ 或用户提供 → deck-format.md §4

流程

七阶段,三个「讨论」是硬闸门;细则与场景适配表见 process.md

# 阶段 产出 闸门
1 主题讨论 五问一次问完(听众 / 场合时长 / 目标 / 素材 / 风格与交付)→ 需求共识一段 用户确认
2 大纲规划 章 / 问题 / 分钟 / 页数表;确认后落盘 <deck>.plan.md 用户确认
3 选择页型 大纲条目 → 页型 → 视觉家族 / 密度 映射表 随 4 给出
4 初版 逐页规划表 + <deck>.html(配图为占位块)
5 讨论修改 逐章引导反馈,按页记录修改清单 用户点头「结构定了」
6 终版 配图落地、动画节拍(仅授课)、?debug 零溢出、按需 PPTX
7 交付确认 微调、数字核对、交付话术 用户验收

用户催「直接做」:五问改为带默认值的一轮快答,用户只需纠偏;闸门不豁免。未指明风格 → generic,并在需求共识里写明「当前风格:通用商务,可改」。

输出格式

<deck>.plan.md(阶段 2 建、随改随更):

# <标题> · 页面规划
风格:huawei-light · 场景:汇报 · 时长:10 min · 交付:HTML(+PPTX)
## 大纲
- 01 章名 — 本章要回答的问题(N 页)
## 逐页
| # | label | 核心观点(一句话) | 页型 | 视觉家族/密度 | 配图(类型+规格) | 拍数 |

Read the full file on GitHub · 95 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 95 lines · 82 tokens per session scan A 6fae3016f31c

Subscribe to this mod's changes

html-slides is a skill published in the GitHub repository ontology-of-everything/SemanticSkills (8 stars, last pushed yesterday), licensed Apache-2.0. It adds 82 tokens to every session and 2,198 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-10.

Related

Other skills, from other repositories

photographic-icon-set-generator

Generates consistent, locked-style sets of photographic, textured, or 3D-material-rendered icons via Ideogram — 3D-rendered, claymation, hand-painted, or isometric-with-material-texture icon packs that hold a shared style recipe across every icon in the batch. Use when the user asks for "3D icon set," "claymation…

devkindhq/ideogram-ai-toolkit · 202 tokens

brand-identity-sheet

Generates a single polished "brand identity sheet" image — a Dribbble-style board showing a UI card with the wordmark, a grid of textured app icons, pill-shaped buttons, a giant central wordmark treatment, and a secondary lockup with a brand glyph — and actually renders it via the ideogram MCP tools, not just drafts a…

devkindhq/ideogram-ai-toolkit · 314 tokens

character-model-sheet

Generates a single polished "character model sheet" image — a multi-panel character design board showing a full-body turnaround (front / 3-4 / side / back), a head & detail close-up sheet (face, hair/headwear, hands/props), a color palette, an overview text block (name, role, personality, wardrobe), and an optional…

devkindhq/ideogram-ai-toolkit · 285 tokens

moodboard-generator

Generates a single polished "moodboard" image — a 3×3 grid brand-exploration board (Color Palette, Typography, Logo Exploration, Iconography Style, Photography & Graphics, Material Samples, Abstract Patterns, Mood Imagery, Application Mockup) — and actually renders it via the ideogram MCP tools, not just drafts a…

devkindhq/ideogram-ai-toolkit · 348 tokens

concept-grid-generator

Generates a single "concept grid" image — a labeled comparison sheet showing several DISTINCT motif/icon concepts as tiles side by side, one locked palette and one locked rendering technique held constant across every tile — and actually renders it via the ideogram MCP tools, not just drafts a prompt. Use whenever the…

devkindhq/ideogram-ai-toolkit · 255 tokens

logo-prompting

Living reference for writing logo and brand-mark image-generation prompts (Ideogram-first, via ideogram-pack:ideogram-core-workflow-a). Use whenever the user asks for a logo prompt, a wordmark/icon direction, or wants feedback on a logo image-gen prompt they've drafted — even if they just paste a prompt and say "is…

devkindhq/ideogram-ai-toolkit · 169 tokens