skills.rest
bykoleksii-hardo
bykoleksii-hardoCOMMUNITY
Explore all skills by this author →
GitHub

blog-chart

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

Updated Apr 25, 2026
Search Tags:#data visualization#blog#blog writing#data embedding#SVG charts
One-click install
npx skills add https://github.com/bykoleksii-hardo/hardo-app --skill blog-chart-bykoleksii-hardo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blog-chart
Source: https://github.com/bykoleksii-hardo/hardo-app/tree/main/.claude/skills/blogskills/blog-chart
Command: npx skills add https://github.com/bykoleksii-hardo/hardo-app --skill blog-chart-bykoleksii-hardo

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the generation of dark-mode-compatible inline SVG data visualization charts for blog posts, saving time and effort in creating visual content.

Core Features & Use Cases

  • SVG Chart Generation: Creates horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts.
  • Platform Detection: Automatically adjusts chart display for HTML vs JSX/MDX platforms.
  • Accessibility: Enforces chart type diversity, accessible markup, and source attribution.
  • Use Case: When you need to visualize data points such as comparison tables or metrics in a blog post and want to embed inline SVG visualizations.

Quick Start

Generate a chart to visualize "AI Citation Sources by Platform" data.

Frequently Asked Questions about blog-chart

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

FAQPage Schema
How do I generate inline SVG charts for a blog post?▼

To generate inline SVG charts for a blog post, provide structured chart data with attributes for title, type, and values. The tool automatically identifies chart-worthy data points and outputs dark-mode-compatible visualizations.

What types of data visualization charts can I create for blog writing?▼

For blog writing, you can create horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts. These inline SVG data visualizations are designed to be dark-mode-compatible.

Does this inline SVG chart generation work with JSX and MDX platforms?▼

Yes, inline SVG chart generation works with JSX and MDX platforms. The tool features automatic platform detection to adjust chart display formatting appropriately for either HTML or JSX/MDX environments.

Do I need to format my blog data a specific way to embed SVG charts?▼

Yes, you need to format your blog data in a structured format with specific attributes for title, type, and values. This structured input is required to automatically generate the inline SVG data visualization charts.

Are the generated SVG data visualizations accessible for blog posts?▼

Yes, the generated SVG data visualizations are accessible for blog posts. The chart generation process enforces chart type diversity, accessible markup, and source attribution within the visual output.

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
oharatooharato

building-streamlit-dashboards

Create interactive Streamlit dashboards with metrics, charts, and sidebar filters.

Community
Intermediate
coopersimson96coopersimson96
12

blog-chart

Generate inline SVG bar, donut, line, radar, and area charts for blog posts.

Community
Intermediate