mcpbeat Sign in

Visualization Agent Skill

Rules for charts and visualization. Use when the user asks for charts, graphs, plots, or visual representations (line, bar, pie, timeseries).

1k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
325
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/FrankChen021/datastoria --skill visualization

The instruction itself

8 sections, as written by the author

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.

b) VALIDATION (MANDATORY):

  • ALWAYS call validate_sql with 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-expert skill 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 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:

  • PROHIBITED: Do NOT call 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.

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-expert skill.
  • ✅ ALWAYS follow: Check for SQL → If missing, Load sql-expert Skill → Validation → Include chart spec in response.
  • ✅ If validation fails, retry up to 3 times.

Other skills for the same job

different authors, same section of the catalogue
XLSX
by anthropics
vendor ×15

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas

5k tokens scripts
XLSX
by w95
×7

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \"the xlsx in my downloads\") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.

3k tokens
Raffle Winner Picker
by frostant
×5

Picks random winners from lists, spreadsheets, or Google Sheets for giveaways, raffles, and contests. Ensures fair, unbiased selection with transparency.

949 tokens
Fda Database
by christophacham
×4

Query openFDA API for drugs, devices, adverse events, recalls, regulatory submissions (510k, PMA), substance identification (UNII), for FDA regulatory data analysis and safety research.

32k tokens scripts
Matlab
by christophacham
×4

MATLAB and GNU Octave numerical computing for matrix operations, data analysis, visualization, and scientific computing. Use when writing MATLAB/Octave scripts for linear algebra, signal processing, image processing, differential equations, optimization, statistics, or creating scientific visualizations. Also use when the user needs help with MATLAB syntax, functions, or wants to convert between MATLAB and Python code. Scripts can be executed with MATLAB or the open-source GNU Octave interpreter.

25k tokens
Umap Learn
by ComeOnOliver
×4

UMAP dimensionality reduction. Fast nonlinear manifold learning for 2D/3D visualization, clustering preprocessing (HDBSCAN), supervised/parametric UMAP, for high-dimensional data.

14k tokens
D3 Viz
by chrisvoncsefalvay
×3

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

20k tokens
Alphafold Database
by christophacham
×3

Access AlphaFold 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), for drug discovery and structural biology.

7k tokens

How to use it

Copy the folder

Take frankchen021/visualization from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

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.