Visualization
Emits ClickHouse chart-spec JSON for line/bar/pie — renders only inside the DataStoria app
Test report
- Verdict
- Works with setup
- Score
- Tested
- Jul 31, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · 4889b76
Cloned into a throwaway HOME and copied the skill dir; frontmatter parsed via PyYAML with name+description present, and the three resources the body names (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md) all returned HTTP 200 — no curl|sh, no base64, no hardcoded /Users paths. I wrote two artifacts for the same request (daily commits Feb 2021, SQL already supplied, "as a line chart"): the baseline emitted a ```python matplotlib script plus a placeholder ```mermaid xychart, while the skill-followed run emitted a single ```chart-spec JSON block with type/titleOption/width/legendOption.placement:"none"/datasource.sql. I could NOT execute the workflow's mandatory step (b) `validate_sql` — grep put it in src/lib/ai/tools/clickhouse/validate-sql.ts, a DataStoria app tool needing a live ClickHouse, and grep found `chart-spec` parsed only by src/components/chat/message/message-markdown.tsx — so outside that app the skill's output is an unrendered code fence and the comparison is not a real capability measurement. Trigger phrasings judged: "Show me a line chart of query duration over the last 24h from system.query_log" (load, correct), "Visualize the top 10 tables by disk usage as a bar chart" (load, correct), "Give me a pie chart of ClickHouse queries by user" (load, correct), "Explain why my ClickHouse merge is slow" (skip, correct), "Plot my CSV sales data as a bar chart with matplotlib" (I would load it — the description says only "charts, graphs, plots" with no ClickHouse qualifier, so it false-positives on generic charting) = 4/5.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 4/5
- Triggers reliably 4/5
- Output vs. baseline 3/10
- Docs & honesty 3/5
What Visualization does
Turns a ClickHouse SQL query into a `chart-spec` JSON block that picks chart type (line, bar, pie, table) from explicit user keywords first and query shape second, and sets title, width and legend placement by fixed rules. Triggers when the user asks for a chart, graph, plot, trend or timeseries of ClickHouse data. It is an in-app skill for the DataStoria web UI: the mandatory `validate_sql` step and the `chart-spec` renderer both live in that app, so outside DataStoria the emitted block stays inert text.
How to install Visualization
git clone --depth 1 https://github.com/FrankChen021/datastoria.git /tmp/visualization-src
mkdir -p ~/.claude/skills
cp -R /tmp/visualization-src/resources/skills/visualization ~/.claude/skills/visualization
cp -R /tmp/visualization-src/resources/skills/sql-expert ~/.claude/skills/sql-expert
cp -R /tmp/visualization-src/resources/skills/clickhouse-system-queries ~/.claude/skills/clickhouse-system-queries
# The last two copies are NOT optional: the visualization body orders the agent to load
# `sql-expert` before generating SQL, and `clickhouse-system-queries` for system.query_log work.
# HOST DEPENDENCY — this is a DataStoria in-app skill, not a standalone Claude Code skill.
# Step (b) of the workflow is a mandatory `validate_sql` tool call; that tool is defined in
# src/lib/ai/tools/clickhouse/validate-sql.ts and needs a live ClickHouse connection.
# The `chart-spec` fenced block it outputs is parsed only by
# src/components/chat/message/message-markdown.tsx. In a plain Claude Code terminal the block
# renders as inert text and no chart is drawn.
# To get the intended behaviour, run DataStoria itself (npm install && npm run dev in
# /tmp/visualization-src) and configure a ClickHouse connection plus an AI model.
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Visualization
-
/visualizationEmits ClickHouse chart-spec JSON for line/bar/pie — renders only inside the DataStoria app
It also activates on plain-language prompts like these:
-
Chart this data as a time series -
Create a bar chart of quarterly revenue -
Turn this dataset into a pie chart
Frequently asked questions
- Is the Visualization skill free?
- Yes. The skill itself is free from FrankChen021/datastoria. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Visualization work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 31, 2026. Verdict: Works with setup. Cloned into a throwaway HOME and copied the skill dir; frontmatter parsed via PyYAML with name+description present, and the three resources the body names (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md) all returned HTTP 200 — no curl|sh, no base64, no hardcoded /Users paths. I wrote two artifacts for the same request (daily commits Feb 2021, SQL already supplied, "as a line chart"): the baseline emitted a ```python matplotlib script plus a placeholder ```mermaid xychart, while the skill-followed run emitted a single ```chart-spec JSON block with type/titleOption/width/legendOption.placement:"none"/datasource.sql. I could NOT execute the workflow's mandatory step (b) `validate_sql` — grep put it in src/lib/ai/tools/clickhouse/validate-sql.ts, a DataStoria app tool needing a live ClickHouse, and grep found `chart-spec` parsed only by src/components/chat/message/message-markdown.tsx — so outside that app the skill's output is an unrendered code fence and the comparison is not a real capability measurement. Trigger phrasings judged: "Show me a line chart of query duration over the last 24h from system.query_log" (load, correct), "Visualize the top 10 tables by disk usage as a bar chart" (load, correct), "Give me a pie chart of ClickHouse queries by user" (load, correct), "Explain why my ClickHouse merge is slow" (skip, correct), "Plot my CSV sales data as a bar chart with matplotlib" (I would load it — the description says only "charts, graphs, plots" with no ClickHouse qualifier, so it false-positives on generic charting) = 4/5.
- What is the Visualization SkillProof Score?
- 5.6/10 — installs cleanly 4/5, triggers reliably 4/5, output vs. baseline 3/10, docs & honesty 3/5.
- How do I install Visualization?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Visualization with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.