Download brain/.raw/sources/claude-blog-skill/skills/blog-chart/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does blog-chart live?
The publisher keeps it at https://github.com/AgriciDaniel/claude-blog.
Which agents can use blog-chart?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.
>
name: blog-chart
description: >
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-labelledby),
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).
user-invokable: false
license: MIT
Blog Chart: Built-In SVG Data Visualization
Generates dark-mode-compatible inline SVG charts for blog posts. Invoked
internally by and when chart-worthy data is
identified. Not a standalone user-facing command.
blog-write
blog-rewrite
Styling source of truth:skills/blog/references/visual-media.md
For supported chart types, prefer the deterministic CLI:
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: [Verified source], [publication date]
- Platform: mdx (or html)
Chart Type Selection
Select based on the data pattern. Prefer chart type diversity, but repeat a
type when comparability or reader comprehension clearly benefits.
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
Styling Rules (Non-Negotiable)
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="var(--chart-muted, currentColor)"
Source text: fill="var(--chart-muted, currentColor)"
Label text: fill="currentColor" opacity="0.8"
Set --chart-muted to an accessible text token in the host theme. If no token
exists, use #4b5563 on light backgrounds and #d1d5db on dark backgrounds.
Do not rely on low-opacity source or subtitle text for visible attribution.
Color Palette
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 approved colored elements: use fill="#111827" with
fontWeight="800". Only use white text after checking the contrast ratio is
at least 4.5:1 against that specific fill color.
Do not rely on color alone. Add direct labels, patterns, line dashes, marker
shapes, or legend text so colorblind readers can distinguish series.
Standard SVG Shell (HTML)
<svg
viewBox="0 0 560 380"
style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
role="img"
aria-labelledby="chart-title chart-desc"
>
<title id="chart-title">Chart Title</title>
<desc id="chart-desc">Description for screen readers with all key data points and source</desc>
<text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)">
Source: Source Name (Year)
</text>
</svg>
No hardcoded text colors except contrast-checked labels inside colored elements
No white/light backgrounds (transparent or none)
Source attribution text present at bottom and semantic <figcaption> present
role="img" and aria-labelledby present on <svg>
<title id> and <desc id> present inside <svg>
Chart type choice supports comprehension and comparability
If MDX: all attributes camelCased (no hyphens in attribute names)
Data values match the source data exactly
Color palette uses only approved colors
ViewBox is 0 0 560 380 (standard) or justified alternative
Labels, shapes, patterns, or line styles provide redundancy beyond color
How do I install blog-chart?
Download brain/.raw/sources/claude-blog-skill/skills/blog-chart/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does blog-chart live?
The publisher keeps it at https://github.com/AgriciDaniel/claude-blog.
Which agents can use blog-chart?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.