CtrlK
BlogDocsLog inGet started
Tessl Logo

agent-d3js-skill

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.

54

Quality

61%

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 ./.agent/skills/agent-d3js-skill/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

22%

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

This SKILL.md functions almost entirely as a table of contents with no substantive content in the body itself. It lacks any executable code, concrete examples, or actual workflow steps, making it essentially an index page rather than a useful skill document. The progressive disclosure approach of linking to sub-skills is reasonable in concept but poorly organized and unverifiable without bundle files.

Suggestions

Add a concrete quick-start example showing a minimal D3 visualization (e.g., a simple bar chart in ~15 lines) so the skill body itself is actionable without requiring sub-skill navigation.

Fill in the empty 'Core workflow' section with a clear numbered sequence (e.g., 1. Set up → 2. Choose pattern → 3. Structure code → 4. Add interactivity → 5. Test responsiveness) with brief inline guidance at each step.

Organize the 23 sub-skill links into logical groups (Setup, Chart Types, Interactions, Scales, Data & Performance, Accessibility & Styling) with brief one-line descriptions of when to use each.

Remove the explanatory sentence about what D3.js is ('D3.js (Data-Driven Documents) excels at binding data to DOM elements...') since Claude already knows this.

DimensionReasoningScore

Conciseness

The overview paragraph explains what D3.js is, which Claude already knows. The 'When to use d3.js' section adds some value but is somewhat verbose. The bulk of the file is a link list, which is efficient, but the introductory text could be tightened.

2 / 3

Actionability

The SKILL.md contains zero executable code, no concrete commands, and no specific examples. It is entirely a table of contents pointing to sub-skills with no actionable guidance in the body itself—not even a quick-start snippet or minimal working example.

1 / 3

Workflow Clarity

The 'Core workflow' heading is empty with no actual workflow steps described. The numbered sub-skill links (1-4) hint at a sequence but provide no inline guidance, validation checkpoints, or sequencing logic. There is no feedback loop or error recovery guidance.

1 / 3

Progressive Disclosure

The skill does attempt progressive disclosure by linking to 23 sub-skills, which is a reasonable structure. However, the links are not well-categorized (setup, chart types, interactions, scales, and meta-concerns are all in one flat list), the section headers are redundant with the link text, and without bundle files we cannot verify the references resolve. The organization could be significantly improved with grouping.

2 / 3

Total

6

/

12

Passed

Description

100%

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

This is a strong skill description that clearly identifies its domain (d3.js data visualisation), lists specific concrete outputs (charts, graphs, network diagrams, geographic visualisations), and provides explicit trigger guidance with both 'should be used when' and 'Use this for' clauses. It also effectively distinguishes itself from standard charting library skills and covers multiple framework contexts.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions and outputs: 'custom charts, graphs, network diagrams, geographic visualisations, complex SVG-based data visualisation' with additional specifics like 'fine-grained control over visual elements, transitions, or interactions'.

3 / 3

Completeness

Clearly answers both 'what' (creating interactive data visualisations using d3.js with specific types listed) and 'when' (explicit 'This skill should be used when...' and 'Use this for...' clauses with clear trigger scenarios).

3 / 3

Trigger Term Quality

Excellent coverage of natural terms users would say: 'd3.js', 'charts', 'graphs', 'network diagrams', 'geographic visualisations', 'SVG', 'data visualisation', 'React', 'Vue', 'Svelte', 'vanilla JavaScript'. These are terms users would naturally use when requesting this type of work.

3 / 3

Distinctiveness Conflict Risk

Clearly scoped to d3.js specifically, with the qualifier 'bespoke visualisations beyond standard charting libraries' which explicitly distinguishes it from skills for simpler charting libraries like Chart.js or Plotly. The d3.js and SVG-based focus creates a clear niche.

3 / 3

Total

12

/

12

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
Dokhacgiakhoa/antigravity-ide
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.