这个 Skill 能做什么，适合哪些场景？
Blog Chart 是 claude-blog 集合中的内部技能，专为博客文章生成内嵌 SVG 数据可视化。它支持横向条形图、分组条形图、环形图、折线图、棒棒糖图、面积图和雷达图，并能输出 HTML 或 JSX/MDX 格式。技能强制使用透明背景、可访问性标记、来源署名和限定配色。它适合需要将可比较指标、趋势或分布数据转化为博客图表的内容工作流，但不是独立的用户命令。
接收图表类型、标题、数据、来源和目标平台等图表请求；根据数据模式选择图表类型，并在同一篇文章中避免重复图表类型。它生成包裹在 <figure> 中的内嵌 SVG，自动适配 HTML 或 JSX/MDX 属性格式，使用 currentColor 适配明暗背景，并加入 role="img"、aria-label、<title>、<desc>、来源文字和透明根背景。
- 内容作者在博客中有三项或更多可比较指标，需要把数据转成可嵌入的 SVG 图表。
- 营销团队需要在明暗主题网站中展示市场份额、趋势或前后对比数据。
- MDX 博客维护者需要获得使用 camelCase 属性的 JSX 图表标记。
- 编辑工作流识别出适合可视化的数据点，并希望自动生成带来源和屏幕阅读器描述的图表。
如何安装这个 Skill？
- 该技能依赖调用方正确计算坐标、弧线和缩放；空数据、负值、超长标签、重复类别和极端数值没有处理规范。
- 来源署名不等于来源核验；调用方仍需确认数据与原始来源一致，并避免把未经验证的数据直接可视化。
- 没有说明 SVG 在目标博客框架、中文字体、窄屏和屏幕阅读器中的实际渲染兼容性。
- 仓库宣传的测试和交付合同主要针对整体套件，不能视为 blog-chart 已被独立测试。
该技能随 claude-blog 公共集合安装。Claude Code 1.0.33+ 可执行：/plugin marketplace add AgriciDaniel/claude-blog，然后执行 /plugin install claude-blog@agricidaniel-claude-blog。源码没有说明单独安装 skills/blog-chart/SKILL.md 的步骤。
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/AgriciDaniel/claude-blog.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/blog-chart" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
它不是独立的用户命令，通常由 blog-write 或 blog-rewrite 在识别出适合图表的数据后内部调用。图表请求包含 Type、Title、Data、Source 和 Platform（html 或 mdx）等字段。可在父级博客写作或重写流程中提供数据，并要求生成博客图表；源码未提供独立的 blog-chart 调用命令。
这个 Skill 有哪些优点和局限？
- 支持七种明确的数据图表类型，覆盖比较、趋势、占比、分布和多维评分等模式。
- 输出兼容明暗主题的透明 SVG，并使用 `currentColor`、标准配色和来源署名。
- 内置可访问性要求，包括 `role="img"`、`aria-label`、`<title>` 和 `<desc>`。
- 同时提供 HTML 与 JSX/MDX 输出规则，并检查 MDX 属性命名。
- 技能标记为 `user-invokable: false`，不能作为独立用户命令直接运行。
- 源码只描述图表生成规则和校验清单，没有提供独立安装、运行时或测试套件说明。
- 图表数据、来源和数值必须由调用方提供；技能本身不负责研究或验证数据。
- 必须避免同一篇文章重复图表类型，但具体的跨文章类型状态管理没有说明。
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| Blog Chart SVG 图表生成器 本页 | 51 · 谨慎使用 | ★ 2.4k | 14 天前 | MIT |
| D3.js 数据可视化技能 | 60 · 推荐 | ★ 243 | 1 年前 | — |
| Lieflat Charts 图表品味法典 | 57 · 谨慎使用 | ★ 6.1k | 1 个月前 | NOASSERTION |
| OfficeCLI 数据仪表盘技能 | 57 · 谨慎使用 | ★ 32k | 15 天前 | Apache-2.0 |
| BigQuery BigFrames 开发规范 ✓ Google · 官方 | 50 · 谨慎使用 | ★ 21k | 13 天前 | Apache-2.0 |
与直接提示 Claude 或 ChatGPT 生成图表相比，它提供了固定的七类图表选择规则、HTML/MDX 输出格式、可访问性标记、来源署名和明暗主题样式约束。与自行构建 SVG 图表流程相比，它减少了图表结构和属性转换的手工工作，但源码没有显示独立的数据验证或渲染测试能力。
FollowSkills 如何评估这个 Skill？
技能仅生成内联 SVG，要求透明背景、可访问性标记和来源署名，未显示凭据处理、外部写入或隐蔽数据流，因此无明显红线风险。扣分在于没有权限边界、用户确认、回滚或敏感数据处理说明，且来源署名只规定格式，未要求验证来源真实性。
输入、HTML/MDX 外壳、属性转换、七类图表步骤和质量清单较完整，异常输入与失败反馈基本未定义。静态材料未提供图表专用脚本、测试或可复现输出，因此按静态上限保守给分。
目标场景、触发词、输入字段、图表选择规则和 HTML/MDX 环境均有说明；但技能标记为不可直接调用，非适用边界、数据规模限制、中文标签处理和不同渲染器兼容性未明确。
文档结构清晰，采用输入、规则、示例、输出和清单的渐进式组织；仓库上下文显示 MIT、版本、CI 和维护信息。扣分在于该技能自身没有版本、变更记录、维护责任、依赖安装说明、FAQ 或已知限制。
七类图表均给出可操作的构造步骤，并规定 figure、可访问性、来源和平台格式，理论上可产生直接嵌入博客的 SVG。静态审查无法确认几何计算、长标签、空数据、极值或实际渲染结果，比较优势也主要是作者声明，故不超过静态上限。
技能包含明确的格式规则和返回前检查项，便于人工审计；但没有图表专用测试、提交的实际样例、渲染截图或第三方复核。仓库级 CI/测试未证明该选定路径的关键图表行为，因此证据有限。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →