blog-chart

Generate dark-mode-compatible inline SVG charts for HTML or JSX/MDX blog posts.

Updated Apr 10, 2026
One-click install
npx skills add https://github.com/deepakbunkar/claude-blog --skill blog-chart-deepakbunkar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: blog-chart
Source: https://github.com/deepakbunkar/claude-blog/tree/main/skills/blog-chart
Command: npx skills add https://github.com/deepakbunkar/claude-blog --skill blog-chart-deepakbunkar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bloggers and content teams struggle to include attractive, accessible charts in posts without breaking the writing flow.

Core Features & Use Cases

  • Generates dark-mode-compatible inline SVG charts for blog content (horizontal bar, grouped bar, donut, line, lollipop, area, radar).
  • Automatically detects rendering environment (HTML vs JSX/MDX) and ensures accessible markup (role=img, aria-label) and source attribution.
  • Provides a styling baseline and a straightforward workflow to include charts in posts with minimal friction.

Quick Start

Write a chart request specifying the chart type, title, data points, and target platform to render an inline SVG chart in your post.

Frequently Asked Questions about blog-chart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create accessible SVG charts for a blog post?

Generate accessible inline SVG charts for blog posts by specifying the chart type, title, and metrics to automatically produce markup with role=img and aria-label attributes.

What is the best way to add dark-mode compatible data visualizations to MDX?

The best way to add dark-mode data visualizations to MDX is generating inline SVG charts with transparent backgrounds that automatically detect and adapt to the JSX/MDX rendering environment.

Can I generate different chart types like donut and radar charts for HTML content?

Yes, you can generate diverse HTML chart types including donut, radar, horizontal bar, grouped bar, line, lollipop, and area charts with transparent backgrounds.

Does this approach work with both HTML and JSX rendering platforms?

Yes, the chart generation workflow automatically detects HTML and JSX/MDX rendering platforms to ensure proper accessible markup and source attribution within the output.

When do I need inline SVG charts for my blog content?

You need inline SVG charts when your content workflow identifies chart-worthy data, specifically 3 or more metrics, trends, or before/after comparisons requiring visual representation within posts.