Blog Chart
Generate dark-mode-compatible inline SVG data visualization charts for blog posts.
Install
npx skills add AgriciDaniel/claude-blog --skill blog-chart -g -a claude-code -y- Repository
- AgriciDaniel/claude-blog2.6k
- Category
- Design
- Updated
- 6d ago
- License
- MIT
- Context cost
- Mediumabout 2,303 tokens
- Runs scripts
- No, instructions only
What it does
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).
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: skills/blog/references/visual-media.md
For supported chart types, prefer the deterministic CLI:
python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json
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: [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"
