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 huangrichao2020/pretty-skills --skill html-ppt-viewer-htmlgit clone --depth 1 https://github.com/huangrichao2020/pretty-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/huangrichao2020/pretty-skills/html-ppt-viewer-html)<a href="https://agentmods.dev/skills/huangrichao2020/pretty-skills/html-ppt-viewer-html"><img src="https://agentmods.dev/badge/skills/huangrichao2020/pretty-skills/html-ppt-viewer-html/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/huangrichao2020/pretty-skills/html-ppt-viewer-html"><img src="https://agentmods.dev/badge/skills/huangrichao2020/pretty-skills/html-ppt-viewer-html.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.00093 | $0.03421 |
| Opus 5 | $0.00046 | $0.01710 |
| Sonnet 5 | $0.00019 | $0.00684 |
| Haiku 4.5 | $0.00009 | $0.00342 |
Grade A, and why
html-ppt-viewer 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 12d 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 — 295 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HTML PPT 阅读器 Skill
⚠️ 出图前必走 · ppt 出图法 V2 7 步
重要：本 skill 只负责"把已有图打包成 HTML"。生图前必须走ppt 出图法 V2 7 步：
1. fetch 完整仓库内容（README + 子目录 + examples 并行）
2. reset todo（明确节奏）
3. 整理 "N 张图主题+核心一句话" 清单（每张 1 行）
4. 单张 prompt ≤ 60 行（不堆字体铁律）
5. 出 P1 hook → 渲染核对清单（10+ 项）→ 走批量
6. 接受 AI 主动加的细节和布局调整
7. 沉淀到 case 文档
ppt 出图法 V2 完整方法论见 ~/.mavis/knowledge/knowhub/domains/visual-creation/methodology/ppt-out-image-method.md。
反例（2026-07-02 how-to-agent-ppt）：因为没走 V2 7 步 → PPT 图字体幼稚、布局不丰富、AI 调整被否定 → 用户反馈"前天的好多了"。
正例（2026-06-30 ai-training-ppt）：走了 V2 7 步 → 60 行 prompt + 接受 AI 加细节 + 渲染核对 → 8 张图一气呵成。
跳过 V2 7 步直接调本 skill = 极大概率翻车。
一句话定位
"我有一堆图，想让人像看 PPT 一样翻页看"
↓
HTML 阅读器（PPT 风格 + 浏览器打开 + 键盘翻页）
↓
chokepoint-ppt · ai-training-ppt · weekly-outlook-html · 任何"图片集"
5 区域架构
┌─────────────────────────────────────────────┐
│ [顶部] 品牌 logo + 标题 + badge │
├──────┬──────────────────────────────────────┤
│ │ [tag + 标题 + 副标题] │
│ side │ ┌──────────────────────────────┐ │
│ bar │ │ [大图全屏展示区] │ │
│ │ └──────────────────────────────┘ │
│ │ [← Prev / 1 of N / Next →] │
└──────┴──────────────────────────────────────┘
[角落] 键盘提示 ← → / 1-N
完整可复用模板（直接复制改 pages[]）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>YOUR TITLE</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Noto Serif CJK SC', 'Songti SC', Georgia, serif;
background: #FFF5F5; /* 奶油粉 */
color: #1a1a1a; overflow: hidden; height: 100vh;
}
.header {
height: 64px; padding: 0 32px;
background: linear-gradient(135deg, #FFF5F5 0%, #FFE8E8 100%);
border-bottom: 2px solid #B8860B; /* 古铜金 */
display: flex; align-items: center; justify-content: space-between;
}
.header h1 { font-size: 22px; color: #B8860B; }
.badge {
background: #B8860B; color: white;
padding: 4px 12px; border-radius: 12px;
font-size: 13px; font-weight: 600;
}
.layout { display: flex; height: calc(100vh - 64px); }
.sidebar {
width: 280px; padding: 16px;
background: #FAF0EE; border-right: 1px solid #E0D0CC;
overflow-y: auto;
}
.sidebar-title {
font-size: 13px; color: #886; margin-bottom: 8px;
text-transform: uppercase; letter-spacing: 1px;
}
.page-item {
padding: 12px 14px; margin-bottom: 6px;
border-radius: 8px; cursor: pointer;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.page-item:hover { background: #FFEEEE; }
.page-item.active { background: #B8860B; color: white; border-left-color: #8B6608; }
.page-item.active .page-num { color: rgba(255,255,255,0.8); }
.page-num { font-size: 11px; color: #B8860B; font-weight: 700; margin-bottom: 4px; }
.page-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.main { flex: 1; padding: 24px 32px; display: flex; flex-direction: column; }
.slide-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.slide-tag {
background: #B8860B; color: white; padding: 4px 10px;
border-radius: 4px; font-size: 11px;
}
.slide-title { font-size: 26px; color: #1a1a1a; font-weight: 700; }
.slide-subtitle { color: #666; font-size: 14px; margin-bottom: 16px; }
.slide-frame {
flex: 1; background: white; border-radius: 12px;
box-shadow: 0 8px 24px rgba(184, 134, 11, 0.15);
overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.slide-image {
max-width: 100%; max-height: 100%; object-fit: contain;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.footer {
margin-top: 16px; display: flex; align-items: center; justify-content: space-between;
}
.nav-btn {
padding: 8px 20px; background: #B8860B; color: white;
border: none; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.keyboard-hint {
position: fixed; bottom: 16px; right: 24px;
background: rgba(0,0,0,0.7); color: white;
padding: 8px 14px; border-radius: 6px; font-size: 12px; opacity: 0.8;
}
</style>
</head>
<body>
<div class="header">
<h1>YOUR TITLE</h1>
<div class="badge">YOUR BADGE</div>
</div>
<div class="layout">
<aside class="sidebar">
<div class="sidebar-title">章节导航</div>
<div id="page-list"></div>
</aside>
<main class="main">
<div class="slide-meta">
<span class="slide-tag" id="tag">P01 · TAG</span>
<h2 class="slide-title" id="title">TITLE</h2>
</div>
<div class="slide-subtitle" id="subtitle">SUBTITLE</div>
<div class="slide-frame">
<img id="slide-img" class="slide-image" src="images/01.png" alt="">
</div>
<div class="footer">
<button class="nav-btn" id="prev">← 上一页</button>
<span id="counter">1 / N</span>
<button class="nav-btn" id="next">下一页 →</button>
</div>
</main>
</div>
<div class="keyboard-hint">← → 翻页 · 1-N 跳转</div>
<script>
// 配置：只改这个数组就能复用
const pages = [
// { file: "01.png", title: "...", subtitle: "...", tag: "..." },
];
let current = 0;
const $ = id => document.getElementById(id);
const $img = () => $("slide-img");
function render() {
const page = pages[current];
$("tag").textContent = `P0${current+1} · ${page.tag}`;
$("title").textContent = page.title;
$("subtitle").textContent = page.subtitle;
$img().src = `images/${page.file}`;
$img().style.animation = 'none';
void $img().offsetWidth; // 重启动画
$img().style.animation = 'fadeIn 0.5s ease-out';
$("counter").textContent = `${current+1} / ${pages.length}`;
$("prev").disabled = current === 0;
$("next").disabled = current === pages.length - 1;
document.querySelectorAll(".page-item").forEach((el, i) => {
el.classList.toggle("active", i === current);
});
}
function renderSidebar() {
const list = pages.map((p, i) => `
<div class="page-item" data-idx="${i}">
<div class="page-num">PAGE ${String(i+1).padStart(2,"0")}</div>
<div class="page-title">${p.title}</div>
</div>
`).join("");
$("page-list").innerHTML = list;
document.querySelectorAll(".page-item").forEach(el => {
el.onclick = () => { current = parseInt(el.dataset.idx); render(); };
});
}
$("prev").onclick = () => { if (current > 0) { current--; render(); } };
$("next").onclick = () => { if (current < pages.length-1) { current++; render(); } };
document.addEventListener("keydown", e => {
if (e.key === "ArrowLeft" && current > 0) { current--; render(); }
if (e.key === "ArrowRight" && current < pages.length-1) { current++; render(); }
if (/^[1-9]$/.test(e.key)) {
const idx = parseInt(e.key) - 1;
if (idx < pages.length) { current = idx; render(); }
}
if (e.key === " ") { e.preventDefault(); $("next").click(); }
});
renderSidebar();
render();
</script>
</body>
</html>
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.
- 12d ago First seen · 295 lines · 93 tokens per session scan A 871f60aec078
html-ppt-viewer is a skill published in the GitHub repository huangrichao2020/pretty-skills (54 stars, last pushed 5d ago), licensed MIT. It adds 93 tokens to every session and 3,421 once invoked, about $0.0005 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-30.
Other skills, from other repositories
story-import
A Chinese-language workflow for turning an existing novel into a structured writing project that can be continued later.
story-short-write
A tool for writing complete short online novels, from the initial idea through the finished manuscript. It focuses on a single main emotional effect and usually uses first-person narration.
story-cover
An image-generation workflow for creating novel covers with the book title and author name included. It determines a likely genre and style from the book information, then uses GPT-Image-2 to create the cover.
novel-tools
A Chinese-language toolkit and workflow guide for using AI writing tools to create online fiction, from story planning through publication and performance analysis.
novel-pleasure-points
A Chinese-language reference for designing satisfying moments in online fiction, such as reversals, comebacks, power reveals, and revenge scenes. It also covers pacing and reducing reader fatigue from using the same pattern too often.
novel-worldbuilding
A writing guide for designing a consistent fictional world, including its powers, places, groups, economy, and hidden mysteries.