share-heatmap-defaults

share-heatmap-defaults is a skill for Codex from tranfu-labs/tranfu-skills. It costs 368 tokens per session (4,033 once invoked), scanned A, original, MIT.

A chart-design guide helps choose the right kind of heatmap for data about shares, proportions, or distributions. A treemap uses differently sized rectangles to show relative amounts, while a traditional heatmap uses fixed cells and color depth.

In plain words
What is it for?
Use it when designing heatmaps or treemaps, choosing controls for cumulative or time-based views, and comparing values across items with very different scales.
Why use it?
It prevents charts from implying the wrong meaning through area or color and handles different time ranges and missing data more clearly.

Skill for Codex

Written for Codex: agents/openai.yaml present.

Good fit Use it when designing heatmaps or treemaps, choosing controls for cumulative or time-based views, and comparing values across items with very different scales.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/tranfu-labs/tranfu-skills/share-heatmap-defaults
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 tranfu-labs/tranfu-skills --skill share-heatmap-defaults
Clone the repo
git clone --depth 1 https://github.com/tranfu-labs/tranfu-skills

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 share-heatmap-defaults

README.md
[![agentmods](https://agentmods.dev/badge/skills/tranfu-labs/tranfu-skills/share-heatmap-defaults/github.svg)](https://agentmods.dev/skills/tranfu-labs/tranfu-skills/share-heatmap-defaults)
Your own site
<a href="https://agentmods.dev/skills/tranfu-labs/tranfu-skills/share-heatmap-defaults"><img src="https://agentmods.dev/badge/skills/tranfu-labs/tranfu-skills/share-heatmap-defaults/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 share-heatmap-defaults

Your own site · 80×15
<a href="https://agentmods.dev/skills/tranfu-labs/tranfu-skills/share-heatmap-defaults"><img src="https://agentmods.dev/badge/skills/tranfu-labs/tranfu-skills/share-heatmap-defaults.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 368 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,033 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. 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.00368 $0.04033
Opus 5 $0.00184 $0.02017
Sonnet 5 $0.00074 $0.00807
Haiku 4.5 $0.00037 $0.00403

Measured 11d ago against content hash 46a0c415258d, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

share-heatmap-defaults scanned grade A with 1 finding 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.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

- **默认工具**:Treemap 优先用 Apache ECharts 的 `series.type: 'treemap'`,不要自己手写 squarify 布局——自己写的布局算法很容易漏掉"面积够大但形状被拉成细长条"这类边界情况。Artifact 之类有 CSP 限制、不能挂外部 CDN 的环境,把 echarts.min.js 整份源码下载下来内联进 HTML 里(体积大约 1MB,用 `curl` 下载后拼进 `<scri
own-skills/share-heatmap-defaults/SKILL.md · 121 lines

How it starts

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

占比热力图默认判断

触发条件

  • 用户要求为某个领域/数据集做"热力图"。
  • 描述里同时出现占比/分布/份额/谁大谁小/谁占多少这类语义词(或明显在问"谁占大头""各项各占多少")。

不触发(Do NOT trigger)

  • 描述里没有占比/份额语义,格子大小本身没有业务含义——比如"每天一个格子、颜色代表当天活跃度"的日历热力图,或行列交叉格子代表相关性的相关矩阵热力图。这类场景格子大小不该跟着数值变化,维持传统色块深浅热力图才是对的。
  • 用户是在柱状图/饼图/折线图等完全不同的图表类型之间做初选,不是"热力图内部该怎么编码"的问题。
  • 用户要的是 Treemap 具体怎么实现(布局算法、坐标计算、CSS 写法、验证脚本)——这些不属于本判断范围,交给模型按经验正常处理。

工作流

  1. 检查描述里有没有占比/分布/份额语义词。没有 → 不适用本 skill,按常规热力图(颜色深浅、格子大小固定)处理。
  2. 有的话,问自己一句:这些格子/方块的"大小"本身有没有业务含义?
    • 有(大小本身代表占比/份额)→ 默认选 Treemap:方块面积按数值真实比例切割,颜色只能做辅助维度,NEVER 用颜色代替面积表达占比大小。
    • 没有 → MUST 维持传统色块深浅热力图,NEVER 不分青红皂白都套用 Treemap。
    • 拿不准(信号模糊、两种解读都说得通)→ 跳转到下方「失败路径」,直接问用户澄清,不要凭第一直觉选一个。
  3. 如果同一份数据横跨多个统计口径(比如累计、近 24 小时、近 1 周、近 1 月、近 1 年),NEVER 把"面积用口径 A、颜色用口径 B"当默认设计——这是同一类盲区的变体,看起来信息更丰富,实际会让人分不清两种视觉编码分别代表什么。默认做法是加一组切换控件(Tab/下拉都可以),切换时让面积和颜色同时按被选中的那一个口径重新计算。
  4. 【容易漏想】如果用户要求的多个口径里,某个口径在参与比较的实体上覆盖率明显偏低(比如只有一半项目查得到这项数据),NEVER 为了让几个切换按钮"看起来对等"就编造缺失数值,也不要放任大片格子因为没有数值而空着/消失——两种处理在读者眼里都像是图表渲染出了 bug,而不是"这个口径本来就没数据"。正确做法:把这个口径整个从切换控件里拿掉,换成图表之外的一段说明或一张小表格,并写清楚为什么没做成 Treemap(数据源覆盖不到、口径不可比等)。这一步很容易漏想,因为"三个口径都做成对称的切换按钮"看起来是更工整的默认设计,但工整不能建立在编数据或留空洞之上。
  5. 【容易漏想】如果参与比较的实体天然分属体量差异悬殊的不同类别(比如把"巨头级别的项目"和"某个巨头旗下的子项目/衍生品"放进同一张图比总量,巨头所在类别会把其他类别的所有项目一起挤成看不清的碎屑),NEVER 指望"把小项目折进一个「其他」聚合块"就能解决——那能救的是"类别内部的长尾",救不了"类别之间的量级差"。默认应该按类别拆成多张独立的小 Treemap,每张只在类别内部计算占比,类别与类别之间不做面积可比(跨类别的体量对比通常也不是用户真正想看的信息)。
  6. 产出后自检一句话:只看方块的面积大小,能不能看出谁占比更高? 如果答案是"看不出来,得看颜色深浅才能判断",说明编码方式选错了,回到第 2 步重新判断。

完成以上步骤后,产出一个明确的编码判断结论(Treemap / 传统网格;是否需要口径切换控件;是否需要按类别拆图),带着这个结论再开始动手实现,不要先做一版凭直觉的默认实现,等用户来纠正。

失败路径

  • 如果占比语义信号模糊(比如只说"做个热力图看看各板块表现",不确定"表现"是不是"占比"),不要擅自假设,直接问用户一句"这个热力图是要看各项占整体的比例,还是看每一项自己的强弱/活跃度?"——前者走 Treemap,后者走传统色块网格。
  • 如果触发词是"分布"但语境更像"数值随某个维度怎么疏密变化"(比如"用户年龄分布热力图""访问时段分布热力图"),先确认这是"谁占整体多少份额"还是"数值在某个维度上怎么疏密分布"——前者走 Treemap,后者可能是直方图/密度图,都不归本判断管,需要先问清楚。
  • 如果格子大小的业务含义本身有争议(比如既有"每个分类占比"又有"每个分类自己的活跃度"两种解读),同样问清楚再动手,不要凭第一直觉埋头实现。

Treemap 实现默认用 ECharts,以及几个真踩过的坑

编码判断(选 Treemap)之后,具体怎么落地本来不归本 skill 管,但下面这几条是实际做过程中真正踩过的坑,值得单独记下来——不是"怎么写布局算法"这种通用实现细节,而是"选了 ECharts 之后,它的默认行为会在没人提醒的情况下直接产出一张看起来像渲染出 bug 的图":

Read the full file on GitHub · 121 lines

Files

What ships with it

5 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.

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. 11d ago First seen · 121 lines · 368 tokens per session scan A 46a0c415258d

Subscribe to this mod's changes

share-heatmap-defaults is a skill published in the GitHub repository tranfu-labs/tranfu-skills (2 stars, last pushed yesterday), licensed MIT. It adds 368 tokens to every session and 4,033 once invoked, about $0.0018 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

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.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

visual-ralph

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ralph with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

Yeachan-Heo/oh-my-codex · 50 tokens

accessibility

Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.

microsoft/hve-core · 47 tokens

make-resume

A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.

Hisn00w/ASu-skills · 86 tokens