数据与分析 svg-chartsdata-visualizationaccessibilitymdxdark-modeblog-content

Blog Chart SVG 图表生成器

为博客生成兼容明暗主题的内嵌 SVG 数据图表。

FollowSkills 评估 · FSRS-2.0
不推荐
51/ 100 五分制 2.6 / 5
信任安全16 / 25 · 3.2/5

技能仅生成内联 SVG,要求透明背景、可访问性标记和来源署名,未显示凭据处理、外部写入或隐蔽数据流,因此无明显红线风险。扣分在于没有权限边界、用户确认、回滚或敏感数据处理说明,且来源署名只规定格式,未要求验证来源真实性。

可靠稳定8 / 20 · 2.0/5

输入、HTML/MDX 外壳、属性转换、七类图表步骤和质量清单较完整,异常输入与失败反馈基本未定义。静态材料未提供图表专用脚本、测试或可复现输出,因此按静态上限保守给分。

适用触发8 / 15 · 2.7/5

目标场景、触发词、输入字段、图表选择规则和 HTML/MDX 环境均有说明;但技能标记为不可直接调用,非适用边界、数据规模限制、中文标签处理和不同渲染器兼容性未明确。

规范维护8 / 15 · 2.7/5

文档结构清晰,采用输入、规则、示例、输出和清单的渐进式组织;仓库上下文显示 MIT、版本、CI 和维护信息。扣分在于该技能自身没有版本、变更记录、维护责任、依赖安装说明、FAQ 或已知限制。

有效结果7 / 15 · 2.3/5

七类图表均给出可操作的构造步骤,并规定 figure、可访问性、来源和平台格式,理论上可产生直接嵌入博客的 SVG。静态审查无法确认几何计算、长标签、空数据、极值或实际渲染结果,比较优势也主要是作者声明,故不超过静态上限。

证据核验4 / 10 · 2.0/5

技能包含明确的格式规则和返回前检查项,便于人工审计;但没有图表专用测试、提交的实际样例、渲染截图或第三方复核。仓库级 CI/测试未证明该选定路径的关键图表行为,因此证据有限。

证据充分度: 评估于 2026年7月20日 审查版本 49842ea9e7b9
使用前请注意
  • 该技能依赖调用方正确计算坐标、弧线和缩放;空数据、负值、超长标签、重复类别和极端数值没有处理规范。
  • 来源署名不等于来源核验;调用方仍需确认数据与原始来源一致,并避免把未经验证的数据直接可视化。
  • 没有说明 SVG 在目标博客框架、中文字体、窄屏和屏幕阅读器中的实际渲染兼容性。
  • 仓库宣传的测试和交付合同主要针对整体套件,不能视为 blog-chart 已被独立测试。
查看完整评分方法 →

这个 Skill 能做什么,适合哪些场景?

Blog Chart 是 claude-blog 集合中的内部技能,专为博客文章生成内嵌 SVG 数据可视化。它支持横向条形图、分组条形图、环形图、折线图、棒棒糖图、面积图和雷达图,并能输出 HTML 或 JSX/MDX 格式。技能强制使用透明背景、可访问性标记、来源署名和限定配色。它适合需要将可比较指标、趋势或分布数据转化为博客图表的内容工作流,但不是独立的用户命令。

接收图表类型、标题、数据、来源和目标平台等图表请求;根据数据模式选择图表类型,并在同一篇文章中避免重复图表类型。它生成包裹在 <figure> 中的内嵌 SVG,自动适配 HTML 或 JSX/MDX 属性格式,使用 currentColor 适配明暗背景,并加入 role="img"aria-label<title><desc>、来源文字和透明根背景。

  1. 内容作者在博客中有三项或更多可比较指标,需要把数据转成可嵌入的 SVG 图表。
  2. 营销团队需要在明暗主题网站中展示市场份额、趋势或前后对比数据。
  3. MDX 博客维护者需要获得使用 camelCase 属性的 JSX 图表标记。
  4. 编辑工作流识别出适合可视化的数据点,并希望自动生成带来源和屏幕阅读器描述的图表。

