CtrlK
BlogDocsLog inGet started
Tessl Logo
PluginPublic

testland/chart-render-tests

Use when a dashboard renders charts that need regression tests, before a chart library upgrade or after a theme change. Canvas charts (Chart.js) get screenshot and toDataURL diffs, SVG (D3) gets normalized structure snapshots, and Vega or Vega-Lite specs get schema and compile checks.

Quality

91%

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

86%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, highly actionable skill body: every recipe ships executable code with stability prerequisites, the library-detection step gives a clear entry point, and detail is correctly pushed to one-level-deep reference files. The remaining gaps are minor: a little redundant framing around known facts and no guidance for recovering from a failed diff or gate.

Suggestions

Trim the 'Per the [X docs]...' framings that restate known facts (Chart.js renders to canvas, D3 generates SVG) — keep only the citations, saving tokens without losing information.

Add a short failure-recovery loop for snapshot diffs and Vega compile failures (e.g., 'if the diff exceeds maxDiffPixels, compare the normalized data assertions before re-baselining') to close the workflow_clarity gap.

Consider adding a line to the References section covering the chartjs-alternative-approaches and *-advanced files' purpose (tooltip/legend interaction, multi-DPI, enter/update/exit) so their content is discoverable from the overview's reference list, not only from section endings.

DimensionReasoningScore

Conciseness

The body is dense and table-driven, but includes minor over-explanation of things Claude already knows ("Per the [Chart.js docs], Chart.js renders to <canvas>"; "Per the [D3 getting-started docs], D3 generates SVG") plus a short motivational opener — the 4 anchor ('efficient; minor instances of over-explanation'), not the 5 anchor where every token earns its place.

4 / 5

Actionability

Fully executable guidance throughout: jq/grep library-detection commands, a complete Playwright canvas test with waitForFunction and a tolerance comment, a normalizeSvg + toMatchSnapshot test, and a complete Ajv schema + Vega-Lite compile test — copy-paste ready and covering the common cases, matching the 5 anchor.

5 / 5

Workflow Clarity

The sequence (detect family → apply stability rules → wait for render → assert) is clear with validation checkpoints (Vega's three explicit gates, waitForFunction/waitForSelector preconditions), but there is no error-recovery feedback loop for when a diff or gate fails — the 4 anchor ('most checkpoints present; minor validation gaps') fits better than 5.

4 / 5

Progressive Disclosure

The body is a well-organized overview: a family table linking each recipe, per-section "Full depth (...): references/X.md" pointers, and all six referenced files exist exactly one level deep with no nested references — matching the 5 anchor.

5 / 5

Total

18

/

20

Passed

Description

92%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 pairs explicit, concrete 'use when' triggers with a specific per-family breakdown of what the skill does, and its library-level keywords make it highly distinguishable from general visual-regression skills. The only gap is modest synonym coverage for natural trigger terms.

DimensionReasoningScore

Specificity

The description names a concrete test technique for each rendering family — "get screenshot and toDataURL diffs", "gets normalized structure snapshots", "get schema and compile checks" — giving comprehensive, specific coverage with no gaps, matching the 5 anchor rather than the 4 anchor's 'minor gaps'.

5 / 5

Completeness

It explicitly answers 'when' with concrete triggers ("Use when a dashboard renders charts that need regression tests, before a chart library upgrade or after a theme change") and 'what' with per-family techniques, matching the 5 anchor; not 4 because the 'when' clause is already fully explicit and specific.

5 / 5

Trigger Term Quality

Natural trigger phrases like "regression tests", "chart library upgrade", "theme change", "Chart.js", "D3", and "Vega-Lite" are present, but common synonyms users might say ("graph", "plot", "data viz", "visual regression") are missing, fitting the 4 anchor ('good keyword coverage; a few natural terms missing').

4 / 5

Distinctiveness Conflict Risk

Library-specific triggers (Chart.js, D3, Vega/Vega-Lite) and a narrow chart-render-regression niche create a clear boundary with minimal conflict risk; the body even delegates general UI snapshots to sibling skills.

5 / 5

Total

19

/

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.

Reviewed

On this page