create-geo-charts

Name: create-geo-charts
Author: onvoyage-ai

32installs34forks

How to install create-geo-charts?

onvoyage-ai/gtm-engineer-skills/create-geo-charts

$npx -y skills add onvoyage-ai/gtm-engineer-skills --skill create-geo-charts

Installs into the current project.

Summary

Creates data visualizations (charts, graphs, tables) optimized for AI engine parsing and citation. Produces inline SVG/HTML with text summaries, data tables, and JSON-LD so AI engines can quote the data.

Files · 1

View on GitHub

SKILL.md

1	# Create GEO/SEO Charts & Data Visualizations
2
3	You are an expert at creating data visualizations optimized for Generative Engine Optimization (GEO) and SEO. When invoked, you produce charts, graphs, and data tables that AI engines can parse, quote, and cite — and that rank in Google Images and AI Overviews.
4
5	Core insight: AI engines cite text, not pixels. Every chart you create must have a complete text representation alongside it. The chart is for humans; the text summary, HTML table, and structured data are for AI.
6
7	## Workflow
8
9	### Step 1: Understand the Data
10
11	Ask the user for:
12	1. Data source — raw data, research findings, or a synthesis request
13	2. Chart purpose — what point should the chart make?
14	3. Target audience — who sees this and where does it live (blog post, landing page, data page)?
15	4. Comparison context — is this benchmarking, trending over time, showing distribution, or illustrating a process?
16
17	If the user provides raw data, use it directly. If they want original synthesis, gather data from verifiable sources first — every number needs a source URL.
18
19	### Step 2: Choose the Right Chart Type
20
21	Match chart type to data and GEO intent:
22
23	\| Data Pattern \| Chart Type \| GEO Value \|
24	\|---\|---\|---\|
25	\| X vs Y vs Z performance \| Comparison bar chart \| Very High — answers "which is better" queries \|
26	\| Rankings or scores \| Horizontal bar chart \| Very High — AI extracts ranked lists \|
27	\| Changes over time \| Line chart \| High — answers "how has X changed" queries \|
28	\| Part-of-whole \| Donut/pie chart (max 5 segments) \| Medium — keep segments few and labeled \|
29	\| Multi-criteria evaluation \| Radar/spider chart \| Medium — pair with a comparison table \|
30	\| Process or decision \| Flowchart / decision tree \| High — answers "how does X work" queries \|
31	\| Feature comparison \| Matrix/checklist table \| Very High — direct extraction by AI \|
32
33	Prefer comparison charts, benchmark tables, and step-by-step flow diagrams — these are the most-cited visual formats by AI engines.
34
35	### Step 3: Create the Chart
36
37	Generate the visualization using one of these approaches:
38	- Inline SVG (preferred) — text stays crawlable, scales perfectly, accessible
39	- Mermaid diagram — for flowcharts and decision trees in Markdown-based sites
40	- Chart.js / D3 config — for interactive charts, provide the config code
41	- Static image — export as WebP (complex visuals) or SVG (diagrams), compressed
42
43	#### SVG Rules
44	- Use `<text>` elements for all labels — never bake text into paths
45	- Add `role="img"` and `aria-labelledby="titleID descID"` to root `<svg>`
46	- Include `<title>` and `<desc>` elements inside the SVG
47	- Inline the SVG in HTML (not via `<img src>`) so text remains crawlable
48	- Minimum 3:1 contrast ratio for chart elements, 4.5:1 for text
49	- Never use color alone to convey meaning — add patterns, labels, or icons
50
51	#### Design System — Consulting-Grade Visual Standards
52
53	Follow the design principles used by McKinsey, BCG, Deloitte Insights, and Pew Research Center. These firms set the gold standard for credible data visualization.
54
55	Core principle: Restrained elegance. Every element earns its place or gets removed.
56
57	##### Color Palette — Maximum 3 Colors Per Chart
58
59	Use one accent color for the key data point. Everything else is neutral gray. Color creates hierarchy, not decoration.
60
61	```
62	Primary accent: #2563EB (blue — key insight, #1 data point)
63	Secondary data: #64748B (slate gray — supporting data)
64	Tertiary data: #CBD5E1 (light gray — background/context data)
65	Negative/risk: #DC2626 (red — only for negative values or warnings)
66	Positive/growth: #059669 (green — only for positive change indicators)
67	Background: #FFFFFF (white — never use colored chart backgrounds)
68	Gridlines: #F1F5F9 (near-invisible — or remove entirely)
69	```
70
71	Override this palette when the user has brand colors. The accent color should be the brand's primary color; all other bars/lines stay gray.
72
73	##### Typography — One Family, Size Creates Hierarchy
74
75	```
76	Font: system-ui, -apple-system, 'Segoe UI', sans-serif
77	(or the site's body font — never mix font families)
78
79	Action title: 18-20px, font-weight 700, color #0F172A
80	Subtitle/lead: 14-15px, font-weight 400, color #475569
81	Axis labels: 11-12px, font-weight 400, color #64748B
82	Data labels: 12-13px, font-weight 600, color #0F172A (on/near bars)
83	Source citation: 11px, font-weight 400, color #94A3B8
84	```
85
86	##### Layout — Open, Borderless, Generous Whitespace
87
88	- No borders or boxes around charts. White space separates elements, not lines.
89	- No chart background fill — charts sit directly on the page's white background.
90	- Padding: 40-60px top/bottom, 20-40px sides within the SVG viewBox.
91	- Width: Charts sho

