What does this skill do, and when should you use it?
Blog Chart is an internal skill in the claude-blog suite for creating inline SVG data visualizations in blog posts. It supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts, with HTML and JSX/MDX output rules. The skill enforces transparent backgrounds, accessible markup, source attribution, and an approved color palette. It fits editorial workflows that need comparable metrics, trends, or distributions visualized, but it is not a standalone user-facing command.
Accepts a chart request containing a type, title, data, source, and target platform; selects a chart according to the data pattern and avoids repeating a chart type within one post. It produces an inline SVG wrapped in a <figure>, converts attributes for HTML or JSX/MDX, uses currentColor for theme compatibility, and adds role="img", aria-label, <title>, <desc>, source text, and a transparent root background.
- A blog writer has three or more comparable metrics and needs an embeddable SVG visualization.
- A marketing team needs market-share, trend, distribution, or before-and-after charts that work across light and dark themes.
- An MDX publisher needs chart markup with camelCase JSX attributes.
- An editorial workflow has identified chart-worthy data and wants accessible output with source attribution.
How do you install this skill?
- The caller must correctly calculate coordinates, arcs, and scaling; handling for empty data, negative values, long labels, duplicate categories, and extreme values is unspecified.
- Displaying a source label is not source verification; callers must confirm that values match the original source before visualization.
- Compatibility with target blog frameworks, Chinese fonts, narrow screens, and screen readers is specified only declaratively, not demonstrated.
- Repository-level test and delivery-contract claims cover the broader suite and should not be treated as independent validation of blog-chart.
Install it as part of the public claude-blog collection. With Claude Code 1.0.33+, run /plugin marketplace add AgriciDaniel/claude-blog, then /plugin install claude-blog@agricidaniel-claude-blog. The source does not document a standalone installation procedure for skills/blog-chart/SKILL.md.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/AgriciDaniel/claude-blog.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/blog-chart" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
It is not a standalone user command. blog-write and blog-rewrite normally invoke it internally when chart-worthy data is identified. A chart request contains Type, Title, Data, Source, and Platform (html or mdx). Provide the data through the parent blog-writing or rewriting workflow and request a blog chart; the source documents no direct blog-chart command.
What are this skill's strengths and limitations?
- Covers seven explicit chart types for comparisons, trends, proportions, distributions, and multidimensional scores.
- Produces transparent SVGs designed for both dark and light backgrounds, with source attribution and defined colors.
- Requires accessibility metadata including `role="img"`, `aria-label`, `<title>`, and `<desc>`.
- Documents both HTML and JSX/MDX output, including required attribute conversion.
- It is marked `user-invokable: false` and cannot be run as an independent user command.
- The source describes construction rules and a checklist but provides no standalone runtime or test-suite documentation.
- The caller must supply the data and source; the skill does not research or verify the underlying claims.
- The skill requires chart-type diversity within a post, but does not document how cross-post type state is tracked.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Blog Chart SVG Generator this page | 51 · Use with care | ★ 2.4k | 14d ago | MIT |
| D3.js Visualization Skill | 60 · Recommended | ★ 243 | 1y ago | — |
| Lieflat Charts | 57 · Use with care | ★ 6.1k | 1mo ago | NOASSERTION |
| OfficeCLI Data Dashboard Skill | 57 · Use with care | ★ 32k | 15d ago | Apache-2.0 |
| BigQuery BigFrames Development Standards ✓ Google · Official | 50 · Use with care | ★ 21k | 14d ago | Apache-2.0 |
Compared with asking Claude or ChatGPT directly for a chart, it supplies fixed seven-type selection rules, HTML/MDX formatting guidance, accessibility metadata, source attribution, and theme-safe styling. Compared with building an SVG workflow yourself, it reduces manual chart-structure and attribute-conversion work, but the source does not show independent data validation or rendering tests.
How did FollowSkills review this skill?
The skill only generates inline SVG and requires transparent backgrounds, accessibility metadata, and source attribution; no credential handling, external writes, or covert data flow is shown, so no red-line risk is evident. Points are deducted because it lacks permission boundaries, user confirmation, rollback, and sensitive-data guidance, while attribution is a formatting requirement rather than source-authenticity verification.
Inputs, HTML/MDX shells, JSX conversion, seven chart procedures, and a quality checklist are reasonably specified, but abnormal-input handling and failure feedback are largely absent. The static material provides no chart-specific scripts, tests, or reproducible outputs, so the score remains conservative under the static ceiling.
The audience scenario, trigger phrases, input fields, chart-selection rules, and HTML/MDX environments are described. Points are deducted because the skill is marked non-user-invokable and does not define non-fit boundaries, data-size limits, Chinese-label handling, or renderer compatibility.
The documentation is well organized across inputs, rules, examples, output formats, and verification checks; repository context shows MIT licensing, versioning, CI, and maintenance signals. Points are deducted because the selected skill itself lacks versioning, changelog linkage, named maintenance responsibility, dependency/install notes, FAQs, and known limitations.
Each of the seven chart types has actionable construction guidance, with required figure wrappers, accessibility, attribution, and platform-specific formatting intended to produce directly embeddable SVG. Static review cannot confirm geometry calculations, long-label behavior, empty data, extreme values, or actual rendering; comparative benefits are also largely asserted, so the score stays at the static maximum.
The skill provides explicit formatting rules and a return checklist that support manual auditing. It lacks chart-specific tests, committed representative outputs, rendering screenshots, or independent review. Repository-level CI and tests do not establish key behavior for this selected path, so evidence remains limited.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →