Agent skill · design visual · sickn33

claude-d3js-skill

This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js.

Why this skill is useful

Codifies specific patterns and techniques for using d3.js that the AI could infer but doesn't have to guess.

What it needs

About 1k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.

What this skill does

D3.js Visualisation Detailed Guide Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely. When to use d3.js Use d3.js for: Custom visualisations requiring unique visual encodings or layouts Interactive explorations with complex pan, zoom, or brush behaviours Network/graph visualisations (force-directed layouts, tree diagrams, hierarchies, chord diagrams) Geographic visualisations with custom projections Visualisations requiring smooth, choreographed transitions Publication-quality graphics with fine-grained styling control Novel chart types not available in standard libraries Consider alternatives for: 3D visualisations - use Three.js instead Limitations Use this skill only when the task clearly matches the scope described above. Do not treat the output as a substitute for environment-specific validation, testing, or expert review. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills sickn33/claude-d3js-skill--e5c6d5

View the source on GitHub

Browse the @skills marketplace