blog-chart
自动识别平台并输出可访问的 SVG，便于嵌入不同文章格式。
为博文生成暗色模式友好的内联 SVG 数据可视化图表。
把数据直接画成适合暗色模式的 inline SVG 图表，支持横向柱、分组柱、甜甜圈、折线、点棒、面积和雷达等常见图表，并能自动识别 HTML / JSX / MDX 场景。用在需要把比较数据嵌入博文、保证暗黑主题和无障碍标注的时候。特色是生成可访问的 role/aria 描述、透明背景并带来源署名，能直接复制到文章里用。
▸ 展开 SKILL.md 英文原文
Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-label), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data).
帮我安装这个 skill：https://raw.githubusercontent.com/dxxx/Bot-OS/main/skills/claude-blog/skills/blog-chart/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/dxxx/Bot-OS/main/skills/claude-blog/skills/blog-chart/SKILL.md"# Blog Chart: Built-In SVG Data Visualization Generates dark-mode-compatible inline SVG charts for blog posts. Invoked internally by `blog-write` and `blog-rewrite` when chart-worthy data is identified. Not a standalone user-facing command. **Styling source of truth:** `references/visual-media.md` ## Input Format The writer or researcher passes a chart request: ``` Chart Request: - Type: horizontal bar - Title: "AI Citation Sources by Platform" - Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15% - Source: Ahrefs, December 2025 - Platform: mdx (or html) ``` ## Chart Type Selection Select based on the data pattern. Diversity is mandatory - never repeat a type