Visual Storytelling (Bundle)
This is the entry point for the Visual Storytelling pipeline. It installs 7
component plugins and an orchestrator agent.
Pipeline
Brief -> Ingest -> Clean -> Select -> Deliver
- Brief (
storytelling-requirements): Structured intake producing audience,
Big Idea, questions with communication goals, data sources, delivery target.
- Ingest (
datasource-connectors): Load from CSV, JSON, API, SQL, Excel,
Parquet with error handling and encoding detection.
- Clean (
data-preparation): Profile, clean, aggregate, pivot, quality-check.
- Select (
visual-vocabulary): Map each question's communication goal to
the right chart type using the visual vocabulary catalog.
- Deliver: Render to the chosen format:
delivery-ascii-dashboard -- terminal/plain text (78-char aligned)delivery-svg-markdown -- GitHub-compatible static SVG (D3.js patterns)delivery-html-dashboard -- interactive HTML (Apache ECharts v6)
Orchestrator Agent
The visual-storytelling agent runs the full pipeline. Invoke it with a data
source, a rough request, and a delivery target. It produces a structured brief,
delegates to each pipeline step, and runs a CSAR QA loop on the output.
Component Skills
Each component has its own detailed SKILL.md. This bundle skill is a routing
layer; the real specs live in the components:
| Component |
SKILL Path |
storytelling-requirements |
.github/skills/local/storytelling-requirements/SKILL.md |
datasource-connectors |
.github/skills/local/datasource-connectors/SKILL.md |
data-preparation |
.github/skills/local/data-preparation/SKILL.md |
visual-vocabulary |
.github/skills/local/visual-vocabulary/SKILL.md |
delivery-ascii-dashboard |
.github/skills/local/delivery-ascii-dashboard/SKILL.md |
delivery-svg-markdown |
.github/skills/local/delivery-svg-markdown/SKILL.md |
delivery-html-dashboard |
.github/skills/local/delivery-html-dashboard/SKILL.md |
When to Use Which Delivery
| Need |
Format |
Why |
| GitHub README |
SVG |
No JS execution on GitHub |
| Terminal output |
ASCII |
Universal, no rendering needed |
| Interactive exploration |
HTML |
Tooltips, zoom, legend toggle |
| Static docs / reports |
SVG |
Crisp at any scale, inline in Markdown |
| Presentations |
HTML |
Open in browser, full-screen |
| Offline / no CDN |
SVG or ASCII |
No external dependencies |
1---2name: visual-storytelling3description: Bundle plugin: installs the complete Visual Storytelling pipeline (brief, ingest, clean, select, deliver). See component SKILLs for detailed specs.4---5
6# Visual Storytelling (Bundle)
7
8This is the entry point for the Visual Storytelling pipeline. It installs 7
9component plugins and an orchestrator agent.
10
11## Pipeline
12
13```text
14Brief -> Ingest -> Clean -> Select -> Deliver
15```
16
171. **Brief** (`storytelling-requirements`): Structured intake producing audience,
18 Big Idea, questions with communication goals, data sources, delivery target.
192. **Ingest** (`datasource-connectors`): Load from CSV, JSON, API, SQL, Excel,
20 Parquet with error handling and encoding detection.
213. **Clean** (`data-preparation`): Profile, clean, aggregate, pivot, quality-check.
224. **Select** (`visual-vocabulary`): Map each question's communication goal to
23 the right chart type using the visual vocabulary catalog.
245. **Deliver**: Render to the chosen format:
25 - `delivery-ascii-dashboard` -- terminal/plain text (78-char aligned)
26 - `delivery-svg-markdown` -- GitHub-compatible static SVG (D3.js patterns)
27 - `delivery-html-dashboard` -- interactive HTML (Apache ECharts v6)
28
29## Orchestrator Agent
30
31The `visual-storytelling` agent runs the full pipeline. Invoke it with a data
32source, a rough request, and a delivery target. It produces a structured brief,
33delegates to each pipeline step, and runs a CSAR QA loop on the output.
34
35## Component Skills
36
37Each component has its own detailed SKILL.md. This bundle skill is a routing
38layer; the real specs live in the components:
39
40| Component | SKILL Path |
41| --- | --- |
42| `storytelling-requirements` | `.github/skills/local/storytelling-requirements/SKILL.md` |
43| `datasource-connectors` | `.github/skills/local/datasource-connectors/SKILL.md` |
44| `data-preparation` | `.github/skills/local/data-preparation/SKILL.md` |
45| `visual-vocabulary` | `.github/skills/local/visual-vocabulary/SKILL.md` |
46| `delivery-ascii-dashboard` | `.github/skills/local/delivery-ascii-dashboard/SKILL.md` |
47| `delivery-svg-markdown` | `.github/skills/local/delivery-svg-markdown/SKILL.md` |
48| `delivery-html-dashboard` | `.github/skills/local/delivery-html-dashboard/SKILL.md` |
49
50## When to Use Which Delivery
51
52| Need | Format | Why |
53| --- | --- | --- |
54| GitHub README | SVG | No JS execution on GitHub |
55| Terminal output | ASCII | Universal, no rendering needed |
56| Interactive exploration | HTML | Tooltips, zoom, legend toggle |
57| Static docs / reports | SVG | Crisp at any scale, inline in Markdown |
58| Presentations | HTML | Open in browser, full-screen |
59| Offline / no CDN | SVG or ASCII | No external dependencies |
gabrielmoreira