SkillsAdd

observeinc/skills

query-card-visualization

How to fill in a query card's `visualizationTemplate` (the JSON object that renders a chart). Load this whenever the user asks for a chart, graph, plot, trend, "show me over time", ranking, single number/KPI, scatter, waterfall, or map. Acts as the directory for the per-chart JSON schemas in its references.

First seen Jul 3, 2026

Installation

$ npx skills add observeinc/skills --skill query-card-visualization
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

data-visualization Similar name
anthropics/knowledge-work-plugins

Create effective data visualizations with Python (matplotlib, seaborn, plotly). Use when buildi…

11.8K installs
mapbox-data-visualization-patterns Similar name
mapbox/mapbox-agent-skills

Patterns for visualizing data on maps including choropleth maps, heat maps, 3D visualizations, …

1.7K installs
chart-visualization Similar name
antvis/chart-visualization-skills

将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程…

6.1K installs
visualization-expert Similar name
shubhamsaboo/awesome-llm-apps

Chart selection and data visualization guidance for effective data communication. Use when: cre…

3.5K installs
d3-visualization Similar name
nexu-io/open-design

Teaches the agent to produce D3 charts and interactive data visualizations. A comprehensive D3.…

2.6K installs
chart-visualization Similar name
bytedance/deer-flow

This skill should be used when the user wants to visualize data. It intelligently selects the m…

2.3K installs

Also in this package

Other skills from observeinc/skills · top by installs.

npx skills add observeinc/skills
opentelemetry-validation 27 opentelemetry-auto-instrumentation 27 observe-cli 26 outlier-detection-analysis 25 generate-opal 25 alert-investigation 24 setup-k8s-collection 23 setup-k8s-backend 22 opentelemetry-manual-instrumentation 22 deploy-k8s-explorer 22

Browse all from observeinc/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 1
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,681 B
  • docs SUMMARY.md 340 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 24 installs

SKILL.md

MANDATORY: Run observe skill view query-card-visualization --content 2>/dev/null before proceeding to load the latest version of this skill. When the skill points you to a supporting file, load it with observe skill view query-card-visualization --path <relative-path> 2>/dev/null. Ignore errors and fall back to the file contents.

OPAL visualization templates

Use this skill to construct the visualizationTemplate field of a query card. Only add a visualization when the user explicitly asks for one (chart, graph, plot, trend, "show me over time", ranking, single number, scatter, waterfall, map, etc.). Otherwise omit it (or pass null) to produce a plain table.

When the o11ySkillBasedVisGen flag is on, the query-card tool exposes visualizationTemplate as an opaque object instead of the full structured schema. Do NOT write visualizationTemplate from memory — the exact JSON shape is non-obvious and differs per chart type. Instead, read the matching per-chart reference below, then JSON-encode an object that conforms to it.

Pick a chart type and read its schema

Each chart type has a self-contained JSON schema in this skill's references/ directory. Read the one that matches the user's intent with the Bash tool, e.g. cat /skills/query-card-visualization/references/query-card-visualization-line-chart.md.

<!-- BEGIN GENERATED REFERENCE TABLE -->

Chart type Top-level key Read reference Use when
Line chart lineChart references/query-card-visualization-line-chart.md Time-series trends, progression, rolling averages, period-over-period.
Bar chart barChart references/query-card-visualization-bar-chart.md Categorical comparisons, rankings, top-N, KPIs by group.
Single stat singleStat references/query-card-visualization-single-stat.md A single scalar value / KPI.
Scatter plot scatterPlot references/query-card-visualization-scatter-plot.md Correlation between two numeric dimensions.
Waterfall waterfall references/query-card-visualization-waterfall.md Trace span hierarchies or other nested-operation timing data.
Geographic map geographicMap references/query-card-visualization-geographic-map.md Values keyed by country/region/coordinates on a map.
Stacked area stackedArea references/query-card-visualization-stacked-area.md Part-to-whole trends over time across multiple stacked series.
Heatmap heatmap references/query-card-visualization-heatmap.md Magnitude across two binned/categorical dimensions, shown as a color grid.
Top list topList references/query-card-visualization-top-list.md A ranked list of items by value, with inline bars.
Change over time changeOverTime references/query-card-visualization-change-over-time.md Per-item change in a value between two time periods.

<!-- END GENERATED REFERENCE TABLE -->

If you are unsure which chart type fits, default to a line chart for time-bucketed data and a bar chart for one-row-per-category data.

How to use a reference

  1. Shape the OPAL output to match the chart (see the opal-visualization

reference of the generate-opal skill for how to produce the right rows).

  1. Read the matching references/query-card-visualization-<type>.md for the exact JSON schema.
  2. Build an object with a single top-level key naming the chart type (e.g.

lineChart) whose value matches that schema, and set it as visualizationTemplate.

Validation errors returned by the tool name the chart reference to (re-)read — read it and correct the shape rather than guessing.