CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

d3-viz

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

Quality

75%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/d3-viz/SKILL.md

The canonical home for this skill is claude-d3js-skill in sickn33/agentic-awesome-skills

SKILL.md
Quality
Evals
Security

Quality

Content

56%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body delivers highly actionable, correct d3 v7 guidance with a clear workflow and good coverage of chart types, interactivity, and troubleshooting. Its main weaknesses are verbosity and duplication: the pattern and scales sections repeat content already in the references/ bundle files, and the Resources section misnames the asset files (.js vs actual .jsx).

Suggestions

Cut the ~250-line "Common visualisation patterns" and "Scales reference" sections down to one short inline example each and point to the existing references/d3-patterns.md and references/scale-reference.md instead of duplicating them in the body.

Fix the asset references in the Resources section to match the actual filenames: chart-template.jsx and interactive-template.jsx (not .js), so Claude can find and read them.

Remove the near-identical boilerplate setup (select/clear/margins/scale creation) repeated across drawChart, drawVisualization, and drawBarChart — show it once in the workflow and have pattern snippets assume it.

DimensionReasoningScore

Conciseness

The ~820-line body inlines ~250 lines of pattern code and a ~60-line scales reference that duplicate the existing references/d3-patterns.md and references/scale-reference.md, and the boilerplate setup (select, clear, margins, groups) repeats nearly verbatim three times. This goes beyond "some unnecessary explanation" — several sections are padded or duplicated, matching anchor 2.

2 / 5

Actionability

Concrete, executable d3 v7 code throughout (full copy-paste-ready functions for bar chart, chord diagram, heatmap, force network, with data-format comments), plus actionable interactivity, transition, and troubleshooting sections. Not 5: several snippets (line chart, pie, scatter) reference undefined surrounding scope (xScale, g, width) and are fragments rather than runnable code.

4 / 5

Workflow Clarity

The core workflow is a clearly numbered sequence (setup → integration pattern → structure → responsive sizing) with data guards ("if (!data || data.length === 0) return;"), returned cleanup functions for resize listeners/observers, and a Common issues troubleshooting section. Not 5: no explicit validation checkpoints or feedback loops; the domain is non-destructive so the cap does not apply.

4 / 5

Progressive Disclosure

The Resources section clearly signals one-level-deep references (d3-patterns.md, scale-reference.md, colour-schemes.md) and they exist, but bulk pattern/scale content that should live in those files is inlined and duplicated in the body. Additionally, the body cites "chart-template.js" and "interactive-template.js" while the actual assets are .jsx files — a filename mismatch. Content that should be separate is inline, matching anchor 3; not 4 because the duplication is extensive and asset references are inaccurate.

3 / 5

Total

13

/

20

Passed

Description

83%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it clearly states what the skill does and gives an explicit, trigger-rich when-clause scoped to d3.js/SVG work across JavaScript environments. Weaknesses are minor — a few missing synonyms (notably the US spelling "visualizations") and broad chart/graph triggers that slightly overlap general charting skills.

DimensionReasoningScore

Specificity

Lists several concrete deliverables — "creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation" with "fine-grained control over visual elements, transitions, or interactions" — but the actions are largely variations of a single verb (creating), leaving minor coverage gaps versus the comprehensive multi-action anchor.

4 / 5

Completeness

Explicitly answers both: what ("Creating interactive data visualisations using d3.js") and when ("This skill should be used when creating custom charts… Use this for bespoke visualisations beyond standard charting libraries") with concrete trigger phrases. Not 4: the when-clause is fully explicit with specific triggers, matching the top anchor's structure.

5 / 5

Trigger Term Quality

Good natural keyword coverage ("charts, graphs, network diagrams, d3.js, React, Vue, Svelte, vanilla JavaScript") that users would actually say, but a few natural terms are missing — notably the American spelling "visualizations", plus "plot", "dashboard", and "data viz".

4 / 5

Distinctiveness Conflict Risk

Scoped to a clear d3.js/SVG niche and explicitly contrasted with "standard charting libraries", keeping it mostly distinct. Not 5: "creating custom charts, graphs" are broad triggers that overlap general charting/dataviz skills.

4 / 5

Total

17

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (821 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

calesthio/OpenMontage

Path

.claude/skills/d3-viz/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.