frankchen021/visualization
Rules for charts and visualization. Use when the user asks for charts, graphs, plots, or visual representations (line, bar, pie, timeseries).
npx skills add https://github.com/FrankChen021/datastoria --skill visualization
a) Generate or obtain SQL:
sql-expert skill.sql-expert skill is loaded.skill tool with ['sql-expert'] IMMEDIATELY. Do not proceed to generate SQL until the skill is loaded.sql-expert skill (including Schema Discovery, Schema Fidelity, ProfileEvents handling, and Performance Optimization).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.b) VALIDATION (MANDATORY):
validate_sql with the SQL before including the chart spec in your response.sql-expert skill rules) and validating again.c) After validation passes:
chart-spec. The content must be valid JSON matching the OUTPUT FORMAT below, and must include datasource: { "sql": "<the validated SQL>" }. Derive type, titleOption, legendOption, etc. from the CHART TYPE RULES and OUTPUT FORMAT above. Do not call any tool for this—put the complete spec in your reply.d) Execution:
execute_sql. The chart component in the client will automatically execute the query found in the chart-spec. Calling it here wastes tokens and causes duplicate execution.If user question contains ANY of these keywords, use the corresponding chart type:
chart-spec code block)Put the full chart spec in a markdown code block with language chart-spec. The JSON must include datasource.sql (the validated SQL). The client parses this block to render the chart.
{
"type": "line",
"titleOption": { "title": "Descriptive chart title", "align": "center" },
"width": 6,
"legendOption": { "placement": "bottom", "values": ["min", "max", "sum"] },
"datasource": { "sql": "SELECT ..." }
}
{
"type": "pie",
"titleOption": { "title": "Distribution by Category", "align": "center" },
"width": 6,
"legendOption": { "placement": "right" },
"labelOption": { "show": true, "format": "name-percent" },
"valueFormat": "short_number",
"datasource": { "sql": "SELECT ..." }
}
sql-expert skill.sql-expert Skill → Validation → Include chart spec in response.Take frankchen021/visualization from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.