Skip to content
Get packs

Dataviz Design Guide

Guides agents to pick chart types and colour palettes, and checks palettes for readability.

Source Download skill
Repository
QwenLM/qwen-code
Stars
28,880
Licence
Apache-2.0
Files
6 files

What it does

When an agent is asked to make a chart, dashboard, map, or other data visualization, this skill makes it follow a set of visualization best practices first. It helps the agent choose the simplest chart type for the question, write a clear takeaway into the title, and pick colours from a bundled reference palette. It can also run a small local script 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.

Great for

  • Analysts or designers who ask an agent to build charts or dashboards and want more readable results
  • Developers producing D3, Plotly, Recharts, matplotlib, SVG or Artifact visualizations
  • Teams that need a quick accessibility check on a custom colour palette

Skip it if

  • Users who need a fully automated, guaranteed-accessible design: the validator is a heuristic and its WARN results still need human judgement
  • Situations needing statistical analysis or data cleaning, since this skill only covers visual design

Try asking

  • “Make a bar chart comparing Q3 sales across four regions and suggest a title that states the finding”
  • “Check whether the palette #1d4ed8, #b45309, #166534 works on a light dashboard”
  • “Review this dashboard for chart anti-patterns before I share it”
  • “Pick a chart type for showing how revenue is split between product lines”
Step-by-step guide: how to use Dataviz Design GuideInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the Apache-2.0 licence and an attribution note.

    dataviz.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dataviz.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dataviz.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for the analytic task (trend, ranking, part-to-whole) so the agent picks an appropriate chart form
  • Give the agent your custom hex colours so it can run the validator rather than guessing
  • Treat WARN results as acceptable only if labels or shapes also carry the distinction

What's inside

  • references/anti-patterns.md
  • references/choosing-a-form.md
  • references/palette.md
  • scripts/validate_palette.js
  • scripts/validate_palette.test.js
  • SKILL.md

Redistributed unmodified from QwenLM/qwen-code under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.