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.
npx skills add WiseWong6/wise-skills --skill ppt-component-atlasgit clone --depth 1 https://github.com/WiseWong6/wise-skillsWrote 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.
[](https://agentmods.dev/skills/wisewong6/wise-skills/ppt-component-atlas)<a href="https://agentmods.dev/skills/wisewong6/wise-skills/ppt-component-atlas"><img src="https://agentmods.dev/badge/skills/wisewong6/wise-skills/ppt-component-atlas/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.
<a href="https://agentmods.dev/skills/wisewong6/wise-skills/ppt-component-atlas"><img src="https://agentmods.dev/badge/skills/wisewong6/wise-skills/ppt-component-atlas.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00045 | $0.01627 |
| Opus 5 | $0.00023 | $0.00813 |
| Sonnet 5 | $0.00009 | $0.00325 |
| Haiku 4.5 | $0.00005 | $0.00163 |
Grade A, and why
ppt-component-atlas 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 11d ago.
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.
How it starts
The opening of the file, as written. The whole thing — 123 lines — stays where its author put it; the contents beside it link to each section on GitHub.
ppt-component-atlas
ppt-component-atlas 只有一个职责：把用户输入的中文或英文组件名转换为本地裸 .html 文件。
本 Skill 以本地 catalog 为可信源，可以直接导出；线上图册只是快捷预览和多候选确认入口，不是导出的必经步骤。
源码口径来自：
https://github.com/WiseWong6/wise-labs/tree/main/html-ppt-components
本地 public/catalog-data.js 必须与 GitHub raw catalog 对齐；维护时用脚本的 --verify-source 检查。
需求路由
当用户只是要看图册、预览、浏览组件、查看有哪些组件或要组件目录时，回复线上图册地址即可：
https://wisewong.com/#tab=html-ppt-components
当用户要某个组件的 HTML 文件、HTML 代码文件、下载文件，或输入中文/英文组件名要求取代码时，调用导出脚本生成本地 .html 文件：
node ~/.codex/skills/ppt-component-atlas/scripts/export-component-html.mjs --query "<组件名>" --out-dir outputs/ppt-components
生成成功后，在回复里给生成文件的链接。不要在聊天里粘贴完整 HTML 源码。
导出默认为动态版：catalog 的 componentMotionCss 动效层已注入文件，与线上图册的动态预览一致——纯 CSS 实现，不含 JS；打开页面时入场动画播放一次，之后箭头轻推、雷达点脉冲等微动效持续循环。用户明确要「静态」「无动画」「不要动效」时，加 --static 重新导出静态版；用户未指明时默认动态，不要主动追问。
导出的文件必须是裸 HTML：只包含可独立打开所需的最小 html/head/style/body、组件 CSS、组件动效层和组件 DOM。不要导出 public 图册页、预览页、筛选器、分页、复制按钮、代码面板、返回按钮或说明 UI。
动效层随 catalog 的 componentMotionCss 一并注入：入场动画只播放一次，微动效持续循环，系统开启 prefers-reduced-motion 时全部自动关闭。不要手动删除生成文件里的动效样式，除非用户明确要求静态版本。
成功导出后，回复必须包含：
- 本地文件绝对路径和可点击文件链接
fileUrl- 线上详情
detailUrl - 当前组件可见文字
editableText - 说明这些文字只是当前参考内容，用户可以要求改文案、换色、增删元素或调整布局
- 如果用户需要预览，询问是否帮他打开浏览器预览本地
fileUrl或线上detailUrl
不要要求用户打开 public/index.html 后再自己定位组件；必须给准确的生成文件路径和准确的预览 URL。
如果 catalog 中没有完全满足用户需求的样式，先给最接近的组件作为参考 HTML；后续改文案、换色、加多个元素、改布局时，直接编辑生成出的 .html 文件。不要把这些二次修改强行塞回 catalog 或脚本参数。
数据口径
- 唯一数据源是
public/catalog-data.js - 当前数据来自
WiseWong6/wise-labs/html-ppt-components/catalog-data.js - 当前只保留 61 个组件 entry
- catalog 同时携带
componentMotionCss动效层，导出时随组件 CSS 一并注入 - 旧 catalog 中多出来的组件口径不保留、不兼容、不做 alias
匹配规则
- 支持中文
label - 支持英文
name - 支持
name + variant - 支持编号
- 精确命中唯一组件时直接导出
- 多候选时只输出候选列表和线上详情链接，让用户选择具体组件；不要自动取第一个
- 无命中时提示未找到，并给出可参考候选
脚本接口
# 列出全部组件
node ~/.codex/skills/ppt-component-atlas/scripts/export-component-html.mjs --list
# 按中文名导出（默认动态版，含动效）
node ~/.codex/skills/ppt-component-atlas/scripts/export-component-html.mjs --query "封面" --out-dir outputs/ppt-components
# 导出静态版（无动效）
node ~/.codex/skills/ppt-component-atlas/scripts/export-component-html.mjs --query "封面" --static --out-dir outputs/ppt-components
# 按英文名或英文名 + 变体导出
node ~/.codex/skills/ppt-component-atlas/scripts/export-component-html.mjs --query "process wrapped" --out-dir outputs/ppt-components
# 检查本地 catalog 是否对齐 GitHub 源码
node ~/.codex/skills/ppt-component-atlas/scripts/export-component-html.mjs --verify-source
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 11d ago First seen · 123 lines · 45 tokens per session scan A bf6970df25bc
ppt-component-atlas is a skill published in the GitHub repository WiseWong6/wise-skills (6 stars, last pushed 2d ago), licensed MIT. It adds 45 tokens to every session and 1,627 once invoked, about $0.0002 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-08-31.
Other skills, from other repositories
html-ppt-zhangzara-retro-zine
A neighborhood zine on the disappearing corner shops — portraits, voices, and what a block loses when they close. Built as a decision-grade story deck for community, local readers.
html-ppt-zhangzara-studio
A photography studio's portfolio-and-rate deck — the signature work, the process, and the packages that win the brief. Built as a decision-grade design craft deck for prospective clients.
motion-frames
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video…
webgl-halftone-drift
A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
motion-graphics
A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI…