Blog Chart
Generates inline SVG charts for blog posts with proper dark mode support and accessibility markup. Supports seven chart types (horizontal bar, grouped bar, donut, line, lollipop, area, radar) and automatically detects whether you're writing HTML or JSX to format attributes correctly. The skill enforces chart type diversity within a single post and includes mandatory source attribution at the bottom of every chart. All styling uses currentColor and transparent backgrounds so charts work on any theme. Designed to be invoked by blog writing workflows when they spot chart worthy data, not as a standalone command. If you're comparing metrics or showing trends in a blog post, this handles the visualization without you needing to touch D3 or a charting library.
- skills.sh installs
- 2.7K
- GitHub stars
- 2.7K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add agricidaniel/claude-blog --skill blog-chart --agent claude-codeInstalls into .claude/skills of the current project.
Files
Blog Chart: Built-In SVG Data Visualization
Bundled paths below use host Markdown substitution of ${CLAUDE_SKILL_DIR};
it is not an exported shell variable. Resolve them before execution, quote
paths, and refuse nonabsolute overrides. Pass blog_reference_root resolved
from ${CLAUDE_SKILL_DIR}/../blog/references, blog_template_root from
${CLAUDE_SKILL_DIR}/../blog/templates, and needed sibling roots to agents.
Read the main reference orchestration-details.md before loading project
context; pass only its helper-fenced output to downstream agents.
Generates dark-mode-compatible inline SVG charts for blog posts. Invoked
internally by the orchestrator while it runs blog-write and blog-rewrite,
when chart-worthy data is identified and the draft's [CHART: ...] markers are
resolved. The blog-writer and other agents cannot call skills; they only leave
markers. Not a standalone user-facing command.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/agricidaniel/claude-blog
- Categories
- Frontend Development, Documentation, Data Science & ML, Design & UI/UX
- First seen
- Jun 3, 2026
More from agricidaniel/claude-blog
All 30- Blog Write2.7K
- Blog Image2.7K
- Blog Cannibalization2.7K
- Blog Audio2.7K
- Blog Outline2.7K
- Blog Rewrite2.6K
- Blog Repurpose2.6K
- Blog Google2.6K
- Blog Schema2.6K
- Blog Persona2.6K
- Blog Strategy2.6K
- Blog Notebooklm2.6K
- Blog Cluster2.6K
- Blog Multilingual2.6K
- Blog Brand2.6K
- Blog Flow2.6K
- Blog Localize2.5K
- Blog Locale Audit2.5K
- Blog Taxonomy2.5K
- Blog Discourse2.5K
- Blog Translate2.5K
- Blog3K
- Blog Seo Check2.8K
- Blog Factcheck2.7K
Recommended
More Frontend Development
flags-sdkvercel/flagsGuide for feature flags and A/B tests with the Flags SDK (`flags` npm package) and Vercel Flags. Use when: declaring flags with `flag()`, using `vercelAdapter` 2.7Kskills.sh installs
tanstack-virtualtanstack-skills/tanstack-skillsHeadless UI for virtualizing large element lists at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular.2.6Kskills.sh installs
tanstack-queryjezweb/claude-skillsManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infin2.5Kskills.sh installs
aframe-webxrfreshtechbro/claudedesignskillsDeclarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR2.5Kskills.sh installs
md2wechatgeekjourneyx/md2wechat-skillConvert Markdown to WeChat Official Account HTML. Use this whenever the user wants WeChat article formatting, article preview, WeChat draft upload, image genera2.5Kskills.sh installs
e2e-tests-studiomastra-ai/mastraREQUIRED when modifying any file in packages/playground-ui or packages/playground. Triggers on: React component creation/modification/refactoring, UI changes, n2.5Kskills.sh installs