blog-chart
installsforks
How to install blog-chart?
agricidaniel/claude-blog/blog-chart
$npx -y skills add AgriciDaniel/claude-blog --skill blog-chartGenerate 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,
SKILL.md
| 1 | # Blog Chart: Built-In SVG Data Visualization |
| 2 | |
| 3 | Generates dark-mode-compatible inline SVG charts for blog posts. Invoked |
| 4 | internally by `blog-write` and `blog-rewrite` when chart-worthy data is |
| 5 | identified. Not a standalone user-facing command. |
| 6 | |
| 7 | **Styling source of truth:** `references/visual-media.md` |
| 8 | |
| 9 | ## Input Format |
| 10 | |
| 11 | The writer or researcher passes a chart request: |
| 12 | |
| 13 | ``` |
| 14 | Chart Request: |
| 15 | - Type: horizontal bar |
| 16 | - Title: "AI Citation Sources by Platform" |
| 17 | - Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15% |
| 18 | - Source: Ahrefs, December 2025 |
| 19 | - Platform: mdx (or html) |
| 20 | ``` |
| 21 | |
| 22 | ## Chart Type Selection |
| 23 | |
| 24 | Select based on the data pattern. Diversity is mandatory - never repeat a |
| 25 | type within one post. |
| 26 | |
| 27 | | Data Pattern | Best Chart Type | |
| 28 | |-------------|-----------------| |
| 29 | | Before/after comparison | Grouped bar chart | |
| 30 | | Ranked factors / correlations | Lollipop chart | |
| 31 | | Parts of whole / market share | Donut chart | |
| 32 | | Trend over time | Line chart | |
| 33 | | Percentage improvement | Horizontal bar chart | |
| 34 | | Distribution / range | Area chart | |
| 35 | | Multi-dimensional scoring | Radar chart | |
| 36 | |
| 37 | ## Styling Rules (Non-Negotiable) |
| 38 | |
| 39 | All charts must work on both dark and light backgrounds: |
| 40 | |
| 41 | ``` |
| 42 | Text elements: fill="currentColor" |
| 43 | Grid lines: stroke="currentColor" opacity="0.08" |
| 44 | Axis lines: stroke="currentColor" opacity="0.3" |
| 45 | Background: transparent (no fill on root SVG) |
| 46 | Subtitle text: fill="currentColor" opacity="0.45" |
| 47 | Source text: fill="currentColor" opacity="0.35" |
| 48 | Label text: fill="currentColor" opacity="0.8" |
| 49 | ``` |
| 50 | |
| 51 | ### Color Palette |
| 52 | |
| 53 | | Color | Hex | Use Case | |
| 54 | |-------|-----|----------| |
| 55 | | Orange | `#f97316` | Primary / highest value | |
| 56 | | Sky Blue | `#38bdf8` | Secondary / comparison | |
| 57 | | Purple | `#a78bfa` | Tertiary / special category | |
| 58 | | Green | `#22c55e` | Quaternary / positive indicator | |
| 59 | |
| 60 | For text inside colored elements: `fill="white"` with `fontWeight="800"`. |
| 61 | |
| 62 | ## Standard SVG Shell (HTML) |
| 63 | |
| 64 | ```xml |
| 65 | <svg |
| 66 | viewBox="0 0 560 380" |
| 67 | style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" |
| 68 | role="img" |
| 69 | aria-label="Chart description with key data point" |
| 70 | > |
| 71 | <title>Chart Title</title> |
| 72 | <desc>Description for screen readers with all key data points and source</desc> |
| 73 | |
| 74 | <!-- Chart content --> |
| 75 | |
| 76 | <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35"> |
| 77 | Source: Source Name (Year) |
| 78 | </text> |
| 79 | </svg> |
| 80 | ``` |
| 81 | |
| 82 | ## JSX/MDX Shell (camelCase attributes) |
| 83 | |
| 84 | ```jsx |
| 85 | <svg |
| 86 | viewBox="0 0 560 380" |
| 87 | style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} |
| 88 | role="img" |
| 89 | aria-label="Chart description" |
| 90 | > |
| 91 | <title>Chart Title</title> |
| 92 | <desc>Description for screen readers</desc> |
| 93 | |
| 94 | {/* Chart content */} |
| 95 | |
| 96 | <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35"> |
| 97 | Source: Source Name (Year) |
| 98 | </text> |
| 99 | </svg> |
| 100 | ``` |
| 101 | |
| 102 | ## JSX Attribute Conversion (Required for MDX) |
| 103 | |
| 104 | | HTML | JSX | |
| 105 | |------|-----| |
| 106 | | `stroke-width` | `strokeWidth` | |
| 107 | | `stroke-dasharray` | `strokeDasharray` | |
| 108 | | `stroke-linecap` | `strokeLinecap` | |
| 109 | | `text-anchor` | `textAnchor` | |
| 110 | | `font-size` | `fontSize` | |
| 111 | | `font-weight` | `fontWeight` | |
| 112 | | `font-family` | `fontFamily` | |
| 113 | | `class` | `className` | |
| 114 | | `style="..."` | `style={{...}}` | |
| 115 | |
| 116 | ## Chart Type Construction |
| 117 | |
| 118 | ### Horizontal Bar Chart |
| 119 | |
| 120 | Best for: percentage improvements, single-metric comparisons. |
| 121 | |
| 122 | 1. Define chart area: x=80, y=40, width=440, height=280 |
| 123 | 2. Calculate bar height: `chartHeight / dataCount - gap` (gap=8) |
| 124 | 3. Calculate bar width: `(value / maxValue) * chartWidth` |
| 125 | 4. Position bars: `y = chartY + index * (barHeight + gap)` |
| 126 | 5. Label on left (right-aligned at x=75): category name |
| 127 | 6. Value label at end of bar: percentage or number |
| 128 | 7. Source text at bottom center |
| 129 | |
| 130 | ### Grouped Bar Chart |
| 131 | |
| 132 | Best for: before/after, A vs B comparisons. |
| 133 | |
| 134 | 1. Define groups along Y axis, bars within each group |
| 135 | 2. Use 2 colors (primary + secondary) for the two series |
| 136 | 3. Add legend at top: colored square + label for each series |
| 137 | 4. Gap between groups > gap within groups |
| 138 | |
| 139 | ### Donut Chart |
| 140 | |
| 141 | Best for: parts of whole, market share. |
| 142 | |
| 143 | 1. Center: cx |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
