blog-chartlisted

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).
Infrasity-Labs/dev-gtm-claude-skills · ★ 27 · AI & Automation · score 85

Install: claude install-skill Infrasity-Labs/dev-gtm-claude-skills

# 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 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 | ## 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="currentColor" opacity="0.45" Source text: fill="currentColor" opacit