skills.rest
captaindevv
captaindevvCOMMUNITY
Explore all skills by this author →
GitHub

blog-chart

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

Updated Jul 10, 2026
Search Tags:#data visualization#accessibility#charts#svg#dark mode#mdx#blog
One-click install
npx skills add https://github.com/captaindevv/SEO-ajaypipes --skill blog-chart-captaindevv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blog-chart
Source: https://github.com/captaindevv/SEO-ajaypipes/tree/main/skills/blog-chart
Command: npx skills add https://github.com/captaindevv/SEO-ajaypipes --skill blog-chart-captaindevv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Blog posts containing data comparisons, trends, or market share figures need visualizations that render correctly on both dark and light themes, remain accessible to screen readers, and work in both HTML and MDX/JSX environments without external chart libraries. ## Core Features & Use Cases - Seven Chart Types: Generates horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts as inline SVG with enforced type diversity within a single post. - Theme-Safe Styling: Uses currentColor fills, transparent backgrounds, and a fixed four-color palette so charts adapt to dark and light modes automatically. - Platform Detection: Outputs standard HTML attributes or camelCase JSX attributes depending on whether the target is HTML or MDX. - Use Case: A writer drafting a post about AI citation sources passes data (ChatGPT 43.8%, Perplexity 6.6%, etc.) and receives an accessible horizontal bar chart SVG with source attribution, ready to embed in an MDX blog post. ## Quick Start Ask the AI to generate an inline SVG bar chart visualizing your blog post's data points with source attribution for an MDX page.

Frequently Asked Questions about blog-chart

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

FAQPage Schema
How do I create an inline SVG chart for a blog post?▼

Provide the chart type, title, data values, source, and target platform (HTML or MDX). The output is a complete SVG wrapped in a figure element with title, desc, and source attribution text, using a standard 560x380 viewBox.

How do I make SVG charts work in dark mode?▼

Use fill="currentColor" for all text and stroke="currentColor" with low opacity for grid and axis lines, and never set a background fill on the root SVG. This lets the chart inherit the page's text color in both dark and light themes.

Does SVG chart markup differ between HTML and MDX?▼

Yes. MDX requires JSX camelCase attributes such as strokeWidth, textAnchor, fontSize, and className instead of hyphenated HTML attributes, and style values must be JavaScript objects. The skill converts attributes automatically based on the detected platform.

Which chart type should I use for my data?▼

Match the data pattern: grouped bar for before/after comparisons, donut for parts of a whole, line for trends over time, lollipop for ranked factors, horizontal bar for percentage improvements, area for distributions, and radar for multi-dimensional scoring.

What accessibility features should an SVG chart include?▼

Every chart SVG needs role="img", an aria-label describing the chart with key data points, and nested title and desc elements containing the full description and source for screen readers.

Related Skills

Explore More Content & Communication Skills→
diegosanchespereira1diegosanchespereira1

bmad-domain-research

Conduct current domain and industry research from verified web sources.

Community
Advanced
Zero-1016Zero-1016

blog-banner

Generate or assign SVG banner motifs for MDX blog posts.

Community
Advanced
leonardoteodorooleonardoteodoroo

data-storytelling

Transform raw data into persuasive narratives with context, insights, and recommendations.

Community
Intermediate
oakossoakoss
14

data-visualizer

Generate charts and dashboards with Recharts, Chart.js, and D3.js.

Official
Intermediate