agricidaniel/blog-chart
skills/blog-chart/SKILL.md
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-label), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data).
$ install --global
skillsauthnpx skillsauth add agricidaniel/claude-blog blog-chartInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 21, 2026, 3:57 AM162.4s1 file scanned
SKILL.md
- name:
- blog-chart
- description:
- >
- user-invokable:
- false
Blog Chart: Built-In SVG Data Visualization
Generates dark-mode-compatible inline SVG charts for blog posts. Invoked
internally by blog-write and blog-rewrite when chart-worthy data is
identified. Not a standalone user-facing command.
Styling source of truth: references/visual-media.md
Input Format
The writer or researcher passes a chart request:
Chart Request:
- Type: horizontal bar
- Title: "AI Citation Sources by Platform"
- Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15%
- Source: Ahrefs, December 2025
- Platform: mdx (or html)
Chart Type Selection
Select based on the data pattern. Diversity is mandatory - never repeat a type within one post.
| Data Pattern | Best Chart Type | |-------------|-----------------| | Before/after comparison | Grouped bar chart | | Ranked factors / correlations | Lollipop chart | | Parts of whole / market share | Donut chart | | Trend over time | Line chart | | Percentage improvement | Horizontal bar chart | | Distribution / range | Area chart | | Multi-dimensional scoring | Radar chart |
Styling Rules (Non-Negotiable)
All charts must work on both dark and light backgrounds:
Text elements: fill="currentColor"
Grid lines: stroke="currentColor" opacity="0.08"
Axis lines: stroke="currentColor" opacity="0.3"
Background: transparent (no fill on root SVG)
Subtitle text: fill="currentColor" opacity="0.45"
Source text: fill="currentColor" opacity="0.35"
Label text: fill="currentColor" opacity="0.8"
Color Palette
| Color | Hex | Use Case |
|-------|-----|----------|
| Orange | #f97316 | Primary / highest value |
| Sky Blue | #38bdf8 | Secondary / comparison |
| Purple | #a78bfa | Tertiary / special category |
| Green | #22c55e | Quaternary / positive indicator |
For text inside colored elements: fill="white" with fontWeight="800".
Standard SVG Shell (HTML)
<svg
viewBox="0 0 560 380"
style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
role="img"
aria-label="Chart description with key data point"
>
<title>Chart Title</title>
<desc>Description for screen readers with all key data points and source</desc>
<!-- Chart content -->
<text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
Source: Source Name (Year)
</text>
</svg>
JSX/MDX Shell (camelCase attributes)
<svg
viewBox="0 0 560 380"
style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
role="img"
aria-label="Chart description"
>
<title>Chart Title</title>
<desc>Description for screen readers</desc>
{/* Chart content */}
<text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
Source: Source Name (Year)
</text>
</svg>
JSX Attribute Conversion (Required for MDX)
| HTML | JSX |
|------|-----|
| stroke-width | strokeWidth |
| stroke-dasharray | strokeDasharray |
| stroke-linecap | strokeLinecap |
| text-anchor | textAnchor |
| font-size | fontSize |
| font-weight | fontWeight |
| font-family | fontFamily |
| class | className |
| style="..." | style={{...}} |
Chart Type Construction
Horizontal Bar Chart
Best for: percentage improvements, single-metric comparisons.
- Define chart area: x=80, y=40, width=440, height=280
- Calculate bar height:
chartHeight / dataCount - gap(gap=8) - Calculate bar width:
(value / maxValue) * chartWidth - Position bars:
y = chartY + index * (barHeight + gap) - Label on left (right-aligned at x=75): category name
- Value label at end of bar: percentage or number
- Source text at bottom center
Grouped Bar Chart
Best for: before/after, A vs B comparisons.
- Define groups along Y axis, bars within each group
- Use 2 colors (primary + secondary) for the two series
- Add legend at top: colored square + label for each series
- Gap between groups > gap within groups
Donut Chart
Best for: parts of whole, market share.
- Center: cx=280, cy=180, outer radius=140, inner radius=80
- Calculate arc segments using cumulative angles
- Each segment:
<path d="M... A... L... A... Z" fill="color" /> - Center text: total or key label
- Legend below chart with color squares + labels + values
Line Chart
Best for: trends over time.
- X axis: time periods, evenly spaced
- Y axis: value range with 4-5 grid lines
- Draw grid lines:
stroke="currentColor" opacity="0.08" - Plot data points:
<circle cx=... cy=... r="4" fill="color" /> - Connect with:
<polyline points="..." fill="none" stroke="color" strokeWidth="2" /> - Optional: area fill below line with
opacity="0.1"
Lollipop Chart
Best for: ranked factors, correlations.
- Horizontal orientation (like bar chart but with circles)
- Thin line from axis to data point:
stroke="currentColor" opacity="0.15" strokeWidth="1" - Circle at data point:
r="6"with fill color - Value label next to circle
- Categories on Y axis (left-aligned)
Area Chart
Best for: distribution, cumulative data.
- Same as line chart but with filled area below
- Area fill:
<path d="M... L... L... Z" fill="color" opacity="0.15" /> - Line on top:
stroke="color" strokeWidth="2" fill="none" - Grid lines behind the area
Radar Chart
Best for: multi-dimensional scoring (5-7 axes).
- Center: cx=280, cy=190
- Draw concentric polygons for grid (3-4 levels)
- Calculate axis endpoints at equal angles
- Plot data points on each axis proportional to value
- Connect data points with filled polygon:
fill="color" opacity="0.2" stroke="color" - Label each axis at the outer edge
Output Format
Wrap every chart in a <figure> element:
HTML:
<figure>
<svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-label="[description]">
<title>[Chart Title]</title>
<desc>[Full description with data points for screen readers]</desc>
<!-- chart content -->
<text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
Source: [Source Name] ([Year])
</text>
</svg>
</figure>
MDX:
<figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}>
<svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-label="[description]">
<title>[Chart Title]</title>
<desc>[Full description]</desc>
{/* chart content with camelCase attributes */}
<text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
Source: [Source Name] ([Year])
</text>
</svg>
</figure>
Quality Checklist (Verify Before Returning)
- [ ] No hardcoded text colors (all use
currentColor) - [ ] No white/light backgrounds (transparent or none)
- [ ] Source attribution text present at bottom
- [ ]
role="img"andaria-labelpresent on<svg> - [ ]
<title>and<desc>present inside<svg> - [ ] Chart type not already used in this post
- [ ] If MDX: all attributes camelCased (no hyphens in attribute names)
- [ ] Data values match the source data exactly
- [ ] Color palette uses only approved colors
- [ ] ViewBox is
0 0 560 380(standard) or justified alternative
Related Skills
agricidaniel/blog-discourse
development
VerifiedTrustedCommunity
Research what people are actually saying about a topic in the last 30 days across Reddit, X / Twitter, YouTube, Hacker News, dev.to, Medium, and other public discourse platforms. API-free; uses WebSearch with platform-targeted site operators plus recency filters. Produces DISCOURSE.md (a structured brief) and JSON output the writer can consume. Complements blog-researcher (which focuses on authority sources) with a recency-and-engagement lens. Use when user says "blog discourse", "discourse research", "what are people saying about", "research what people are saying", "voice of customer", "social listening", "30-day research", "trend research", "what's the discussion on", "real-time research", "practitioner discourse", "/blog discourse".
780SKILL.mdUpdated May 21, 2026
agricidaniel/blog-brand
documentation
VerifiedTrustedCommunity
Establish durable brand and voice context for cross-skill consumption. Generates BRAND.md (audience, positioning, do/don't editorial rules, taboo phrases, competitor differentiation) and VOICE.md (existing persona JSON re-expressed as readable prose), both written to the project root. When present, all blog sub-skills auto-load these files before writing or reviewing. Pairs with blog-persona, which manages the structured persona JSON. Use when user says "blog brand", "create brand context", "brand voice doc", "BRAND.md", "VOICE.md", "establish editorial brand", "brand guidelines for blog".
780SKILL.mdUpdated May 21, 2026
agricidaniel/blog-translate
testing
VerifiedTrustedCommunity
Translate existing blog posts into one or more target languages with SEO-optimized localization. Produces native-quality translations that preserve markdown structure, frontmatter, schema JSON-LD, image and chart embeds, and citation capsules. Localizes keywords, meta tags, numbers, dates, currencies, and quote styles per locale. Flags machine-translation artifacts for review. Run BEFORE blog-localize: this handles language conversion; localize handles cultural adaptation after translation completes. Use when user says "translate blog", "blog translate", "uebersetzen", "traduire", "traducir", "translate post", "blog auf Deutsch", "blog en espanol".
780SKILL.mdUpdated May 1, 2026
agricidaniel/blog-multilingual
testing
VerifiedTrustedCommunity
One-command multilingual blog creation. Writes a blog post, translates it into user-specified languages, applies cultural adaptation, and emits hreflang tags, sitemap entries, and a CMS-ready language map. The complete write-to-publish pipeline for international content. Orchestrates blog-write, blog-translate, blog-localize, and (optionally) seo-hreflang. Use when user says "multilingual blog", "blog multilingual", "write in multiple languages", "international blog", "mehrsprachiger Blog", "blog multilingue", "blog multilingue", "create blog in German and French".
780SKILL.mdUpdated May 1, 2026