Skip to content
appsgit

Blog Chart

Blog Chart is an agent skill (a SKILL.md file) from AgriciDaniel/claude-blog. Generate dark-mode-compatible inline SVG data visualization charts for blog posts. It works with Claude Code and has 2,335 GitHub stars across a repository of 3 listed skills. Install it by copying the skill folder into your agent's skills directory.

github.com/AgriciDaniel/claude-blog/skills/blog-chart (opens in a new tab)

View on GitHub (opens in a new tab)

Add this skill

Claude

This repository is a Claude Code plugin marketplace. In Claude Code:

/plugin marketplace add AgriciDaniel/claude-blog
/plugin install claude-blog@agricidaniel-blog

In the Claude apps, zip the blog-chart folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

ChatGPT / Codex

Codex reads skills from .agents/skills/ in a repo or ~/.agents/skills/ for every project:

git clone --depth 1 https://github.com/AgriciDaniel/claude-blog.git
cp -r claude-blog/skills/blog-chart .agents/skills/blog-chart   # repo; ~/.agents/skills for all projects

Standalone skills also load in the ChatGPT desktop app.

Cursor

Cursor loads skills from .cursor/skills/ (or ~/.cursor/skills/) and also reads .claude/skills/:

git clone --depth 1 https://github.com/AgriciDaniel/claude-blog.git
cp -r claude-blog/skills/blog-chart .cursor/skills/blog-chart   # project; ~/.cursor/skills for all projects

Source (checked Oct 7, 2026): code.claude.com/docs/en/skills (opens in a new tab), code.claude.com/docs/en/plugin-marketplaces (opens in a new tab), support.claude.com/en/articles/12512180-using-skills-in-claude (opens in a new tab), learn.chatgpt.com/docs/build-skills (opens in a new tab), cursor.com/docs/context/skills (opens in a new tab)

What this skill does

Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", or "visualize data".

When it triggers

  • Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", or "visualize data".
  • "blog chart"
  • "generate chart"
  • "data visualization"
  • "svg chart"
  • "blog graph"
  • "visualize data"

More skills in AgriciDaniel/claude-blog

3 skills are listed from this repository.

Similar skills

More docs & writing skills

All Docs & writing

FAQ

Blog Chart FAQ

Still curious? Email info@appsgit.com.

What is the Blog Chart skill?

Blog Chart is an agent skill (a SKILL.md file) from AgriciDaniel/claude-blog. Generate dark-mode-compatible inline SVG data visualization charts for blog posts. It works with Claude Code and has 2,335 GitHub stars across a repository of 3 listed skills. Install it by copying the skill folder into your agent's skills directory. Its SKILL.md lives at github.com/AgriciDaniel/claude-blog/skills/blog-chart.

How do I install the Blog Chart skill?

In Claude Code, run /plugin marketplace add AgriciDaniel/claude-blog and then /plugin install claude-blog@agricidaniel-blog. For Codex or Cursor, copy the blog-chart folder into .agents/skills/ or .cursor/skills/.

Is the Blog Chart skill free?

Yes. The repository is open source under the MIT license.

Is Blog Chart maintained?

The repository's most recent commit was on Sep 11, 2026. Its latest release is v2.2.0. appsgit only lists skills from repositories with a commit in the last six months.