CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

d3-data-visualization

Build custom data visualizations with D3. Use when the user needs SVG or DOM-based charts, rich annotation, domain-native contextual backgrounds, data joins, custom scales or interactions, scroll-driven SVG scene states, or precise control over browser visualization behavior.

66

Quality

83%

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

SKILL.md
Quality
Evals
Security

Quality

Content

75%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.

A well-structured, opinionated design guide: decision boundaries (Choose/Avoid), a concrete working pattern, exact styling budgets, and clearly signaled references. The main improvements are consolidating the mobile guidance scattered across four sections and adding one minimal executable D3 snippet.

Suggestions

Consolidate the mobile/responsive guidance, currently repeated across Working Pattern, Editorial Defaults, Integration Rules, and Output Expectations, into a single section.

Add one short executable D3 example (e.g., scale construction plus a data join with a stable key) to make the Working Pattern copy-paste concrete.

Verify or annotate the out-of-bundle references (../../references/foundations/*.md, sibling SKILL.md paths) so navigation does not depend on unverifiable paths.

DimensionReasoningScore

Conciseness

The body is dense guidance with zero padding: it never explains what D3 is or how libraries work, and bullets like ".tickSizeOuter(0), 6-8 px tick padding" assume competence. The main trim opportunity is repetition — mobile/responsive guidance appears in Working Pattern (step 10), Editorial Defaults (two bullets), Integration Rules, and Output Expectations, which could be consolidated into one section.

4 / 5

Actionability

Guidance is unusually concrete for an instruction-only skill: exact pixel budgets ("10-12 px axis ticks, 1.5-2.25 px normal data lines"), specific API calls (".tickSizeOuter(0)", "d3-brush, d3-zoom, d3-drag"), and explicit CSS properties ("shape-rendering: crispEdges", "vector-effect: non-scaling-stroke") with when-to-use/when-not-to-use boundaries. It falls short of 5 only because there are no executable code snippets for a code-generation skill, e.g., a minimal data-join or scale-setup example.

4 / 5

Workflow Clarity

The 10-step "Working Pattern" gives a clear build sequence (data model -> separation of parsing/scales/geometry/rendering/interaction -> joins -> polish), and step 9 acts as a finishing checkpoint ("apply ./references/svg-polish-and-crispness.md before calling the chart finished"). Chart building is not a destructive or batch operation, so no validation cap applies, but there are no explicit validate/fix/retry feedback loops (e.g., checking rendered output against the data) that would earn a 5.

4 / 5

Progressive Disclosure

The SKILL.md is a genuine overview: detail is pushed into a clearly labeled References section split into "Shared theory" and "Skill references", and all five local ./references/ files exist and are one level deep with descriptive names. The gap is that 7 of the listed paths (../../references/foundations/*.md and two sibling SKILL.md files) are outside this bundle and not verifiable from it, slightly weakening navigation certainty relative to the 5 anchor.

4 / 5

Total

16

/

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: third-person, concise, with an explicit 'Use when' clause and concrete capability triggers anchored on the named library. Minor gains available from adding natural synonyms (graphs, plots, chart types) and tightening overlap-prone phrases that neighbor related viz skills.

Suggestions

Add one or two natural user phrasings such as 'graphs', 'plots', or 'chart types (scatter, bar, line)' to broaden trigger coverage.

Qualify the scrollytelling trigger (e.g., 'SVG scene states where D3 owns the geometry') to reduce overlap with a dedicated scrollytelling skill.

DimensionReasoningScore

Specificity

"Build custom data visualizations with D3" names the domain, and the description enumerates several concrete capability areas ("SVG or DOM-based charts", "rich annotation", "data joins", "custom scales or interactions", "scroll-driven SVG scene states"). It is one primary verb plus a scope list rather than multiple distinct actions (extract/fill/merge style), so it sits at 4 rather than 5.

4 / 5

Completeness

Both halves are explicit: the "what" is "Build custom data visualizations with D3" and the "when" is a concrete "Use when the user needs..." clause listing specific trigger conditions (charts, annotation, backgrounds, data joins, scales/interactions, scene states). This matches the anchor for clearly and explicitly answering both what and when with concrete trigger phrases; the 'when' is specific, not weakly implied, so 4 does not fit.

5 / 5

Trigger Term Quality

Natural terms users would say are well covered: "data visualizations", "D3", "charts", "SVG", "annotation", "interactions". Common variations like "graph", "plot", "visualize data", or chart-type words (scatterplot, bar chart) are missing, keeping it just below comprehensive.

4 / 5

Distinctiveness Conflict Risk

"custom data visualizations with D3" carves a clear niche with a named library and SVG/DOM framing, but trigger phrases like "rich annotation" and "scroll-driven SVG scene states" could also fire for closely related visualization skills (e.g., the scrollytelling skill referenced in the body). Mostly distinct with minor overlap risk, matching the 4 anchor.

4 / 5

Total

17

/

20

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

openai/plugins

Path

plugins/build-web-data-visualization/skills/d3-data-visualization/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.