这个 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-writeblog-rewrite 在识别出适合图表的数据后内部调用。图表请求包含 Type、Title、Data、Source 和 Platform(htmlmdx)等字段。可在父级博客写作或重写流程中提供数据,并要求生成博客图表;源码未提供独立的 blog-chart 调用命令。

这个 Skill 与同类方案有什么区别?

与直接提示 Claude 或 ChatGPT 生成图表相比,它提供了固定的七类图表选择规则、HTML/MDX 输出格式、可访问性标记、来源署名和明暗主题样式约束。与自行构建 SVG 图表流程相比,它减少了图表结构和属性转换的手工工作,但源码没有显示独立的数据验证或渲染测试能力。

常见问题

它能单独使用吗?
不能直接作为用户命令使用。它是内部技能,通常由 `blog-write` 和 `blog-rewrite` 在发现适合可视化的数据时调用。
它需要网络、MCP 或额外软件吗?
给出的 `SKILL.md` 没有声明网络、MCP、Shell 命令或额外依赖;它只描述 SVG 生成和格式化规则。
它会验证图表中的统计数据吗?
不会。调用方需要提供数据和来源;该技能负责按规则生成图表,并要求保留来源署名及准确数据值。

同仓库的其他 Skills

均来自 AgriciDaniel/claude-blog

写作与内容

Blog Writer 博客文章生成技能

从主题或大纲生成兼顾 Google 排名与 AI 引用的完整博客文章。

写作与内容

Blog Locale Audit 多语言内容审计

检查多语言博客的翻译完整性、SEO一致性与 hreflang 配置。

写作与内容

博客风格学习器

从既有文章提炼可复用的作者语气、节奏和词汇基线。

写作与内容

Blog Cluster 内容集群引擎

从一个种子关键词规划并执行基于 SERP 的互联内容集群。

写作与内容

Blog GEO AI 引用审计

审计文章是否容易被 ChatGPT、Perplexity 和 Google AI Overviews 引用。

写作与内容

Blog Analyzer 博客审计器

以统一的 100 分制审计博客质量、SEO、可信度和 AI 引用准备度。

写作与内容

Blog Brand 品牌语境管理

为博客建立可持久复用的品牌定位与写作语境。

写作与内容

Blog Persona:博客品牌声音管理器

用结构化人格规则统一博客写作的语气、可读性与用词。

写作与内容

Blog Translate:SEO 博客翻译技能

将现有博客翻译成适合目标市场发布的多语言 SEO 内容。

写作与内容

Claude Blog 内容引擎

为 Claude Code 提供从研究、写作到审计和多语言发布的完整博客内容工作流。

写作与内容

Blog Schema:博客 JSON-LD 结构化数据生成器

为博客文章生成并校验完整的 JSON-LD 结构化数据。

写作与内容

博客重写优化器

系统化重写现有博客文章,同时提升 Google 搜索表现与 AI 引用可见性。

写作与内容

Blog Brief 内容规划器

为博客文章生成兼顾 Google 排名与 AI 引用的系统化内容简报。

写作与内容

Blog Localize:博客文化本地化技能

将译文博客深度改写为符合目标市场文化、语气与合规语境的本地内容。

写作与内容

Blog Audit 全站博客审计

扫描全站博客健康状况,发现质量、SEO、链接、过时内容与 AI 引用问题。

写作与内容

Blog Outline 博客大纲规划器

用SERP洞察快速生成可执行的博客文章骨架。

写作与内容

多语言博客国际发布器

将博客撰写、翻译、本地化与国际 SEO 资产整合为一次多语言发布流程。

写作与内容

Blog Discourse 公众讨论研究

用近30天公开讨论提炼可引用的内容洞察。

写作与内容

Blog Calendar 编辑日历规划器

把博客主题、更新节奏与分发安排整理成可执行的编辑日历。

设计与前端

Blog Image 博客视觉生成器

通过 Gemini 为博客生成、编辑并优化可发布的视觉素材。

相关 Skills