Create Geo ChartsSAFE

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: create-geo-charts
description: 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.
---

# Create GEO/SEO Charts & Data Visualizations

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.

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.

## Workflow

### Step 1: Understand the Data

Ask the user for:
1. **Data source** — raw data, research findings, or a synthesis request
2. **Chart purpose** — what point should the chart make?
3. **Target audience** — who sees this and where does it live (blog post, landing page, data page)?
4. **Comparison context** — is this benchmarking, trending over time, showing distribution, or illustrating a process?

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.

### Step 2: Choose the Right Chart Type

Match chart type to data and GEO intent:

| Data Pattern | Chart Type | GEO Value |
|---|---|---|
| X vs Y vs Z performance | Comparison bar chart | Very High — answers "which is better" queries |
| Rankings or scores | Horizontal bar chart | Very High — AI extracts ranked lists |
| Changes over time | Line chart | High — answers "how has X changed" queries |
| Part-of-whole | Donut/pie chart (max 5 segments) | Medium — keep segments few and labeled |
| Multi-criteria evaluation | Radar/spider chart | Medium — pair with a comparison table |
| Process or decision | Flowchart / decision tree | High — answers "how does X work" queries |
| Feature comparison | Matrix/checklist table | Very High — direct extraction by AI |

Prefer comparison charts, benchmark tables, and step-by-step flow diagrams — these are the most-cited visual formats by AI engines.

### Step 3: Create the Chart

Generate the visualization using one of these approaches:
- **Inline SVG** (preferred) — text stays crawlable, scales perfectly, accessible
- **Mermaid diagram** — for flowcharts and decision trees in Markdown-based sites
- **Chart.js / D3 config** — for interactive charts, provide the config code
- **Static image** — export as WebP (complex visuals) or SVG (diagrams), compressed

#### SVG Rules
- Use `<text>` elements for all labels — never bake text into paths
- Add `role="img"` and `aria-labelledby="titleID descID"` to root `<svg>`
- Include `<title>` and `<desc>` elements inside the SVG
- Inline the SVG in HTML (not via `<img src>`) so text remains crawlable
- Minimum 3:1 contrast ratio for chart elements, 4.5:1 for text
- Never use color alone to convey meaning — add patterns, labels, or icons

#### Design System — Consulting-Grade Visual Standards

Follow the design principles used by McKinsey, BCG, Deloitte Insights, and Pew Research Center. These firms set the gold standard for credible data visualization.

**Core principle: Restrained elegance. Every element earns its place or gets removed.**

##### Color Palette — Maximum 3 Colors Per Chart

Use one accent color for the key data point. Everything else is neutral gray. Color creates hierarchy, not decoration.

```
Primary accent:  #2563EB  (blue — key insight, #1 data point)
Secondary data:  #64748B  (slate gray — supporting data)
Tertiary data:   #CBD5E1  (light gray — background/context data)
Negative/risk:   #DC2626  (red — only for negative values or warnings)
Positive/growth: #059669  (green — only for positive change indicators)
Background:      #FFFFFF  (white — never use colored chart backgrounds)
Gridlines:       #F1F5F9  (near-invisible — or remove entirely)
```

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.

##### Typography — One Family, Size Creates Hierarchy

```
Font:            system-ui, -apple-system, 'Segoe UI', sans-serif
                 (or the site's body font — never mix font families)

Action title:    18-20px, font-weight 700, color #0F172A
Subtitle/lead:   14-15px, font-weight 400, color #475569
Axis labels:     11-12px, font-weight 400, color #64748B
Data labels:     12-13px, font-weight 600, color #0F172A (on/near bars)
Source citation:  11px, font-weight 400, color #94A3B8
```

##### Layout — Open, Borderless, Generous Whitespace

- **No borders or boxes** around charts. White space separates elements, not lines.
- **No chart background fill** — charts sit directly on the page's white background.
- **Padding**: 40-60px top/bottom, 20-40px sides within the SVG viewBox.
- **Width**: Charts should be 640-800px wide max (optimal reading width).

##### Gridlines — Remove Unless Essential

- When data labels are placed directly on bars/points: **remove gridlines AND the value axis entirely**.
- When data labels would clutter (>10 data points): use faint horizontal gridlines (#F1F5F9, 1px) and keep the value axis.
- **Never use vertical gridlines** on bar charts.
- Axis lines: 1px #E2E8F0 for the baseline only.

##### Labels — Direct, Not Legend

- **Place values directly on or beside each bar/point.** Eliminate the need for readers to look back and forth between legend and data.
- **Legends only when unavoidable** (overlapping lines, many-category pie/donut). When used: bottom-aligned, horizontal, compact.
- **Category labels directly on the axis** — left-aligned for horizontal bars, centered below for vertical bars.

##### Action Titles — State the Insight, Not the Topic

The chart title is a complete sentence stating what the reader should take away. This is the #1 pattern fr

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (0)

No findings outside the package's declared scope.

Gates applied: no_behavioural_pass.