665,000+ skills indexed

Explore all skills by this author →

Verified:Website 𝕏@DXXX1988 GitHub

blog-chart

Generate dark-mode compatible inline SVG charts with ARIA labels.

Updated Aug 23, 2026

Search Tags:#blogging #data visualization #accessibility #chart generation #SVG charts

One-click install

npx skills add https://github.com/dxxx/Bot-OS --skill blog-chart-dxxx

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: blog-chart
Source: https://github.com/dxxx/Bot-OS/tree/main/skills/claude-blog/skills/blog-chart
Command: npx skills add https://github.com/dxxx/Bot-OS --skill blog-chart-dxxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the need for easily embeddable, accessible, and visually engaging data visualization in blog posts, enhancing the presentation of information without the need for additional tools.

Core Features & Use Cases

Dark Mode Compatibility: Generates charts that are compatible with dark mode themes, ensuring readability across platforms.
Chart Types: Supports a variety of chart types including horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts.
Automated Platform Detection: Automatically detects whether to generate HTML or JSX/MDX chart code based on the platform.
Accessible Markup: Ensures charts are accessible with proper ARIA labels and roles.
Source Attribution: Enforces the inclusion of source attribution for charts.
Use Case: For bloggers or content creators who need to visualize data points such as market share, trends, or comparisons within their blog posts.

Quick Start

To generate a horizontal bar chart, use the command 'blog chart horizontal-bar "Revenue by Region" data="East: 40%, West: 30%, South: 20%, North: 10%" source="Company Reports 2025" platform="html"'.

Frequently Asked Questions about blog-chart

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

FAQPage Schema

How do I generate accessible inline SVG charts for my blog posts?▼

To generate accessible inline SVG charts, you provide chart type, data, and source attribution. The output includes proper ARIA labels and roles, ensuring your blog post data visualizations are readable and compliant.

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

You can create dark mode compatible data visualization charts including horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts. These inline SVG charts maintain readability across dark mode blog themes.

Does this tool work with both HTML and MDX platforms for embedding charts?▼

Yes, it works with both HTML and MDX platforms by automatically detecting your environment. It generates the appropriate HTML or JSX/MDX chart code, ensuring your inline SVG data visualizations embed correctly without syntax errors.

How do I add source attribution to an SVG data chart?▼

You add source attribution to an SVG data chart by including the source parameter in your generation command. This enforces the inclusion of data credentials directly within your blog post visualizations.

What is the best way to display market share or trend data in a blog post?▼

The best way to display market share or trend data in a blog post is using inline SVG charts like donut or line charts. They provide visually engaging, dark mode compatible data visualization without needing external tools.

Are there limitations when generating inline SVG charts without external dependencies?▼

Generating inline SVG charts without external dependencies limits you to a defined color palette and specific supported chart types. However, this ensures your blog post visualizations remain lightweight and self-contained.

Related Skills

Explore More Content & Communication Skills→

blog-chart

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

blog-chart

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

blog-chart

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

d3-viz

Create interactive data visualizations with d3.js and SVG.