New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Dataviz Design Guidance

by QwenLM in QwenLM/qwen-code

Guides chart, dashboard and map design: pick the simplest form for the question, state the finding in the title, and check palettes with a local validator.

Apache-2.0Auto-check passedData & Analytics

Install Dataviz Design Guidance

skills CLI
$ npx skills add QwenLM/qwen-code --skill dataviz -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install QwenLM/qwen-code dataviz --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/QwenLM/qwen-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/core/src/skills/bundled/dataviz .claude/skills/dataviz && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
dataviz
GitHub stars
28k
Token cost
~514 tokens
SKILL.md length
226 words
Files
6 (incl. scripts, references)
Skills in repo
41
Repo updated
First seen
Licence
Apache-2.0

At a glance

Guides chart, dashboard and map design: pick the simplest form for the question, state the finding in the title, and check palettes with a local validator.

  • Works in 5 steps: Identify the analytic task: comparison,… → Choose the simplest chart form that… → Write the finding into the title,… → …
  • Building a chart or dashboard and choosing the right chart type
  • SKILL.md covers Workflow, Palette Validation and Mark Rules
  • Runs JavaScript scripts from its folder; calls node

What it does

Before producing any chart, dashboard, map or other visualization, the agent names the analytic task, such as comparison, trend, distribution, relationship, ranking, part-to-whole, geography or status monitoring, and picks the simplest form that answers it. The finding goes into the title, subtitle, axis label or a direct annotation so a viewer sees what changed or what decision the chart supports.

Colors come from references/palette.md, or a custom palette is checked with scripts/validate_palette.js, run through Node with a list of hex colors and a light or dark mode. FAIL means the palette must change, and WARN is acceptable only if labels, shape, texture or ordering also carry the distinction. Mark rules call for categorical colors on unordered groups, direct labels over legends when there are few series, quiet gridlines, and no dual axes unless the transformation is explained. references/anti-patterns.md is checked before the design is finished.

When your agent uses it

  • Building a chart or dashboard and choosing the right chart type
  • Checking that a custom color palette is readable and distinguishable
  • Designing a map or status-monitoring view
  • Reviewing a visualization for common design mistakes

Example prompts

  • “Make a line chart of monthly signups and put the main finding in the title.”
  • “Validate the palette #1d4ed8, #b45309 and #166534 in light mode.”
  • “Redesign this dashboard so the cards align and number formats are consistent.”

Requirements

  • Node.js, to run the palette validator script

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Identify the analytic task: comparison, trend, distribution, relationship,
  2. Choose the simplest chart form that answers that task. Read
  3. Write the finding into the title, subtitle, axis label, or direct annotation.
  4. Pick colors from references/palette.md, or validate any custom palette with
  5. Check references/anti-patterns.md before finalizing the design.

What it can do on your machine

Read from SKILL.md and the folder at commit 6386bb2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Dataviz Design Guidance loads about 514 tokens when it runs, and up to ~1.4k if it reads all its reference files. Until then it costs about 31 tokens; SKILL.md has 226 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~31
When it runs · the whole SKILL.md, loaded when a task matches
~514
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from QwenLM/qwen-code at commit 6386bb2, republished under its Apache-2.0 licence (© QwenLM). 226 words, ~514 tokens.

Download SKILL.mdSave it as .claude/skills/dataviz/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
dataviz
description
Design guidance for charts, graphs, dashboards, maps, and data visualizations, including a local palette validator.
when_to_use
When creating or revising charts, graphs, dashboards, maps, plots, inline SVG, D3, Plotly, Recharts, matplotlib, or any Artifact page that visualizes data.

Dataviz

Use this skill before producing a chart, dashboard, map, or data visualization.

Workflow

  1. Identify the analytic task: comparison, trend, distribution, relationship, ranking, part-to-whole, geography, or status monitoring.
  2. Choose the simplest chart form that answers that task. Read references/choosing-a-form.md when the form is not obvious.
  3. Write the finding into the title, subtitle, axis label, or direct annotation. A viewer should know what changed, what is high or low, or what decision the chart supports.
  4. Pick colors from references/palette.md, or validate any custom palette with the script below.
  5. Check references/anti-patterns.md before finalizing the design.

Palette Validation

Resolve paths relative to the skill base directory shown above this skill body. Do not assume $QWEN_SKILL_ROOT is set for normal shell commands.

Run:

bash
node <skill-base-directory>/scripts/validate_palette.js '#1d4ed8,#b45309,#166534' --mode light

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.

Mark Rules

  • Use categorical palettes for unordered groups; use sequential or diverging ramps only for ordered values.
  • Prefer direct labels over legends when the chart has a small number of series.
  • Keep gridlines subtle and fewer than the data marks.
  • Avoid dual axes unless both series share a clearly explained transformation.
  • Do not rely on color alone for critical distinctions.
  • Keep dashboards scan-friendly: align cards, use consistent number formats, and reserve saturated color for important state changes.

© QwenLM, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (scripts, references) in packages/core/src/skills/bundled/dataviz of QwenLM/qwen-code.

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

Open the folder on GitHubat commit 6386bb2

Compare with similar skills

Dataviz Design Guidance next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Dataviz Design Guidance compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Dataviz Design Guidance this skillQwenLM/qwen-code28k—~514Automated safety check: PassApache-2.0
Mvizmatsonj/mviz227—~11kAutomated safety check: PassNone
Creating Dashboardsancoleman/ai-design-components525—~3.5kAutomated safety check: PassMIT
D3 Visualizationbenchflow-ai/skillsbench1.8k—~1.5kAutomated safety check: PassApache-2.0
Cs448b Visualizationsundial-org/skills153—~684Automated safety check: PassNone
Bio Data Visualization Color PalettesGPTomics/bioSkills1.2k2 repos~3.6kAutomated safety check: PassMIT

