skills.rest
mohamednegm0
mohamednegm0COMMUNITY
Explore all skills by this author →
GitHub

blog-chart

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

Updated Apr 6, 2026
Search Tags:#accessibility#svg#mdx#blog#dark-mode#data-visualization#chart-generation
One-click install
npx skills add https://github.com/mohamednegm0/Musahm-Vault-GTM --skill blog-chart-mohamednegm0
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blog-chart
Source: https://github.com/mohamednegm0/Musahm-Vault-GTM/tree/main/.claude/skills/claude-blog/skills/blog-chart
Command: npx skills add https://github.com/mohamednegm0/Musahm-Vault-GTM --skill blog-chart-mohamednegm0

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Blog authors and content teams often need lightweight, accessible, and dark-mode-compatible charts that embed directly into HTML or MDX without relying on external image assets or complex charting libraries. This Skill produces inline SVG charts that preserve accessibility, platform compatibility, and design consistency while avoiding hardcoded colors or non-transparent backgrounds.

Core Features & Use Cases

  • Generates multiple chart types (horizontal bar, grouped bar, donut, line, lollipop, area, radar) and enforces diversity so a single post does not repeat the same chart type.
  • Automatically detects target platform (HTML vs MDX/JSX) and converts attributes to camelCase for MDX, applies the approved color palette, and ensures all text uses currentColor for dark-mode fidelity.
  • Produces accessible markup with role=img, aria-label, title, desc, and source attribution text; includes precise layout rules (viewBox, radii, grid opacity) and a quality checklist to validate output.
  • Use Cases: embed trend lines in a product blog post, render market-share donuts inside MDX documentation, or produce A/B before/after grouped bars for a case study.

Quick Start

Generate a horizontal bar SVG chart titled "AI Citation Sources by Platform" with ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, and Reddit 7.15% with source Ahrefs (December 2025) and return MDX-compatible JSX including title, desc, role=img, and bottom source attribution.

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 dark-mode SVG charts for MDX blog posts?▼

Generate accessible dark-mode inline SVG charts by applying currentColor text, transparent backgrounds, role=img with title and desc, and MDX camelCase attribute conversion. The output enforces chart-type diversity and includes source attribution for blog posts.

How do I embed accessible inline SVG charts into HTML or MDX without external libraries?▼

Embed accessible inline SVG charts by generating markup with role=img, aria-label, title, and desc tags. The process detects HTML versus MDX platforms, converts attributes to camelCase for MDX, and applies currentColor for dark-mode fidelity without external libraries.

Can I use the same chart type multiple times in a single blog post?▼

You cannot repeat the same chart type in a single post because the generation process enforces chart-type diversity. Available types include horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts to ensure visual variety across comparable metrics.

What are the accessibility requirements for SVG data visualization in blog content?▼

Accessibility requirements for SVG data visualization include using currentColor for text, transparent backgrounds, role=img with title and desc elements, and aria-labels. Charts must include source attribution text and pass a quality checklist validating layout rules.

When should I use inline SVG charts instead of external image assets for blog visualization?▼

Use inline SVG charts instead of external image assets when embedding trend lines, market-share donuts, or before/after comparisons into MDX or HTML blogs. Inline SVGs preserve platform compatibility, dark-mode fidelity, and design consistency without complex charting libraries.

Related Skills

Explore More Content & Communication Skills→
captaindevvcaptaindevv

blog-chart

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

Community
Advanced
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
bykoleksii-hardobykoleksii-hardo

blog-chart

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

Community
Intermediate