mcpField
C
claud3

claud3

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

About claud3

claud3 is a skill for generating D3.js charts using Edward Tufte's data-visualization principles. It selects from more than 80 chart types based on the data question and produces responsive, self-contained HTML with D3 v7.

Key features

  1. 01Selects from 80+ chart types
  2. 02Applies Tufte visualization principles
  3. 03Generates single-file D3 v7 HTML
  4. 04Uses dark themes and direct labels
  5. 05Supports interactive chart exploration

Use cases

  1. 01Choose a chart type for a data question
  2. 02Generate responsive D3.js visualizations
  3. 03Explore and refine charts in playground mode

Install

Copy the command and run it in a terminal.

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

After installing, type/claud3in Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

claud3

Catalogue stub — full package: dtran320/claud3

Decision tree

  1. Is the package already installed? Check: ~/.design-agent-skills/skills/claud3/SKILL.md exists.

    • Yes → invoke claud3 and proceed
    • No → go to step 2

  2. Do you have shell access?

    • Yes → run the install command below, then invoke the skill
    • No → show the install command; in Claude Code, send it as a chat message starting with ! — add -g for global install or omit for project-only

Install command

npx skills add dtran320/claud3

Invoke after install

  • Skill name: claud3
  • Trigger phrases: "claud3", "D3 Tufte", "80 chart types", "D3 dark theme"

What it does

Applies Edward Tufte's data visualization principles to D3.js chart generation. Analyzes the underlying data question to select the most appropriate chart type from a library of 80+ options, then produces self-contained single-file HTML using D3 v7 with a dark theme, responsive layout, direct data labels (no separate legend), and contextual annotations. Includes a playground mode for interactive exploration and refinement.

When NOT to use

  • Multi-library visualization agents — use data-viz-agent instead
  • AntV/G2 charts — use antvis-chart-skills instead
  • Quick single charts without Tufte constraints — use d3js-skill instead

Comments

Markdown supported