CtrlK
BlogDocsLog inGet started
Tessl Logo

testland/d3-snapshot-tests

Snapshot-test D3.js charts - D3 generates SVG (not Canvas, per d3js.org getting-started); use `outerHTML` snapshot for static structure, `toHaveScreenshot` for rendered SVG; jsdom for headless render in unit tests; disable transitions for stable snapshots; per-element data-binding correctness tests. Use when a project renders charts with `d3.create('svg')` or D3 selections and the emitted SVG structure or update join needs regression coverage - including before a D3 major-version upgrade.

76

Quality

96%

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

Overview
Quality
Evals
Security
Files

Quality

Content

92%

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

A well-engineered skill body: concrete executable code for every step, a clearly sequenced workflow with a verification gate and demonstrated feedback loop, and clean one-level progressive disclosure into a real advanced-tests reference. The main weakness is conciseness — the SVG-not-Canvas premise and doc citations are repeated across the intro, Steps 2/5, and References.

Suggestions

Deduplicate the SVG-not-Canvas premise (already in the frontmatter) so the body intro does not restate it.

Consolidate the three 'Per the D3 getting-started docs' citations into one and drop the tangential Step 2 'Per [Chart.js docs] equivalent works for D3 too' aside, since the D3-specific toHaveScreenshot example stands on its own.

DimensionReasoningScore

Conciseness

Mostly efficient and code-dense, but not every token earns its place: the SVG-not-Canvas premise is restated from the frontmatter in the body intro, the 'D3 getting-started docs' citation is repeated three times (intro, Step 5, References), and the Step 2 'Per [Chart.js docs] equivalent works for D3 too' aside is tangential. Tightening these would reach a 3.

2 / 3

Actionability

Provides fully executable, copy-paste-ready code: normalizeSvg regex, the transition identity swap, Playwright outerHTML/toHaveScreenshot tests, the per-element data-binding assertion, and a jsdom unit test, each with concrete selectors and assertions.

3 / 3

Workflow Clarity

'How to use' lays out a numbered 7-step sequence with explicit Step cross-references, Step 7 names 'run the whole suite as a gate' as verification, and the Worked example demonstrates a feedback loop (the outerHTML diff flags a missing <g> before shipping); the anti-patterns table doubles as a checklist.

3 / 3

Progressive Disclosure

The spine keeps the five core steps inline and pushes the deepest patterns (update join enter/update/exit, SVG a11y metadata) to a single one-level-deep, clearly signaled reference at references/advanced-tests.md (verified to exist), with a tidy References section listing related skills.

3 / 3

Total

11

/

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.

A strong, third-person description that states concrete capabilities, gives an explicit 'Use when' trigger with natural terms, and carves out a distinct D3-SVG niche separate from Canvas-based chart skills. No vague fluff or over-claims.

DimensionReasoningScore

Specificity

Lists multiple concrete actions: 'use outerHTML snapshot for static structure, toHaveScreenshot for rendered SVG; jsdom for headless render...; disable transitions...; per-element data-binding correctness tests.'

3 / 3

Completeness

Explicitly answers both what (snapshot-test D3 charts via the listed techniques) and when ('Use when a project renders charts with d3.create(svg)... needs regression coverage - including before a D3 major-version upgrade').

3 / 3

Trigger Term Quality

Covers natural user terms ('D3.js charts', 'd3.create(svg)', 'D3 selections', 'SVG structure', 'update join', 'regression coverage', 'D3 major-version upgrade') that a user would actually say.

3 / 3

Distinctiveness Conflict Risk

Clearly niched to D3 SVG output, explicitly contrasts with Canvas ('not Canvas') and the description's scope matches the body's note that Canvas belongs to chartjs-snapshot-tests, making wrong-skill triggering unlikely.

3 / 3

Total

12

/

12

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Reviewed

Table of Contents