blog-chart

Blog Chart is a built-in data-visualization skill that generates dark-mode-compatible inline SVG charts for blog posts. It solves the problem of embedding accessible, theme-aware charts directly into articles without external charting libraries, automatically detecting the target platform (HTML versus JSX/MDX) and emitting the correct attribute style for each. It is invoked internally by the blog-write and blog-rewrite skills when chart-worthy data is identified, and is not a standalone user-facing command.

The skill supports seven chart types — horizontal bar, grouped bar, donut, line, lollipop, area, and radar — with a data-pattern-to-chart-type selection table and a diversity rule that avoids repeating types within a post. It enforces strict styling: transparent backgrounds, currentColor-based text and grid lines so charts work on both light and dark themes, a defined four-color palette, an accessible muted-text token, and a rule against relying on color alone (requiring direct labels, patterns, or legends for colorblind readers). Accessibility markup is mandatory (role=img, aria-labelledby with title and description elements), as is visible source attribution. It provides SVG shells for both HTML and JSX/MDX, a full HTML-to-JSX attribute conversion table, and step-by-step construction recipes for each chart type. A deterministic Python CLI (generate_chart_svg.py) is preferred for supported types.

It targets content and technical writers producing SEO- and accessibility-conscious blog posts, and the agents that orchestrate that writing, who need consistent, standards-compliant inline charts.