People who liked this also viewed

6 picks

Type

create-geo-charts

32installs34forks

View on GitHub

How to install create-geo-charts?

onvoyage-ai/gtm-engineer-skills/create-geo-charts

$npx -y skills add onvoyage-ai/gtm-engineer-skills --skill create-geo-charts

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Create GEO/SEO Charts & Data Visualizations
2
3	You are an expert at creating data visualizations optimized for Generative Engine Optimization (GEO) and SEO. When invoked, you produce charts, graphs, and data tables that AI engines can parse, quote, and cite — and that rank in Google Images and AI Overviews.
4
5	Core insight: AI engines cite text, not pixels. Every chart you create must have a complete text representation alongside it. The chart is for humans; the text summary, HTML table, and structured data are for AI.
6
7	## Workflow
8
9	### Step 1: Understand the Data
10
11	Ask the user for:
12	1. Data source — raw data, research findings, or a synthesis request
13	2. Chart purpose — what point should the chart make?
14	3. Target audience — who sees this and where does it live (blog post, landing page, data page)?
15	4. Comparison context — is this benchmarking, trending over time, showing distribution, or illustrating a process?
16
17	If the user provides raw data, use it directly. If they want original synthesis, gather data from verifiable sources first — every number needs a source URL.
18
19	### Step 2: Choose the Right Chart Type
20
21	Match chart type to data and GEO intent:
22
23	\| Data Pattern \| Chart Type \| GEO Value \|
24	\|---\|---\|---\|
25	\| X vs Y vs Z performance \| Comparison bar chart \| Very High — answers "which is better" queries \|
26	\| Rankings or scores \| Horizontal bar chart \| Very High — AI extracts ranked lists \|
27	\| Changes over time \| Line chart \| High — answers "how has X changed" queries \|
28	\| Part-of-whole \| Donut/pie chart (max 5 segments) \| Medium — keep segments few and labeled \|
29	\| Multi-criteria evaluation \| Radar/spider chart \| Medium — pair with a comparison table \|
30	\| Process or decision \| Flowchart / decision tree \| High — answers "how does X work" queries \|
31	\| Feature comparison \| Matrix/checklist table \| Very High — direct extraction by AI \|
32
33	Prefer comparison charts, benchmark tables, and step-by-step flow diagrams — these are the most-cited visual formats by AI engines.
34
35	### Step 3: Create the Chart
36
37	Generate the visualization using one of these approaches:
38	- Inline SVG (preferred) — text stays crawlable, scales perfectly, accessible
39	- Mermaid diagram — for flowcharts and decision trees in Markdown-based sites
40	- Chart.js / D3 config — for interactive charts, provide the config code
41	- Static image — export as WebP (complex visuals) or SVG (diagrams), compressed
42
43	#### SVG Rules
44	- Use `<text>` elements for all labels — never bake text into paths
45	- Add `role="img"` and `aria-labelledby="titleID descID"` to root `<svg>`
46	- Include `<title>` and `<desc>` elements inside the SVG
47	- Inline the SVG in HTML (not via `<img src>`) so text remains crawlable
48	- Minimum 3:1 contrast ratio for chart elements, 4.5:1 for text
49	- Never use color alone to convey meaning — add patterns, labels, or icons
50
51	#### Design System — Consulting-Grade Visual Standards
52
53	Follow the design principles used by McKinsey, BCG, Deloitte Insights, and Pew Research Center. These firms set the gold standard for credible data visualization.
54
55	Core principle: Restrained elegance. Every element earns its place or gets removed.
56
57	##### Color Palette — Maximum 3 Colors Per Chart
58
59	Use one accent color for the key data point. Everything else is neutral gray. Color creates hierarchy, not decoration.
60
61	```
62	Primary accent: #2563EB (blue — key insight, #1 data point)
63	Secondary data: #64748B (slate gray — supporting data)
64	Tertiary data: #CBD5E1 (light gray — background/context data)
65	Negative/risk: #DC2626 (red — only for negative values or warnings)
66	Positive/growth: #059669 (green — only for positive change indicators)
67	Background: #FFFFFF (white — never use colored chart backgrounds)
68	Gridlines: #F1F5F9 (near-invisible — or remove entirely)
69	```
70
71	Override this palette when the user has brand colors. The accent color should be the brand's primary color; all other bars/lines stay gray.
72
73	##### Typography — One Family, Size Creates Hierarchy
74
75	```
76	Font: system-ui, -apple-system, 'Segoe UI', sans-serif
77	(or the site's body font — never mix font families)
78
79	Action title: 18-20px, font-weight 700, color #0F172A
80	Subtitle/lead: 14-15px, font-weight 400, color #475569
81	Axis labels: 11-12px, font-weight 400, color #64748B
82	Data labels: 12-13px, font-weight 600, color #0F172A (on/near bars)
83	Source citation: 11px, font-weight 400, color #94A3B8
84	```
85
86	##### Layout — Open, Borderless, Generous Whitespace
87
88	- No borders or boxes around charts. White space separates elements, not lines.
89	- No chart background fill — charts sit directly on the page's white background.
90	- Padding: 40-60px top/bottom, 20-40px sides within the SVG viewBox.
91	- Width: Charts sho

People who liked this also viewed

6 picks

Type