Early Access

Dreambase Skills

Dreambase Skills

Open-source agent skills for charts, dashboards, reports, and data stories — and how to install them alongside the Dreambase MCP.

Dreambase Skills are open-source agent skills — folders of instructions that teach an AI agent how to do a specialized job properly. You install them into the tools you already work in (Claude, ChatGPT, Codex, Cursor, Claude Code), and they load automatically when a task matches what they cover.

Paired with the Dreambase MCP, they close the loop: the MCP brings your data to the agent, and the skills teach the agent what to do with it.

A quick disambiguation

Dreambase uses the word "Skills" in two places, and they are different things:

  • Skills inside Dreambase — the semantic mapping layer that turns your Connectors into a data model your Dreambase agents understand. That is the product feature, covered in its own doc.

  • Dreambase Skills (this doc) — agent skills you install into your AI tools, published openly so your agents can build charts, reports, and data stories to the same standard Dreambase holds itself to.

They complement each other. The first makes your data legible to agents; the second makes your agents good at presenting it.

The catalog

Four skills make up the analytics stack. Each one carries its own reference library, and agents load only the parts a given task needs.

dreambase-visualization-design

Decides what to build, and why.

An evidence-based framework for choosing and critiquing visualizations, synthesized from the accepted canon — Bertin, Cleveland–McGill, Tufte, Shneiderman, Munzner, Heer–Bostock. It works through the audience, the decision, and the analytical operation before touching a chart type, because most bad dashboards fail at the abstraction level, long before anyone picked a chart.

It carries a chart-selection matrix, per-chart-type rules, dashboard structure guidance, color and accessibility thresholds (CVD, WCAG 2.2), and a statistical-integrity gate that every deliverable has to pass.

Triggers on: "which chart should I use", "review my dashboard", "make this look better", "does this chart mislead".

dreambase-echarts

Builds the thing, correctly, the first time.

Authors Apache ECharts EChartsOption JSON for the Dreambase renderer. It ships an offline copy of the ECharts option schema, so the agent looks up exact option names and types instead of guessing them, plus a structural validator it runs before handing anything back.

It covers every chart family — line, bar, pie, scatter, heatmap, sankey, treemap, sunburst, tree, graph, gauge, funnel, candlestick, boxplot, radar, map, calendar — and the composite patterns that are easy to get subtly wrong: dual axes, stacking, normalized percentages, small multiples, zoom, streaming data, and responsive breakpoints. For editorial or illustrative forms with no built-in series, it documents the custom renderItem toolkit.

Triggers on: any request to chart, plot, or visualize data — even when nobody says "ECharts".

dreambase-data-stories

Turns analysis into something people actually read.

The artifact layer: reports, executive summaries, board decks, one-pagers, infographics, and scrollytelling pieces. It sets the bar at the work of the field's best — FT, NYT Graphics, The Pudding, Reuters — and exists specifically to prevent the common failure mode of mechanically correct content in default styling.

It insists on a Big Idea sentence before any layout, the pyramid structure for decision-makers and a narrative arc for readers, annotation treated as narration rather than garnish, and one designed system — type scale, palette, grid — shared across every artifact from the same analysis.

Triggers on: "make a report", "exec summary", "board deck", "one-pager", "data story", "make this presentable".

dreambase-public-reports

Lets you publish honestly without publishing your numbers.

The publication-safety layer. Use it whenever real or sensitive data informs something that will be seen outside your company — a marketing page, an investor update, a public benchmark, a conference talk.

It treats everything shipped to a browser as public: not just visible prose and chart marks, but serialized props, hydration payloads, SVG text, accessibility trees, alt text, tooltips, and hidden elements. Raw absolute values stay private; charts are rebuilt from a transformed publication model that preserves the real shape, direction, and turning points without exposing the underlying figures. Any visible percentage, rate, delta, or ratio requires your explicit approval, scoped to that exact value and placement.

It also governs tone — constructive through honest selection and forward-looking framing, never through omission or euphemism. A decline does not get called "stable."

Triggers on: anything headed for a public, external, or customer-facing audience.

Also in the repository

  • dreambase-industrial-schematics — dark, cinematic technical-schematic illustration: orbital process rings, cel-shaded exploded machinery, holographic wireframe mesh charts. Portable SVG, with zero-dependency generators. This is the style used across Dreambase's own product marketing.

  • dreambase-skill-creator — the meta-skill for contributors: standards, template, validator, and eval loop for building new skills in the repository.

