skills.rest
AgriciDaniel
AgriciDanielCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

blog-chart

Generate dark-mode-compatible inline SVG charts for blog posts.

1.6k|277|Updated Feb 17, 2026
Search Tags:#svg#chart#mdx#blog#dark-mode#data-visualization
One-click install
npx skills add https://github.com/AgriciDaniel/claude-blog --skill blog-chart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blog-chart
Source: https://github.com/AgriciDaniel/claude-blog/tree/main/skills/blog-chart
Command: npx skills add https://github.com/AgriciDaniel/claude-blog --skill blog-chart

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Bloggers often struggle to add scalable, accessible data visuals to posts without hand-coding SVGs. This Skill generates dark-mode-compatible inline SVG charts directly within blog content, simplifying data storytelling.

Core Features & Use Cases

  • Generates multiple chart types (horizontal bar, grouped bar, donut, line, lollipop, area, radar) as inline SVG.
  • Ensures accessible markup (role="img", aria-label) and transparent backgrounds for web compatibility.
  • Works with HTML and MDX/JSX blog workflows, automatically adapting to dark or light themes.
  • Provides source attribution and easy re-use across posts.

Quick Start

Provide a chart request in your blog-write workflow to generate an inline SVG chart.

Frequently Asked Questions about blog-chart

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

FAQPage Schema
How do I add inline SVG charts to MDX blog posts?▼

This Skill generates dark-mode-compatible inline SVG charts directly within MDX blog posts. You simply provide a chart request in your blog-write workflow to embed accessible data visualizations without hand-coding SVGs.

What types of data visualization charts can I generate for dark mode blogs?▼

You can generate seven types of data visualization charts for dark mode blogs: horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts. All charts use transparent backgrounds and adapted color palettes for web compatibility.

Does the generated SVG chart markup meet accessibility standards?▼

Yes, the generated SVG chart markup meets accessibility standards by enforcing role="img" and aria-label attributes. This ensures screen readers can properly interpret the data visualizations embedded within your blog posts.

Can I use these SVG charts in both light and dark theme workflows?▼

Yes, you can use these SVG charts in both light and dark theme workflows. The generated inline SVGs feature transparent backgrounds and color palettes that automatically adapt to your blog's active theme settings.

What's the best way to ensure source attribution on blog data visualizations?▼

The best way to ensure source attribution on blog data visualizations is to use a generation tool that builds it into the chart output. This Skill provides built-in source attribution directly within the generated SVG markup for easy re-use across posts.

Related Skills

Explore More Content & Communication Skills→
shenxingyshenxingy
8

blog-chart

Generate dark-mode-compatible inline SVG charts for blog content.

Community
Intermediate
tapanshahtapanshah

blog-chart

Generates SVG charts for blogs with dark-mode compatibility and accessibility support.

Community
Intermediate
captaindevvcaptaindevv

blog-chart

Generates inline SVG charts for blog posts with accessibility markup and HTML/JSX-MDX support.

Community
Advanced
mohamednegm0mohamednegm0

blog-chart

Generate accessible dark-mode inline SVG charts for MDX and HTML blog posts.

Community
Advanced