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.
Install with Tessl CLI
npx tessl i github:sickn33/antigravity-awesome-skills --skill d3-vizOverall
score
90%
Does it follow best practices?
Validation for skill structure
Discovery
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 well-crafted skill description that excels across all dimensions. It provides specific capabilities, includes natural trigger terms users would actually use, explicitly states both what the skill does and when to use it, and clearly distinguishes itself from standard charting library skills. The description is comprehensive yet concise.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'custom charts, graphs, network diagrams, geographic visualisations, complex SVG-based data visualisation' with additional specifics about 'fine-grained control over visual elements, transitions, or interactions'. | 3 / 3 |
Completeness | Clearly answers both what ('Creating interactive data visualisations using d3.js') and when ('should be used when creating custom charts, graphs...', 'Use this for bespoke visualisations beyond standard charting libraries'). Explicit trigger guidance is provided. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'd3.js', 'charts', 'graphs', 'network diagrams', 'geographic visualisations', 'SVG', 'data visualisation', plus framework mentions (React, Vue, Svelte, vanilla JavaScript) that users might include in requests. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche with distinct triggers - specifically targets d3.js and 'bespoke visualisations beyond standard charting libraries', which distinguishes it from generic charting skills. The SVG-based and fine-grained control language further narrows the scope. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
85%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, highly actionable skill with excellent code examples covering a wide range of D3.js visualization patterns. The workflow is clear and the progressive disclosure is well-executed with appropriate references to external resources. The main weakness is verbosity - the skill could be more concise by moving some complete implementations (chord diagram, heatmap) to reference files rather than including full code inline.
Suggestions
Move complete implementations of complex visualizations (chord diagram, heatmap) to the references/ folder and keep only brief snippets in the main skill
Remove the explanatory sentence about what D3.js does in the Overview - Claude already knows this
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some unnecessary explanations (e.g., 'D3.js (Data-Driven Documents) excels at binding data to DOM elements') and could be tightened. Some patterns like the full chord diagram and heatmap implementations add significant length that could be referenced externally. | 2 / 3 |
Actionability | Provides fully executable, copy-paste ready code examples throughout. Every visualization pattern includes complete working code with proper imports, data handling, and rendering logic. | 3 / 3 |
Workflow Clarity | Clear numbered workflow steps (1. Set up, 2. Choose pattern, 3. Structure code, 4. Responsive sizing). The standard structure template provides explicit sequencing with comments marking each phase. Data validation checks are included at the start of functions. | 3 / 3 |
Progressive Disclosure | Well-organized with clear sections progressing from setup to advanced patterns. References external files (references/, assets/) for detailed materials and templates. Content is appropriately split between overview and detailed examples. | 3 / 3 |
Total | 11 / 12 Passed |
Validation
69%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (821 lines); consider splitting into references/ and linking | Warning |
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 11 / 16 Passed | |
- 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.