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 iflytek/iFly-Skills --skill animated-sketch-diagramgit clone --depth 1 https://github.com/iflytek/iFly-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/iflytek/ifly-skills/animated-sketch-diagram)<a href="https://agentmods.dev/skills/iflytek/ifly-skills/animated-sketch-diagram"><img src="https://agentmods.dev/badge/skills/iflytek/ifly-skills/animated-sketch-diagram/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/iflytek/ifly-skills/animated-sketch-diagram"><img src="https://agentmods.dev/badge/skills/iflytek/ifly-skills/animated-sketch-diagram.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.00182 | $0.02578 |
| Opus 5.5 | $0.00073 | $0.01031 |
| Sonnet 5.5 | $0.00036 | $0.00516 |
| Haiku 4.5 | $0.00018 | $0.00258 |
Grade A, and why
animated-sketch-diagram 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 1mo 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 — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Animated Sketch Diagram（手绘涂鸦风动画信息图）
产出一张像资深工程师在牛皮笔记本上手绘的系统图：米色纸面、黑墨抖动描边、 极淡水洗色块、简笔涂鸦图标（小人/文档/纸箱/月亮）、序号章、✦ 点缀， 连线上有小圆点沿路径流动、图标带微动效，整体 3s 无缝循环。
产物：一个自包含 HTML 文件（内联 SVG + CSS 动画 + base64 字体，双击即可播放）；
需要 GIF 时用 scripts/render-gif.mjs 逐帧录制。
工作流
1. 先规划内容，再动笔
版式跟着内容的天然形状走，不要反过来。 先判断主题本身长什么样，再选版式原型：
| 内容的天然形状 | 版式原型 |
|---|---|
| N 个并列的类别/方案/阶段，各自内部有流程 | 横向色带 band（左侧标签栏 + 右侧流程画布） |
| 自上而下的分层架构（前端→服务→存储） | 纵向层叠：全宽色层堆叠，跨层竖直连线 |
| 一个核心与多个卫星（hub-and-spoke） | 径向：中心 mascot 大圆 + 环绕节点 + 放射连线 |
| 两三个东西逐维度对比 | 并排色柱/矩阵，同一行是同一维度 |
| 单一主流程 | 不用色带，一条蛇形/折线主轴铺满画布 |
| 时间演进 | 横向时间轴 + 上下交错的事件卡 |
原型可以混搭（如 band 内部径向）。所有原型共用同一套元件：
- 区块（region）：一级分区的圆角水洗色块，左上序号章 + 顶部居中标题；相邻区块换色。
- 内卡（node）：纸白小卡片 = 简笔涂鸦图标 + 手写标签，一个区块内 3~6 个为宜； "文档/列表"用折角纸 + 三两行短横线速记，"一叠"用偏移副本。
- 连线（edge)：微弯曲线箭头，线上可挂小字标签。拓扑跟内容走：分支、汇聚、 往返、回环、跨区块长弧、环形轨道都是一等公民，不要把图默认摆成单向流水线—— 内容里有循环/转向，图上就要画出来并让圆点沿它转。实线/虚线只表达"确定/弱、 数据面/控制面"这类强弱语义，不是"主流程/回环"的分工。
- 点缀件：虚线引用框（放命令/示例）、简笔小人、✦ 火花、中央手写口号。
规划的最后一步是编排流动：动画不是装饰，是把主题里"什么在流动"讲出来。 先用一句话回答——这张图里流动的是什么（数据？请求？记忆？任务？）， 它从哪来、经过谁、在哪分叉、在哪转圈、最后到哪去——再把这条"流动脚本" 落成路径：该分支就分支、该汇聚就汇聚、该循环就让圆点沿弧转回去。 主题本身是环（飞轮、迭代、生命周期）→ 图的动线就该是环； 主题是发散/收敛（一发多、多合一）→ 动线就该扇形展开/合拢。 看成品时"流动的形状"应该能复述出主题的结构，全图只有一排同向箭头 通常说明流动没规划，不是主题真的这么直。
内容永远来自用户的主题。不要照搬任何示例里的文字、节点名或结构； 示例里的"三条横带"只是原型之一，不是本 skill 的固定输出形状。
2. 反问图标来源（交互场景必做）
动笔前用 AskUserQuestion 问一次图标怎么来（用户此前已表态或本次已指定的不重复问）：
- 生图模型生成（质感最像真手绘）——选这个就先做工具发现：当前环境有生图
skill/MCP/工具就直接用；没有就请用户提供生图 API。生成时统一约束提示词：
黑墨简笔涂鸦、单一线宽、纸色/透明底、无阴影；产物转 data URI 用
<image>内嵌， 尺寸对齐 token，不引外部 URL。 - 自己设计 SVG 简笔图标（默认推荐，零依赖）——按 recipes §4 的涂鸦配方就地画。
- 网上搜现成素材——找 CC0/开源手绘图标（如 tabler、handdrawn 系列）， 下载 SVG 后统一改成 ink 色和 2px 线宽再内嵌，风格必须归一。
无头/非交互/子代理场景不要卡在提问上：直接用方案 2。
3. 读风格系统
读 references/style-guide.md —— 调色板、字体、描边、圆角、间距、动画节奏的全部 token。
风格的辨识度来自 token 的组合，务必按 token 来，不要自由发挥配色。
4. 读代码配方，组装 HTML
读 references/svg-recipes.md —— 面板、节点、箭头、流动圆点、图标微动效、标题高亮
的可复制 SVG/CSS 模式。按配方组装出一个 HTML 文件。
关键约束（导出 GIF 依赖这些）：
- 只用 CSS 动画（
@keyframes+offset-path），不用 SMIL<animate>， 不用 JS 驱动动画 —— 录制脚本靠document.getAnimations()逐帧定格。 - 所有
animation-duration必须能整除全局循环时长--loop（默认 3000ms）， 且infinite循环，这样 GIF 首尾无缝。 - 字体用 base64 内联（命令见 recipes），保证文件自包含、离线可开。
What ships with it
16 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.
- _meta.json 143 B
- assets/fonts-cn/README.md 500 B
- assets/fonts/Caveat-400.woff2 48 KB
- assets/fonts/Caveat-700.woff2 50 KB
- assets/fonts/Excalifont-400.woff2 24 KB
- assets/fonts/Kalam-400.woff2 22 KB
- assets/fonts/Kalam-700.woff2 22 KB
- assets/fonts/PatrickHand-400.woff2 23 KB
- assets/vendor/rough.js 27 KB runs code
- assets/vendor/sketchify.js 2.1 KB runs code
- README.md 1.7 KB
- references/style-guide.md 8.5 KB
- references/svg-recipes.md 13 KB
- scripts/package-lock.json 671 B
- scripts/package.json 145 B
- scripts/render-gif.mjs 3.0 KB runs code
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.
- 1mo ago First seen · 130 lines · 182 tokens per session scan A 5c8bc8fcc547
animated-sketch-diagram is a skill published in the GitHub repository iflytek/iFly-Skills (212 stars, last pushed today), licensed Apache-2.0. It adds 182 tokens to every session and 2,578 once invoked, about $0.0007 per session on Opus 5.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
scammer
A scam-message checker that analyzes suspicious texts, images, or conversation descriptions. It can identify the likely stage of a scam and suggest what the sender may try next.
web-design-engineer
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact.…
yida-data-manage-ui
A method for improving the appearance and usability of Yida data-management pages, while keeping their data, permissions, queries, and business actions unchanged. Yida is a platform for building business applications.
webflow-mcp:interactions
Create, update, list, and delete Webflow IX3 interactions (GSAP animations) through Webflow MCP. Use when the user wants click/hover/load/scroll/mouse-move animations, interaction timelines, or datainteractionstool / createinteraction payloads.
webflow-mcp:flowkit-naming
Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach. Runs headlessly against a page ID — no Designer connection required, except for the…
skill-creator
A guide for creating or improving an agent skill: a SKILL.md file that gives an AI a repeatable workflow for a specific task. It covers the skill’s name, search keywords, instructions, failure handling, and examples where needed.