Blog Chart SVG 图表生成器
为博客生成兼容明暗主题的内嵌 SVG 数据图表。
技能仅生成内联 SVG,要求透明背景、可访问性标记和来源署名,未显示凭据处理、外部写入或隐蔽数据流,因此无明显红线风险。扣分在于没有权限边界、用户确认、回滚或敏感数据处理说明,且来源署名只规定格式,未要求验证来源真实性。
输入、HTML/MDX 外壳、属性转换、七类图表步骤和质量清单较完整,异常输入与失败反馈基本未定义。静态材料未提供图表专用脚本、测试或可复现输出,因此按静态上限保守给分。
目标场景、触发词、输入字段、图表选择规则和 HTML/MDX 环境均有说明;但技能标记为不可直接调用,非适用边界、数据规模限制、中文标签处理和不同渲染器兼容性未明确。
文档结构清晰,采用输入、规则、示例、输出和清单的渐进式组织;仓库上下文显示 MIT、版本、CI 和维护信息。扣分在于该技能自身没有版本、变更记录、维护责任、依赖安装说明、FAQ 或已知限制。
七类图表均给出可操作的构造步骤,并规定 figure、可访问性、来源和平台格式,理论上可产生直接嵌入博客的 SVG。静态审查无法确认几何计算、长标签、空数据、极值或实际渲染结果,比较优势也主要是作者声明,故不超过静态上限。
技能包含明确的格式规则和返回前检查项,便于人工审计;但没有图表专用测试、提交的实际样例、渲染截图或第三方复核。仓库级 CI/测试未证明该选定路径的关键图表行为,因此证据有限。
- 该技能依赖调用方正确计算坐标、弧线和缩放;空数据、负值、超长标签、重复类别和极端数值没有处理规范。
- 来源署名不等于来源核验;调用方仍需确认数据与原始来源一致,并避免把未经验证的数据直接可视化。
- 没有说明 SVG 在目标博客框架、中文字体、窄屏和屏幕阅读器中的实际渲染兼容性。
- 仓库宣传的测试和交付合同主要针对整体套件,不能视为 blog-chart 已被独立测试。
这个 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,并使用 `currentColor`、标准配色和来源署名。
- 内置可访问性要求,包括 `role="img"`、`aria-label`、`<title>` 和 `<desc>`。
- 同时提供 HTML 与 JSX/MDX 输出规则,并检查 MDX 属性命名。
- 技能标记为 `user-invokable: false`,不能作为独立用户命令直接运行。
- 源码只描述图表生成规则和校验清单,没有提供独立安装、运行时或测试套件说明。
- 图表数据、来源和数值必须由调用方提供;技能本身不负责研究或验证数据。
- 必须避免同一篇文章重复图表类型,但具体的跨文章类型状态管理没有说明。
如何安装这个 Skill?
该技能随 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 的步骤。
如何使用这个 Skill?
它不是独立的用户命令,通常由 blog-write 或 blog-rewrite 在识别出适合图表的数据后内部调用。图表请求包含 Type、Title、Data、Source 和 Platform(html 或 mdx)等字段。可在父级博客写作或重写流程中提供数据,并要求生成博客图表;源码未提供独立的 blog-chart 调用命令。
这个 Skill 与同类方案有什么区别?
与直接提示 Claude 或 ChatGPT 生成图表相比,它提供了固定的七类图表选择规则、HTML/MDX 输出格式、可访问性标记、来源署名和明暗主题样式约束。与自行构建 SVG 图表流程相比,它减少了图表结构和属性转换的手工工作,但源码没有显示独立的数据验证或渲染测试能力。