How they work together

The four analytics skills are designed to compose, not to compete. Each one hands off to the next:

  • dreambase-data-stories shapes the artifact — the argument, the hierarchy, the design system.

  • dreambase-visualization-design decides each individual chart — the form, the encoding, the context, the accessibility requirements.

  • dreambase-echarts builds and validates the config that actually renders.

  • dreambase-public-reports wraps the whole thing when the output leaves the building, narrowing what may appear without ever relaxing the others' honesty requirements.

The wiring is built into the skills themselves, so you rarely need to sequence them by hand — naming the outermost one usually pulls in the rest. Naming them explicitly is still the reliable way to guarantee a particular treatment.

Which to name

  • One chart, rendered/dreambase-visualization-design then /dreambase-echarts

  • Dashboard review or redesign/dreambase-visualization-design

  • Internal report, deck, or exec summary/dreambase-data-stories (it pulls in the other two)

  • Anything public or customer-facing — add /dreambase-public-reports

  • Schematic or technical illustration/dreambase-industrial-schematics

Using them with the Dreambase MCP

The Dreambase MCP server gives your agent live access to your workspace: dashboards, pre-aggregated datasets, metric snapshots, and Supabase health reports. See the Dreambase MCP doc for installation.

On their own, the MCP tools return data and the skills produce craft. Together, one prompt goes from your warehouse to a finished artifact without you exporting a single CSV:

Use @Dreambase to pull our latest product KPIs and generate a report for our team using /dreambase-echarts following /dreambase-visualization-design, creating a data journal using /dreambase-data-stories

This pairing is also a real token saving. Dreambase datasets are already refreshed, joined, and aggregated on a schedule, so the agent fetches a compact prepared result instead of paging through raw rows and re-deriving the same numbers on every run.

For many more worked examples, see the MCP Use Cases doc.

Installing

Skills are just folders containing a SKILL.md file. That makes them portable — every install method below puts the same folder somewhere your agent looks.

Option 1 — the skills CLI (recommended)

The skills CLI handles fetching, placement, and linking into every agent you have installed. Nothing to install globally; npx fetches it on demand.

Pick from the catalog interactively:

npx skills add DreambaseAI/skills

See what's available without installing anything:

npx skills add DreambaseAI/skills --list

Install specific skills by name — repeat --skill to take several at once:

npx skills add DreambaseAI/skills --skill dreambase-echarts --skill dreambase-visualization-design

Take everything, no prompts:

npx skills add DreambaseAI/skills --all

Global vs. project scope

This is the flag worth understanding. By default the CLI installs into the current project, so the skill travels with that repository and applies only there. Add -g (or --global) to install at the user level instead, making it available in every project you open:

npx skills add DreambaseAI/skills --skill dreambase-echarts -g

A good rule: global for skills you always want — the visualization stack usually qualifies — and project scope for anything a specific repository depends on, so teammates who clone it get the same behavior. Project installs record themselves in skills-lock.json, which you should commit; a teammate then restores the exact set with:

npx skills experimental_install

Choosing which agents receive the skill

The CLI detects the agents on your machine and installs to all of them by default. To target specific ones, use -a:

npx skills add DreambaseAI/skills --all -a '*'

By default the CLI symlinks a single canonical copy into each agent's skills folder, so one update reaches every tool at once. Pass --copy if you'd rather each agent hold an independent copy — useful when you intend to edit one in place.

Trying a skill without installing it

To evaluate a skill first, generate its prompt and paste it into any agent:

npx skills use DreambaseAI/skills@dreambase-echarts

Managing what you have

npx skills list

npx skills update

npx skills remove dreambase-echarts

Both update and remove accept -g and -p to act on global or project scope specifically.

Option 2 — clone and copy

If you'd rather not run a CLI, or you want to fork and customize a skill, clone the repository and copy the folders you want:

git clone https://github.com/DreambaseAI/skills.git

Then place the skill folder where your agent looks for it. Every one of these locations takes the same folder:

  • Claude Code~/.claude/skills/ for every project, or <project>/.claude/skills/ for one.

  • Codex~/.codex/skills/ or <project>/.codex/skills/.

  • Cursor~/.cursor/skills/ or <project>/.cursor/skills/.

  • Any agent following the shared convention~/.agents/skills/.

