Visualization
Gibt ClickHouse chart-spec JSON für Linie/Balken/Kuchen aus – wird nur innerhalb der DataStoria-App gerendert
Funktioniert mit Setup
Was es kann
Wandelt eine ClickHouse SQL-Abfrage in einen `chart-spec` JSON-Block um, der den Diagrammtyp (line, bar, pie, table) zuerst aus expliziten Benutzer-Keywords und dann aus der Abfrageform auswählt und Titel, Breite und Legendenplatzierung nach festen Regeln festlegt. Wird ausgelöst, wenn der Benutzer ein Diagramm, einen Graphen, eine Plot, einen Trend oder eine Zeitreihe von ClickHouse-Daten anfordert. Es ist eine In-App-Fähigkeit für die DataStoria-Web-UI: Der obligatorische `validate_sql`-Schritt und der `chart-spec`-Renderer befinden sich beide in dieser App, sodass der ausgegebene Block außerhalb von DataStoria als inaktiver Text verbleibt.
Testbericht
In ein temporäres HOME geklont und das Skill-Verzeichnis kopiert; Frontmatter wurde über PyYAML mit vorhandenem name+description geparst, und die drei vom Body genannten Ressourcen (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md) gaben alle HTTP 200 zurück – keine curl|sh, keine base64, keine fest codierten /Users-Pfade. Ich schrieb zwei Artefakte für dieselbe Anfrage (tägliche Commits Feb 2021, SQL bereits geliefert, "as a line chart"): Die Baseline gab ein ```python matplotlib-Skript plus einen Platzhalter ```mermaid xychart aus, während der Skill-gesteuerte Lauf einen einzelnen ```chart-spec JSON-Block mit type/titleOption/width/legendOption.placement:"none"/datasource.sql ausgab. Ich konnte den obligatorischen Schritt (b) `validate_sql` des Workflows NICHT ausführen – grep fand ihn in src/lib/ai/tools/clickhouse/validate-sql.ts, einem DataStoria-App-Tool, das ein Live-ClickHouse benötigt, und grep fand `chart-spec` nur von src/components/chat/message/message-markdown.tsx geparst – sodass außerhalb dieser App die Ausgabe des Skills ein nicht gerenderter Code-Zaun ist und der Vergleich keine echte Fähigkeitsmessung darstellt. Auslöser-Formulierungen beurteilt: "Show me a line chart of query duration over the last 24h from system.query_log" (laden, korrekt), "Visualize the top 10 tables by disk usage as a bar chart" (laden, korrekt), "Give me a pie chart of ClickHouse queries by user" (laden, korrekt), "Explain why my ClickHouse merge is slow" (überspringen, korrekt), "Plot my CSV sales data as a bar chart with matplotlib" (ich würde es laden – die Beschreibung sagt nur "charts, graphs, plots" ohne ClickHouse-Qualifikator, daher Fehlalarm bei generischer Diagrammerstellung) = 4/5.
Getestet am: 2026-07-31 · Claude Code 2.x (agent harness)
Installation
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.
Befehle & Beispiel-Prompts
/visualizationGibt ClickHouse chart-spec JSON für Linie/Balken/Kuchen aus – wird nur innerhalb der DataStoria-App gerendert
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Chart this data as a time seriesCreate a bar chart of quarterly revenueTurn this dataset into a pie chart