mcpField
D
data-viz-agent

data-viz-agent

github.com/podoData & databases29164 installsUpdated 1d ago
Repository

About data-viz-agent

data-viz-agent is a data visualization engineering skill for charting across D3.js, Chart.js, Matplotlib, and Plotly. It selects chart types based on data relationships and applies perceptual accuracy and accessibility considerations.

Key features

  1. 01Visualization across four charting libraries
  2. 02Chart selection based on data relationships
  3. 03Cleveland-McGill perceptual accuracy hierarchy
  4. 04WCAG AA contrast checks
  5. 05Colorblind-safe palettes by default

Use cases

  1. 01Choose charts for comparisons or distributions
  2. 02Visualize data relationships in charts
  3. 03Create accessible visualizations with colorblind-safe colors

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill data-viz-agent

After installing, type/data-viz-agentin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

data-viz-agent

Catalogue stub — full skill: rohitg00/awesome-claude-code-toolkit

Decision tree

  1. Is the full skill already installed? Check whether the skill at this location still has a das: block:

    • Global: grep -q "^das:" ~/.agents/skills/data-viz-agent/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • Project: grep -q "^das:" .agents/skills/data-viz-agent/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • No das: block → full skill installed, invoke it and proceed
    • das: block present → go to step 2

  2. Detect scope, then install:

    To detect scope:

    [ -e ~/.agents/skills/data-viz-agent ] && echo "global" || echo "project"

    Global (installed with -g):

    npx skills add rohitg00/awesome-claude-code-toolkit --skill data-viz-agent -g -y

    Project (installed without -g):

    npx skills add rohitg00/awesome-claude-code-toolkit --skill data-viz-agent -y

    Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

  • Skill name: data-viz-agent
  • Trigger phrases: "data visualization agent", "Chart.js", "Plotly", "Matplotlib", "data chart"

What it does

Full data visualization engineering agent that works across D3.js, Chart.js, Matplotlib, and Plotly. Applies the Cleveland-McGill perceptual accuracy hierarchy to choose chart types, enforces WCAG AA contrast for accessibility, uses colorblind-safe palettes by default, and selects the right visualization for the underlying data relationship (comparison, distribution, composition, relationship).

Comments

Markdown supported