For example:

cp -r skills/dreambase-echarts ~/.claude/skills/

Restart the agent, or start a fresh session, and the skill is discoverable.

Option 3 — zip and drag-and-drop

Hosted apps without filesystem access — ChatGPT, Claude on the web and desktop, and similar — accept a skill as a zip archive uploaded through their Plugins or Skills panel.

Clone the repository, then zip each skill folder individually:

cd skills && zip -r dreambase-echarts.zip dreambase-echarts

Then open your app's Skills or Plugins settings, choose the option to add or upload a skill, and drop the zip in. Upload one archive per skill.

Getting the archive structure right

This is where most manual installs go wrong. The requirements are the same everywhere:

  • SKILL.md must sit at the root of the skill folder inside the archive — not nested one level deeper, and not at the top level of the zip alongside the folder.

  • Zip the folder, not its contents. dreambase-echarts.zip should contain dreambase-echarts/SKILL.md.

  • Keep references/, scripts/, and assets/ alongside it. They're loaded on demand and the skill degrades without them.

  • One skill per archive. Bundling several into one zip fails on most hosts.

  • Some hosts won't execute bundled scripts. The skills still work — an agent that can't run validate-option.mjs falls back to its documented rules — but you'll get the strongest results in a tool with shell access.

Manual uploads don't auto-update. When the repository changes, re-zip and re-upload, or move to the CLI.

Tips

  • Install the stack, not one piece. These skills reference each other by name. Installing dreambase-data-stories without dreambase-visualization-design gets you a well-structured report with unexamined charts.

  • Name skills explicitly for high-stakes work. Agents pick up skills automatically from the task description, but they under-trigger. Typing /dreambase-public-reports before publishing anything externally is cheap insurance.

  • Give the agent the real constraints. These skills ask about audience, the decision at hand, metric definitions, and brand limits. Volunteering that up front skips a round of questions and produces markedly better output.

  • Keep them updated. Run npx skills update periodically. The reference libraries grow, and the ECharts option schema is versioned to a specific release.

  • Fork freely. Skills are plain Markdown. If your organization has house chart conventions or a fixed palette, copy a skill, add your rules, and install your version instead.

Dreambase Skills are open-source agent skills — folders of instructions that teach an AI agent how to do a specialized job properly. You install them into the tools you already work in (Claude, ChatGPT, Codex, Cursor, Claude Code), and they load automatically when a task matches what they cover.

Paired with the Dreambase MCP, they close the loop: the MCP brings your data to the agent, and the skills teach the agent what to do with it.

A quick disambiguation

Dreambase uses the word "Skills" in two places, and they are different things:

  • Skills inside Dreambase — the semantic mapping layer that turns your Connectors into a data model your Dreambase agents understand. That is the product feature, covered in its own doc.

  • Dreambase Skills (this doc) — agent skills you install into your AI tools, published openly so your agents can build charts, reports, and data stories to the same standard Dreambase holds itself to.

They complement each other. The first makes your data legible to agents; the second makes your agents good at presenting it.

The catalog

Four skills make up the analytics stack. Each one carries its own reference library, and agents load only the parts a given task needs.

dreambase-visualization-design

Decides what to build, and why.

An evidence-based framework for choosing and critiquing visualizations, synthesized from the accepted canon — Bertin, Cleveland–McGill, Tufte, Shneiderman, Munzner, Heer–Bostock. It works through the audience, the decision, and the analytical operation before touching a chart type, because most bad dashboards fail at the abstraction level, long before anyone picked a chart.

It carries a chart-selection matrix, per-chart-type rules, dashboard structure guidance, color and accessibility thresholds (CVD, WCAG 2.2), and a statistical-integrity gate that every deliverable has to pass.

Triggers on: "which chart should I use", "review my dashboard", "make this look better", "does this chart mislead".

dreambase-echarts

Builds the thing, correctly, the first time.

Authors Apache ECharts EChartsOption JSON for the Dreambase renderer. It ships an offline copy of the ECharts option schema, so the agent looks up exact option names and types instead of guessing them, plus a structural validator it runs before handing anything back.

