visualization
Scannednpx machina-cli add skill FrankChen021/datastoria/visualization --openclawWORKFLOW (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-expertskill. - Action: Check if
sql-expertskill is loaded.- If NOT loaded: Call the
skilltool 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-expertskill (including Schema Discovery, Schema Fidelity, ProfileEvents handling, and Performance Optimization).
- If NOT loaded: Call the
- Dependency: Valid SQL generation REQUIRES the
b) VALIDATION (MANDATORY):
- ALWAYS call
validate_sqlwith the SQL before including the chart spec in your response. - RETRY LOGIC: If validation fails, retry up to 3 times by fixing the SQL (referring to
sql-expertskill rules) and validating again. - Only proceed to step (c) if validation returns success: true.
c) After validation passes:
- Include the full chart spec in your response using a markdown code block with language
chart-spec. The content must be valid JSON matching the OUTPUT FORMAT below, and must includedatasource: { "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:
- PROHIBITED: Do NOT call
execute_sql. The chart component in the client will automatically execute the query found in thechart-spec. Calling it here wastes tokens and causes duplicate execution.
CHART TYPE RULES
STEP 1: CHECK USER'S EXPLICIT CHART REQUEST (HIGHEST PRIORITY)
If user question contains ANY of these keywords, use the corresponding chart type:
- "line chart" → type: "line" (MANDATORY)
- "bar chart" → type: "bar" (MANDATORY)
- "pie chart" → type: "pie" (MANDATORY)
- "timeseries" or "time series" → type: "line" (MANDATORY)
- "trend" → type: "line" (MANDATORY)
STEP 2: ANALYZE SQL (Only if no explicit chart request in Step 1)
- "line" - Time-based data with trends (DateTime/Date + GROUP BY time dimension; "over time", "by day/month/hour").
- "bar" - Categorical comparisons (GROUP BY categories; "compare", "by category").
- "pie" - Categorical distribution, proportions (single categorical dimension; "distribution", "breakdown", "proportion"; 2 columns: category + numeric value; best for 3-15 categories).
- "table" - Raw data listing (LAST RESORT): user asks for "table" or "list" with NO chart keywords; no numeric aggregations.
CRITICAL RULES
- When legendOption.placement is "bottom" or "right", you MUST include a "values" array: base ["min", "max"]; add "sum"/"count" if SQL uses SUM/COUNT; add "avg" if SQL uses AVG.
- Line/Bar: Use "bottom" for GROUP BY with non-time dimensions, "none" for single metric.
- Pie: legendOption.placement "right"|"bottom"|"inside" (no "none"); omit legendOption.values; use labelOption (show, format) and valueFormat as needed.
OUTPUT FORMAT (include in your response as a 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.
Line/Bar Chart example:
{
"type": "line",
"titleOption": { "title": "Descriptive chart title", "align": "center" },
"width": 6,
"legendOption": { "placement": "bottom", "values": ["min", "max", "sum"] },
"datasource": { "sql": "SELECT ..." }
}
Pie Chart example:
{
"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 ..." }
}
- ❌ NEVER include a chart spec before validate_sql has succeeded.
- ❌ NEVER skip SQL generation if no SQL exists in context.
- ❌ NEVER write SQL in your text response—ALWAYS use the instructions in
sql-expertskill. - ✅ ALWAYS follow: Check for SQL → If missing, Load
sql-expertSkill → Validation → Include chart spec in response. - ✅ If validation fails, retry up to 3 times.
Source
git clone https://github.com/FrankChen021/datastoria/blob/master/src/lib/ai/skills/visualization/SKILL.mdView on GitHub Overview
This skill provides concrete guidelines for creating charts, graphs, plots, and other visual representations. It helps you decide when to use line, bar, or pie charts (including timeseries) and how to structure chart specs so visuals accurately reflect the underlying data.
How This Skill Works
It first detects the requested chart type from user input or derives it from the data analysis. It then ensures a valid SQL query (requiring the sql-expert skill) and validates it with validate_sql; only upon success does it prepare a complete chart-spec payload that the client renders. The actual SQL execution occurs on the client side, not in this step.
When to Use It
- User asks for a line chart or timeseries to show trends over time
- User asks for a bar chart to compare categories
- User requests a pie chart to show proportion or distribution
- User mentions timeseries or time series data
- User wants a trend-focused visualization with multiple series
Quick Start
- Step 1: Detect the explicit chart type requested (line, bar, pie, timeseries) from the user prompt
- Step 2: Generate or obtain SQL; ensure it passes validate_sql via the sql-expert skill and retry if needed
- Step 3: Return a complete chart-spec payload (datasource with the validated SQL) in a chart-spec block for rendering
Best Practices
- Prioritize explicit chart keywords in the prompt (line, bar, pie, timeseries, trend) to set the correct type
- Generate or validate SQL with the sql-expert skill; retry up to 3 times if validate_sql fails
- When legend placement is bottom or right, include a values array (min, max; plus sum/count/avg if used)
- Use bottom alignment with non-time dimensions for line/bar charts, or none only when appropriate
- Provide clear axis labels and titles (titleOption) in the chart spec to improve readability
Example Use Cases
- Line chart showing monthly revenue over a year
- Bar chart comparing sales by product category
- Pie chart illustrating market share by region
- Timeseries visualization of daily active users
- Trend chart tracking stock prices across quarters