Similar skills

  • Mviz

    matsonj/mviz

    A chart & report builder for AI. An agent skill from matsonj/mviz.

    227 GitHub stars~11k tokensUpdated 4 mo ago
    Data & AnalyticsAuto-check passed

  • Creating Dashboards

    ancoleman/ai-design-components

    Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts.

    525 GitHub stars~3.5k tokensUpdated 10 mo ago
    Data & AnalyticsAuto-check passed

  • D3 Visualization

    benchflow-ai/skillsbench

    Build deterministic, verifiable data visualizations with D3.js (v6).

    1.8k GitHub stars~1.5k tokensUpdated 2 mo ago
    Data & AnalyticsAuto-check passed

  • Cs448b Visualization

    sundial-org/skills

    Data visualization design based on Stanford CS448B. An agent skill from sundial-org/skills.

    153 GitHub stars~684 tokensUpdated 2 mo ago
    Data & AnalyticsAuto-check passed

  • Bio Data Visualization Color Palettes

    GPTomics/bioSkills

    Select colormaps and qualitative palettes for scientific figures using perceptual-uniformity, color-vision-deficiency safety, and luminance-monotonicity criteria.

    1.2k GitHub starsUsed in 2 repos~3.6k tokens
    Data & AnalyticsAuto-check passed

  • Data Visualization

    Owl-Listener/designer-skills

    Select chart types and design data encodings — marks, axes, labels, and accessible chart styling.

    2.9k GitHub starsUsed in 1 repo~513 tokens
    Data & AnalyticsAuto-check passed

More from QwenLM/qwen-code

All 41 skills in this repo

  • Agent Feature Reproduction

    QwenLM/qwen-code

    Reproduces a feature from Codex or Claude Code in Qwen Code by running the reference agent under capture, reading the traces, then implementing matching behavior.

    28k GitHub stars~1.5k tokensUpdated today
    Auto-check passed

  • Qwen Code E2E Testing

    QwenLM/qwen-code

    Guides end-to-end testing of the Qwen Code CLI in headless mode with real model calls, MCP test servers and inspection of raw API traffic.

    28k GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Repo Hygiene Scan and Fix

    QwenLM/qwen-code

    Scheduled CI skill that scans a repository for small, certain docs, test and code hygiene issues and fixes them on one branch with a commit per finding.

    28k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Qwen Code Desktop Brand Builder

    QwenLM/qwen-code

    Builds a rebranded Qwen Code desktop package from the Tauri shell using only a brand id and a logo, with sensible derived defaults.

    28k GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Qwen Code Memory Leak Debugger

    QwenLM/qwen-code

    Walks through capturing and comparing V8 heap snapshots to find memory leaks in the Qwen Code Node.js CLI, using tmux and the chrome-devtools CLI.

    28k GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • tmux Real User Testing

    QwenLM/qwen-code

    Drives Qwen Code in a real tmux session the way a user would and saves a readable step-by-step transcript of each screen for maintainers to review.

    28k GitHub stars~2.3k tokensUpdated today
    Auto-check passed

Categories

Questions about Dataviz Design Guidance

What does Dataviz Design Guidance do?

Guides chart, dashboard and map design: pick the simplest form for the question, state the finding in the title, and check palettes with a local validator. Before producing any chart, dashboard, map or other visualization, the agent names the analytic task, such as comparison, trend, distribution, relationship, ranking, part-to-whole, geography or status monitoring, and picks the simplest form that answers it. The finding goes into the title, subtitle, axis label or a direct annotation so a viewer sees what changed or what decision the chart supports.

When should I use Dataviz Design Guidance?

Dataviz Design Guidance fits situations like: building a chart or dashboard and choosing the right chart type; checking that a custom color palette is readable and distinguishable; designing a map or status-monitoring view; reviewing a visualization for common design mistakes.

How do I install Dataviz Design Guidance in Claude Code?

Run `npx skills add QwenLM/qwen-code --skill dataviz -a claude-code`. Or copy the skill folder (packages/core/src/skills/bundled/dataviz in QwenLM/qwen-code) into .claude/skills/dataviz in your project. Claude Code loads it when a task matches its description.

How do I install Dataviz Design Guidance in Codex?

Run `npx skills add QwenLM/qwen-code --skill dataviz -a codex`. Or copy the skill folder (packages/core/src/skills/bundled/dataviz in QwenLM/qwen-code) into .agents/skills/dataviz in your project. Codex loads it when a task matches its description.

Can I use Dataviz Design Guidance in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add QwenLM/qwen-code --skill dataviz -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/dataviz, .gemini/skills/dataviz, .github/skills/dataviz and .opencode/skills/dataviz in your project.

What does Dataviz Design Guidance need to run?

Going by SKILL.md and its folder, Dataviz Design Guidance needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js, to run the palette validator script.

Does Dataviz Design Guidance access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Dataviz Design Guidance safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Dataviz Design Guidance use?

Dataviz Design Guidance is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Dataviz Design Guidance use?

About 514 tokens (SKILL.md is roughly 2.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 841 tokens, read only when the agent opens those files.

What are the alternatives to Dataviz Design Guidance?

Skills that share tags, products or a category with Dataviz Design Guidance: Mviz (matsonj/mviz, 227 stars), Creating Dashboards (ancoleman/ai-design-components, 525 stars), D3 Visualization (benchflow-ai/skillsbench, 1.8k stars) and Cs448b Visualization (sundial-org/skills, 153 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Dataviz Design Guidance?

QwenLM (a GitHub organization) maintains it in QwenLM/qwen-code, which has 28,397 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on October 10, 2026.

Source: QwenLM/qwen-code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.