It covers every chart family — line, bar, pie, scatter, heatmap, sankey, treemap, sunburst, tree, graph, gauge, funnel, candlestick, boxplot, radar, map, calendar — and the composite patterns that are easy to get subtly wrong: dual axes, stacking, normalized percentages, small multiples, zoom, streaming data, and responsive breakpoints. For editorial or illustrative forms with no built-in series, it documents the custom renderItem toolkit.

Triggers on: any request to chart, plot, or visualize data — even when nobody says "ECharts".

dreambase-data-stories

Turns analysis into something people actually read.

The artifact layer: reports, executive summaries, board decks, one-pagers, infographics, and scrollytelling pieces. It sets the bar at the work of the field's best — FT, NYT Graphics, The Pudding, Reuters — and exists specifically to prevent the common failure mode of mechanically correct content in default styling.

It insists on a Big Idea sentence before any layout, the pyramid structure for decision-makers and a narrative arc for readers, annotation treated as narration rather than garnish, and one designed system — type scale, palette, grid — shared across every artifact from the same analysis.

Triggers on: "make a report", "exec summary", "board deck", "one-pager", "data story", "make this presentable".

dreambase-public-reports

Lets you publish honestly without publishing your numbers.

The publication-safety layer. Use it whenever real or sensitive data informs something that will be seen outside your company — a marketing page, an investor update, a public benchmark, a conference talk.

It treats everything shipped to a browser as public: not just visible prose and chart marks, but serialized props, hydration payloads, SVG text, accessibility trees, alt text, tooltips, and hidden elements. Raw absolute values stay private; charts are rebuilt from a transformed publication model that preserves the real shape, direction, and turning points without exposing the underlying figures. Any visible percentage, rate, delta, or ratio requires your explicit approval, scoped to that exact value and placement.

It also governs tone — constructive through honest selection and forward-looking framing, never through omission or euphemism. A decline does not get called "stable."

Triggers on: anything headed for a public, external, or customer-facing audience.

Also in the repository

  • dreambase-industrial-schematics — dark, cinematic technical-schematic illustration: orbital process rings, cel-shaded exploded machinery, holographic wireframe mesh charts. Portable SVG, with zero-dependency generators. This is the style used across Dreambase's own product marketing.

  • dreambase-skill-creator — the meta-skill for contributors: standards, template, validator, and eval loop for building new skills in the repository.

How they work together

The four analytics skills are designed to compose, not to compete. Each one hands off to the next:

  • dreambase-data-stories shapes the artifact — the argument, the hierarchy, the design system.

  • dreambase-visualization-design decides each individual chart — the form, the encoding, the context, the accessibility requirements.

  • dreambase-echarts builds and validates the config that actually renders.

  • dreambase-public-reports wraps the whole thing when the output leaves the building, narrowing what may appear without ever relaxing the others' honesty requirements.

The wiring is built into the skills themselves, so you rarely need to sequence them by hand — naming the outermost one usually pulls in the rest. Naming them explicitly is still the reliable way to guarantee a particular treatment.

Which to name

  • One chart, rendered/dreambase-visualization-design then /dreambase-echarts

  • Dashboard review or redesign/dreambase-visualization-design

  • Internal report, deck, or exec summary/dreambase-data-stories (it pulls in the other two)

  • Anything public or customer-facing — add /dreambase-public-reports

  • Schematic or technical illustration/dreambase-industrial-schematics

Using them with the Dreambase MCP

The Dreambase MCP server gives your agent live access to your workspace: dashboards, pre-aggregated datasets, metric snapshots, and Supabase health reports. See the Dreambase MCP doc for installation.

On their own, the MCP tools return data and the skills produce craft. Together, one prompt goes from your warehouse to a finished artifact without you exporting a single CSV:

Use @Dreambase to pull our latest product KPIs and generate a report for our team using /dreambase-echarts following /dreambase-visualization-design, creating a data journal using /dreambase-data-stories

This pairing is also a real token saving. Dreambase datasets are already refreshed, joined, and aggregated on a schedule, so the agent fetches a compact prepared result instead of paging through raw rows and re-deriving the same numbers on every run.

For many more worked examples, see the MCP Use Cases doc.

Installing

Skills are just folders containing a SKILL.md file. That makes them portable — every install method below puts the same folder somewhere your agent looks.

Option 1 — the skills CLI (recommended)

The skills CLI handles fetching, placement, and linking into every agent you have installed. Nothing to install globally; npx fetches it on demand.

Pick from the catalog interactively:

npx skills add DreambaseAI/skills

