shivang0/dataviz

Analysis updated 2026-05-18

★ 1JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((dataviz skill))
    What it is
      Claude Code skill files
      Reference material only
      Version 2.1.198 extract
    Reference docs
      Chart type selection
      Color formula
      Mark specs and anatomy
      Anti-patterns
    Components
      Stat tile and KPI specs
      Interaction rules
      Accessibility guidelines
    Scripts
      Palette validator JS
      Palette validator Python

mindmap root((dataviz skill)) What it is Claude Code skill files Reference material only Version 2.1.198 extract Reference docs Chart type selection Color formula Mark specs and anatomy Anti-patterns Components Stat tile and KPI specs Interaction rules Accessibility guidelines Scripts Palette validator JS Palette validator Python

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Read the exact rules Claude Code follows when choosing chart types for a given dataset.

USE CASE 2

Understand how the dataviz skill's color method works to replicate it in your own chart designs.

USE CASE 3

Embed the palette validator script in a generated chart artifact to check colors via the browser console.

USE CASE 4

Study the skill file structure to understand how to build similar custom skills for Claude Code.

What is it built with?

JavaScriptNode.jsPython

How does it compare?

	shivang0/dataviz	acip/slack-claude-agent	alexanderdaly/neurofhe-relay
Stars	1	1	1
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	moderate	easy
Complexity	1/5	3/5	2/5
Audience	developer	developer	researcher

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

In plain English

This repository contains the extracted source files for the built-in dataviz skill in Claude Code version 2.1.198. Claude Code is Anthropic's AI coding tool, and skills are built-in procedures it follows when given specific tasks. The dataviz skill is the set of rules Claude Code reads when a user asks it to create charts, graphs, dashboards, or data visualizations. The repository mirrors the exact on-disk layout of the skill: a main entry file called SKILL.md that outlines a seven-step procedure, plus several reference documents and two utility scripts. The reference documents cover how to choose the right chart type, a method for assigning colors to charts (described as four jobs and six checks), a palette reference file, rules for drawing marks and chart anatomy, specifications for stat tiles and KPI summary components, interaction and accessibility guidelines, and a list of anti-patterns to avoid. The two scripts are a palette validator written in both JavaScript (Node.js) and Python. The JavaScript version can run as a command-line tool or be embedded inside a generated chart as a browser module. Its function is limited to logging diagnostics to the browser console, and the README notes it does not write to the page or execute arbitrary code. The README describes this as reference material only, meaning it is a read archive of the skill's files rather than an installable package. If you want to understand how Claude Code decides what kind of chart to build or how it chooses and validates colors, the files here describe the rules it follows.

Copy-paste prompts

Prompt 1

I'm reading the SKILL.md file in this dataviz skill. Walk me through the seven steps it follows when a user asks Claude Code to generate a chart.

Prompt 2

Explain the color-formula.md method: what are the four jobs of color in a chart and what do the six checks verify?

Prompt 3

I want to use validate_palette.js as a standalone Node CLI. What arguments does it accept and what does its output look like?

Prompt 4

I want to create a custom Claude Code skill similar to this dataviz skill. What file structure, naming conventions, and SKILL.md format do I need to follow?

Prompt 5

What does the anti-patterns.md file cover and which of the listed patterns are most commonly used by mistake in AI-generated charts?

Frequently asked questions

What is dataviz?

An extracted copy of the Claude Code dataviz skill files, showing the design rules and procedures the AI assistant follows when generating charts and data visualizations.

What language is dataviz written in?

Mainly JavaScript. The stack also includes JavaScript, Node.js, Python.

How hard is dataviz to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is dataviz for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub shivang0 on gitmyhub

Verify against the repo before relying on details.