From claude-blog
Generates dark-mode-compatible inline SVG charts (horizontal bar, grouped bar, donut, line, lollipop, area, radar) for blog posts. Auto-detects HTML/JSX/MDX, enforces accessibility, source attribution, and type diversity. Activates on data visualization requests.
npx claudepluginhub agricidaniel/claude-blog --plugin claude-blogThis skill uses the workspace's default tool permissions.
Generates dark-mode-compatible inline SVG charts for blog posts. Invoked
Guides selection of optimal chart types for data insights and generates reproducible code using matplotlib/seaborn (Python) or Chart.js (JavaScript). Covers anatomy, colors, accessibility, pitfalls.
Generates OpenChart VizSpec JSON for charts, tables, graphs, and sankeys from data. Guides chart selection, encoding rules, and editorial design like colors, typography, and annotations.
Generates Chart.js configurations for charts, diagrams, and visualizations. Activates automatically for visual content tasks like chart creation.
Share bugs, ideas, or general feedback.
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
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)
Select based on the data pattern. Diversity is mandatory - never repeat a type within one post.
| Data Pattern | Best Chart Type |
|---|---|
| Before/after comparison | Grouped bar chart |
| Ranked factors / correlations | Lollipop chart |
| Parts of whole / market share | Donut chart |
| Trend over time | Line chart |
| Percentage improvement | Horizontal bar chart |
| Distribution / range | Area chart |
| Multi-dimensional scoring | Radar chart |
All charts must work on both dark and light backgrounds:
Text elements: fill="currentColor"
Grid lines: stroke="currentColor" opacity="0.08"
Axis lines: stroke="currentColor" opacity="0.3"
Background: transparent (no fill on root SVG)
Subtitle text: fill="currentColor" opacity="0.45"
Source text: fill="currentColor" opacity="0.35"
Label text: fill="currentColor" opacity="0.8"
| Color | Hex | Use Case |
|---|---|---|
| Orange | #f97316 | Primary / highest value |
| Sky Blue | #38bdf8 | Secondary / comparison |
| Purple | #a78bfa | Tertiary / special category |
| Green | #22c55e | Quaternary / positive indicator |
For text inside colored elements: fill="white" with fontWeight="800".
<svg
viewBox="0 0 560 380"
style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
role="img"
aria-label="Chart description with key data point"
>
<title>Chart Title</title>
<desc>Description for screen readers with all key data points and source</desc>
<!-- Chart content -->
<text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
Source: Source Name (Year)
</text>
</svg>
<svg
viewBox="0 0 560 380"
style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
role="img"
aria-label="Chart description"
>
<title>Chart Title</title>
<desc>Description for screen readers</desc>
{/* Chart content */}
<text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
Source: Source Name (Year)
</text>
</svg>
| HTML | JSX |
|---|---|
stroke-width | strokeWidth |
stroke-dasharray | strokeDasharray |
stroke-linecap | strokeLinecap |
text-anchor | textAnchor |
font-size | fontSize |
font-weight | fontWeight |
font-family | fontFamily |
class | className |
style="..." | style={{...}} |
Best for: percentage improvements, single-metric comparisons.
chartHeight / dataCount - gap (gap=8)(value / maxValue) * chartWidthy = chartY + index * (barHeight + gap)Best for: before/after, A vs B comparisons.
Best for: parts of whole, market share.
<path d="M... A... L... A... Z" fill="color" />Best for: trends over time.
stroke="currentColor" opacity="0.08"<circle cx=... cy=... r="4" fill="color" /><polyline points="..." fill="none" stroke="color" strokeWidth="2" />opacity="0.1"Best for: ranked factors, correlations.
stroke="currentColor" opacity="0.15" strokeWidth="1"r="6" with fill colorBest for: distribution, cumulative data.
<path d="M... L... L... Z" fill="color" opacity="0.15" />stroke="color" strokeWidth="2" fill="none"Best for: multi-dimensional scoring (5-7 axes).
fill="color" opacity="0.2" stroke="color"Wrap every chart in a <figure> element:
HTML:
<figure>
<svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-label="[description]">
<title>[Chart Title]</title>
<desc>[Full description with data points for screen readers]</desc>
<!-- chart content -->
<text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
Source: [Source Name] ([Year])
</text>
</svg>
</figure>
MDX:
<figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}>
<svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-label="[description]">
<title>[Chart Title]</title>
<desc>[Full description]</desc>
{/* chart content with camelCase attributes */}
<text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
Source: [Source Name] ([Year])
</text>
</svg>
</figure>
currentColor)role="img" and aria-label present on <svg><title> and <desc> present inside <svg>0 0 560 380 (standard) or justified alternative