See what's available without installing anything:

npx skills add DreambaseAI/skills --list

Install specific skills by name — repeat --skill to take several at once:

npx skills add DreambaseAI/skills --skill dreambase-echarts --skill dreambase-visualization-design

Take everything, no prompts:

npx skills add DreambaseAI/skills --all

Global vs. project scope

This is the flag worth understanding. By default the CLI installs into the current project, so the skill travels with that repository and applies only there. Add -g (or --global) to install at the user level instead, making it available in every project you open:

npx skills add DreambaseAI/skills --skill dreambase-echarts -g

A good rule: global for skills you always want — the visualization stack usually qualifies — and project scope for anything a specific repository depends on, so teammates who clone it get the same behavior. Project installs record themselves in skills-lock.json, which you should commit; a teammate then restores the exact set with:

npx skills experimental_install

Choosing which agents receive the skill

The CLI detects the agents on your machine and installs to all of them by default. To target specific ones, use -a:

npx skills add DreambaseAI/skills --all -a '*'

By default the CLI symlinks a single canonical copy into each agent's skills folder, so one update reaches every tool at once. Pass --copy if you'd rather each agent hold an independent copy — useful when you intend to edit one in place.

Trying a skill without installing it

To evaluate a skill first, generate its prompt and paste it into any agent:

npx skills use DreambaseAI/skills@dreambase-echarts

Managing what you have

npx skills list

npx skills update

npx skills remove dreambase-echarts

Both update and remove accept -g and -p to act on global or project scope specifically.

Option 2 — clone and copy

If you'd rather not run a CLI, or you want to fork and customize a skill, clone the repository and copy the folders you want:

git clone https://github.com/DreambaseAI/skills.git

Then place the skill folder where your agent looks for it. Every one of these locations takes the same folder:

  • Claude Code~/.claude/skills/ for every project, or <project>/.claude/skills/ for one.

  • Codex~/.codex/skills/ or <project>/.codex/skills/.

  • Cursor~/.cursor/skills/ or <project>/.cursor/skills/.

  • Any agent following the shared convention~/.agents/skills/.

For example:

cp -r skills/dreambase-echarts ~/.claude/skills/

Restart the agent, or start a fresh session, and the skill is discoverable.

Option 3 — zip and drag-and-drop

Hosted apps without filesystem access — ChatGPT, Claude on the web and desktop, and similar — accept a skill as a zip archive uploaded through their Plugins or Skills panel.

Clone the repository, then zip each skill folder individually:

cd skills && zip -r dreambase-echarts.zip dreambase-echarts

Then open your app's Skills or Plugins settings, choose the option to add or upload a skill, and drop the zip in. Upload one archive per skill.

Getting the archive structure right

This is where most manual installs go wrong. The requirements are the same everywhere:

  • SKILL.md must sit at the root of the skill folder inside the archive — not nested one level deeper, and not at the top level of the zip alongside the folder.

  • Zip the folder, not its contents. dreambase-echarts.zip should contain dreambase-echarts/SKILL.md.

  • Keep references/, scripts/, and assets/ alongside it. They're loaded on demand and the skill degrades without them.

  • One skill per archive. Bundling several into one zip fails on most hosts.

  • Some hosts won't execute bundled scripts. The skills still work — an agent that can't run validate-option.mjs falls back to its documented rules — but you'll get the strongest results in a tool with shell access.

Manual uploads don't auto-update. When the repository changes, re-zip and re-upload, or move to the CLI.

Tips

  • Install the stack, not one piece. These skills reference each other by name. Installing dreambase-data-stories without dreambase-visualization-design gets you a well-structured report with unexamined charts.

  • Name skills explicitly for high-stakes work. Agents pick up skills automatically from the task description, but they under-trigger. Typing /dreambase-public-reports before publishing anything externally is cheap insurance.

  • Give the agent the real constraints. These skills ask about audience, the decision at hand, metric definitions, and brand limits. Volunteering that up front skips a round of questions and produces markedly better output.

  • Keep them updated. Run npx skills update periodically. The reference libraries grow, and the ECharts option schema is versioned to a specific release.

  • Fork freely. Skills are plain Markdown. If your organization has house chart conventions or a fixed palette, copy a skill, add your rules, and install your version instead.

Supabase Authentication

MCP Use Cases

© 2026 Dream, Inc. All rights reserved.