Visualization

This one handles the full workflow for turning data into charts: it generates or reuses SQL (calling the sql-expert skill if needed), validates the query, then outputs a chart-spec JSON block that the client renders automatically. It picks chart types based on explicit user requests first (line, bar, pie, timeseries), then falls back to analyzing the SQL structure. The mandatory validation step with retry logic is solid, it prevents broken queries from reaching the UI. One thing to watch: it's opinionated about legend placement and values arrays, which keeps charts consistent but might feel rigid if you want custom layouts. Works well when you need reliable visualizations without manual chart configuration.

GitHub stars: 320
last updated: May 14, 2026

View on GitHub

Install

$ npx -y skills add frankchen021/datastoria --skill visualization --agent claude-code

Installs into .claude/skills of the current project.

Files

WORKFLOW (MANDATORY ORDER)

a) Generate or obtain SQL:

CHECK CONTEXT FIRST: If valid SQL exists in the context (explicitly provided by the user or from a previous message), USE IT DIRECTLY and skip to step (b).
IF NO SQL FOUND: You must generate it.
- Dependency: Valid SQL generation REQUIRES the sql-expert skill.
- Action: Check if sql-expert skill is loaded.
  - If NOT loaded: Call the skill tool with ['sql-expert'] IMMEDIATELY. Do not proceed to generate SQL until the skill is loaded.
  - If ALREADY loaded: Generate the SQL strictly following the rules in the sql-expert skill (including Schema Discovery, Schema Fidelity, ProfileEvents handling, and Performance Optimization).
For system.query_log visualization requests: Do NOT call search_query_log. Load the clickhouse-system-queries skill, then load references/system-query-log.md via skill_resource, generate the SQL, and validate it.