How to use the Dataviz Design Guide agent skill

What does the dataviz skill make the agent do?

When the skill is active, the agent first identifies the analytic task, such as comparison, trend, distribution, relationship, ranking, part-to-whole, geography, or status monitoring. It then chooses the simplest chart form that answers that task, and writes the finding into the title, subtitle, axis label, or a direct annotation so a viewer knows what changed or what is high or low.

For colour, the agent picks from a bundled reference palette or validates a custom palette with a local script. Before finalizing, it checks a list of common design mistakes.

• Uses categorical palettes for unordered groups and sequential or diverging ramps only for ordered values.
• Prefers direct labels over legends when a chart has few series.
• Keeps gridlines subtle and avoids dual axes unless the transformation is clearly explained.
• Does not rely on colour alone for critical distinctions.

How do you install the dataviz skill?

Download the ZIP file from this page. Then choose one of the two options below.

For a personal setup, unzip it into ~/.claude/skills/. For a single project, unzip it into the .claude/skills/ folder inside that project.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills

How do you trigger the skill with natural requests?

You do not need a special command. The skill is meant to activate when you ask for a chart, graph, dashboard, map, plot, inline SVG, D3, Plotly, Recharts, matplotlib, or any Artifact page that visualizes data. Ask for the visual in plain language and name the tool you want if you have one in mind.

Good requests say what question the visual should answer and who will read it. The agent can then apply the title and chart-form guidance to your request.

• Make a bar chart comparing monthly sign-ups by region for the leadership review.
• Build a Plotly dashboard of weekly support tickets with one card per status.
• Draw a choropleth of unemployment rates by county using D3.
• Create a matplotlib scatter plot of ad spend against conversions.

How do you run the palette validator?

The skill includes a local script, scripts/validate_palette.js, that checks a custom colour set for readability, including contrast on light or dark backgrounds and how well colours hold up for people with colour vision deficiencies. You need Node.js installed to run it. The agent resolves the script path relative to the skill folder, so you normally only need to ask for a palette check.

To run it yourself, pass a comma-separated list of hex colours and a mode. This example checks three colours on a light background:

• Treat FAIL as a required palette change.
• Treat WARN as acceptable only when the chart also uses labels, shape, texture, ordering, or another secondary encoding.

What are good examples of using the skill?

The skill helps most when you have a real chart to make and want a second look at its design. Typical uses include choosing a form for a new analysis, fixing a cluttered dashboard, and checking whether a brand palette works for colour-blind readers.

• Pick between a bar chart and a line chart for a quarterly revenue trend.
• Turn an unsorted column chart of product categories into a sorted horizontal bar chart.
• Check a custom four-colour palette for a stakeholder deck before it goes into a D3 build.
• Review an existing dashboard for unlabeled units, missing time windows, or dual axes.

What are the limits and safety notes?

The skill runs one script and does not use the network, according to its listing. Read the script before you run it if your environment requires that. The validator is a heuristic, so its WARN results still need human judgement, and it does not give a guaranteed-accessible design.

The skill covers visual design only. It does not do statistical analysis or data cleaning, so check your numbers separately.

• Requires Node.js to run the palette script.
• Runs scripts: yes. Uses network: no.
• Does not replace statistical checks or data cleaning.