html-anything is a local AI-assisted HTML editor in which coding-agent command-line tools create documents such as articles, presentations, posters, prototypes, and reports from reusable templates. People use it to produce HTML and export it to services such as WeChat, X, and Zhihu or to HTML and PNG files. The catalogue entries are the skills and instructions that define its output surfaces and workflows.
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 nexu-io/html-anything --skill article-sketchnote-editorialgit clone --depth 1 https://github.com/nexu-io/html-anythingWrote 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/nexu-io/html-anything/article-sketchnote-editorial)<a href="https://agentmods.dev/skills/nexu-io/html-anything/article-sketchnote-editorial"><img src="https://agentmods.dev/badge/skills/nexu-io/html-anything/article-sketchnote-editorial/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/nexu-io/html-anything/article-sketchnote-editorial"><img src="https://agentmods.dev/badge/skills/nexu-io/html-anything/article-sketchnote-editorial.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.00056 | $0.03917 |
| Opus 5 | $0.00028 | $0.01959 |
| Sonnet 5 | $0.00011 | $0.00783 |
| Haiku 4.5 | $0.00006 | $0.00392 |
Grade A, and why
article-sketchnote-editorial 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 10d 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 — 221 lines — stays where its author put it; the contents beside it link to each section on GitHub.
【模板: 编辑式视觉笔记（Editorial Sketchnote）】
【灵魂】把一个概念铸成一份编辑式图文档案。读者翻它像翻一本期刊专题——从真问题（专题刊头）→ 失败的尝试（便签批注、档案标签）→ 一句"等等——"的转折（跨栏大标题）→ 看见那个东西（Hero 对开页）→ 名字（Closing 名牌）。
不是博物馆陈列, 是杂志栏目。不是教科书定义, 是探案档案。 视觉与叙事一起负责, 让读者自己经历"卡住—走不通—翻过去—看见了"的弧线。文字克制, 不点题。
【六条公理 — 任一不过, 重做】
- 有真问题在前 — 起点是具体的、可触摸的、卡住的问题。不是「什么是 X」, 是「当时的人们用 A、B、C 都不够」。问题必须有裂缝。
- 必须有失败 — 路径中至少一次失败（或走偏、半对了）。线性"由此可得"会杀掉张力。
- 顿悟在前、命名在后 — 读者先「看到」, 再被告诉「这叫……」。标题不能出现概念名。
- 「现在」视角 — 每一站是「他/她那一刻能看到什么」, 不是「我们站在 100 年后回望」。后世评价不进画面。
- 文字克制, 不点题 — 禁用「你以为你刚才学到了一个概念」「你重新分娩了它」之类的元自指。让叙事张力自己产生发明感。允许诗意余韵（"于是, 你看见了山"）。
- 中文母语表达 — 不要翻译腔。动词驱动 / 具体物件 / 口语节奏。禁忌："被 X""进行 X""在...的背景下""随着 X 的发展""该方法在多个维度上展现优势"。
【六个 layout 模具 — 节奏锁死】
每站必须用不同的 layout, 节奏才出现：
| 序 | 站点 | class | 视觉特征 |
|---|---|---|---|
| 01 | 起点 / Feature | .feature |
米色底 + grid 6fr/6fr, 左大 SVG 图 / 右文字; kicker + Serif 大标题 + italic lead + drop-cap body |
| 02 | 失败一 / Note | .note |
双栏 grid（左 sidekick 涂鸦区 + 右 540px 便签纸）; 便签微旋 0.5deg + 顶部虚线穿孔 + 红笔删除线 + scribble + footnote ¹ |
| 03 | 失败二 / Archive | .archive |
全宽 + 黑色印章 stamp（168px, 含 ✕ 大字）+ 右栏 body + SVG 网格图 + verdict 红色 italic |
| 04 | 转折 / Cross | .cross |
全宽 + Serif 200px 由内容决定的转折爆点（禁套「等等」）+ amber 高亮 + 二栏 |
| 05 | 顿悟 / Hero | .hero |
蓝色顶边 4px + grid 7fr/5fr; 左大 SVG / 右 pull-quote + drop-cap body |
| 06 | 命名 / Closing | .closing |
米色底 + 双线顶边 + 中心对称 + 巨大 Serif 名 + byline 上下细线 + epilogue |
节奏铁律: 开阔（feature）→ 紧（note 错位）→ 紧（archive 横长）→ 爆（cross 200px）→ 开阔（hero）→ 静（closing 中心对称）。不是均匀展开, 是有呼吸的——开阔与紧凑交替, 转折时大爆炸, 最后回到中心对称。
禁区：6 个节都是 60-80px margin-top 的均匀间距 = 画廊陈列, 不是漫画分镜, 重排。
【字族对比 — 必须四种同时使用】
- Serif (
Noto Serif SC)：杂志主标题、mega-name、italic lead、pull-quote - Sans (
Noto Sans SC)：正文 body-sans、failed station head、kicker 后文字 - Mono (
JetBrains Mono/SF Mono)：编号 num、kicker label、byline、footnote ¹、stamp - Hand (
Caveat/ 楷体)：手写批注 scribble、ask 设问、caption
任一缺席 = 视觉回到 AI 单一字族的均质感, 灵魂崩。
【颜色系统 — ≤4 主色】
--bg: #FAF7EF /* 暖米白底 */
--paper: #F5F1E5 /* 米色卡（feature/closing 底）*/
--ink-strong: #0F0F0F /* 重要文字, 避免 #000 */
--ink: #1F1F1F /* body */
--ink-light: #6B6B6B /* kicker, caption */
--red: #B23A2C /* 错误、批注、强调 */
--blue-deep: #3D5A80 /* 顿悟视觉 */
--amber: #BB8A2B /* 转折提示 */
--amber-soft: #D7A85A /* 高亮底色 */
禁止 #000 纯黑。≤ 4 主色（红 + 蓝 + amber + 中性）。
【必备装饰结构件】
kicker / drop-cap / byline / stamp 是结构必须项。其它按需取用：
- kicker — 站点序号 + 类型小字：Mono uppercase 13px + 黑底白字 num 方块 + 36px 短横线
- drop-cap — body 首字：
::first-letterfloat left, 96px Serif - lead — feature 引言：italic 23px Serif + 红色左边线 2px
- pull-quote — hero 关键句：italic 38px Serif + 蓝色边线 4px + 浮动
\201C大引号 100px - strike — failed body 删除关键词：
text-decoration: line-through红色 2.5px - scribble — note 红笔批注：Caveat 24px + 6deg 旋转 + 红色 + 虚线红边框
- stamp — archive 失败印章：黑底白字 12px Mono + ✕ Serif 64px
- verdict — archive 结案语：italic 19px Serif 红色 + 上虚线分隔
- footnote — note 脚注：Mono 13px + ¹ 上标
- byline — closing 出处：Mono 14px uppercase + letter-spacing 0.18em + 上下细黑线
- mega — cross 转折爆点：Serif 200px + amber 渐变高亮（核心字 1-3 个）
- epilogue — closing 余韵：italic 26px Serif +
—红色破折号前缀
【sidekick 涂鸦区 — note 模具左栏不能空】
三种填法（按内容选, 不要堆满）：
- SVG 速写 — 失败本质能用 1-2 个图形姿态画出来 →
<svg viewBox="0 0 280 220">简笔画 + 红笔批注 - 手写公式 (
.formula) — 失败本质能压成 1-3 行文字关系 → Caveat 22px + 虚线左边线 + 微旋 -1deg - 箭头评注 (
.arrow) — 单点强调 → Caveat 26px + 微旋 6deg + 红色
约束：sidekick 是注脚不抢戏 / 涂鸦感优先精致（歪斜、虚线、留缝隙）/ 颜色克制（黑灰 + 红）/ 内容密度低（宁可少不要塞三个图）。
【HTML 骨架（agent 复用结构, 内容由叙事弧线决定）】
<div class="magazine-head">
<div class="top-bar">
<div class="left"><span class="badge">№ 01</span><span>[领域 · 年份]</span></div>
<div class="right">[ENGLISH CATEGORY]</div>
</div>
<h1>[不剧透标题]<br>[第二行可选]</h1>
<p class="deck">[italic 引言: 暗示问题但不揭示答案]</p>
</div>
<section class="feature">
<div class="visual"><svg>[SVG 大图, max-width 540]</svg></div>
<div class="meta">
<div class="kicker"><span class="num">01</span><span class="rule"></span>起点 · [时空锚点]</div>
<h2 class="head-serif">[卡住的问题]</h2>
<p class="lead">[一句简洁领题]</p>
<div class="body-sans drop-cap"><p>[具体例子]</p><p>[关键转折用 <em></em> 强调]</p><span class="ask">[开放设问？]</span></div>
</div>
</section>
<aside class="note">
<div class="sidekick">
<!-- 三选一: SVG / .formula / .arrow + 可选 .doodle-caption -->
</div>
<div class="paper">
<div class="kicker"><span class="num">02</span>第一次尝试</div>
<h3 class="head-sans">[动作名]</h3>
<div class="body-serif"><p>[思路]</p><p>失败用 <span class="strike">删除线</span></p></div>
<div class="footnote"><span class="mark">¹</span><span>[根本原因]</span></div>
<div class="scribble">[一句红笔批注]</div>
</div>
</aside>
<section class="archive">
<div class="stamp"><div class="label">EX-02</div><div class="x">✕</div><div class="case">Failed</div></div>
<div class="body-area">
<div class="kicker"><span>第二次尝试</span></div>
<h3 class="head-sans">[动作名]</h3>
<div class="visual"><svg>[失败示意]</svg></div>
<div class="body-serif"><p>[思路 + 失败]</p></div>
<div class="verdict">[结案语]</div>
</div>
</section>
<section class="cross">
<h2 class="mega"><span class="em">[转折爆点 1-3 字]</span>[可选后缀]</h2>
<div class="grid">
<div class="left">
<div class="kicker"><span class="num">04</span>转折</div>
<div class="body-serif"><p>[反向陈述]</p></div>
<span class="ask">[转折设问？]</span>
</div>
<div class="right"><svg>[反向姿态]</svg><p class="caption">[caption]</p></div>
</div>
</section>
<section class="hero">
<div class="layout">
<div class="visual"><svg>[大幅 hero 图]</svg><p class="caption">[caption]</p></div>
<div class="text">
<div class="kicker"><span class="num">05</span>顿悟</div>
<h2 class="head-serif">[姿态名, 不出现概念名]</h2>
<div class="pull-quote">[核心句子]</div>
<div class="body-serif drop-cap"><p>[洞察的具体表述]</p></div>
</div>
</div>
</section>
<section class="closing">
<p class="approach">[这种 X 的研究对象, 叫——]</p>
<h1 class="mega-name">[中文概念名]</h1>
<div class="en-name">[English Name]</div>
<div class="byline"><span><strong>[人名]</strong></span><span class="sep">·</span><span>[年份]</span><span class="sep">·</span><span>[文献]</span></div>
<div class="closing-body"><p>[它打开了什么]</p><p>[它换了什么眼睛]</p></div>
<p class="epilogue">[诗意余韵, 不元自指]</p>
</section>
What ships with it
2 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.
- 10d ago First seen · 221 lines · 56 tokens per session scan A c0a99a1f0f47
article-sketchnote-editorial is a skill published in the GitHub repository nexu-io/html-anything (8,731 stars, last pushed 18d ago), licensed Apache-2.0. It adds 56 tokens to every session and 3,917 once invoked, about $0.0003 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
deck-guizang-editorial
Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).
deck-guizang-editorial
A Chinese-language presentation layout system for creating editorial-style slide decks that resemble printed magazines or electronic paper. It provides ten reusable page layouts and five fixed color palettes for stories, opinions, research, data, and personal presentations.
codex-interactive-capability-map
Turn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.
frame-data-chart-nyt
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
video-hyperframes
Hyperframes / Remotion-compatible continuous frame animation with autoplay support.
article-magazine
Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.