CtrlK
BlogDocsLog inGet started
Tessl Logo

canvas2d-data-visualization

Render data visualizations with Canvas2D. Use when the visualization needs high mark counts, fast redraws, immediate-mode rendering, custom hit testing, or a hybrid Canvas plus SVG or HTML architecture.

65

Quality

77%

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 ./plugins/build-web-data-visualization/skills/canvas2d-data-visualization/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

72%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, technically dense practices reference with strong progressive disclosure via real bundle files and concrete code tokens. The main gap is the absence of explicit validation/feedback checkpoints in its build sequence and no complete worked example.

Suggestions

Add one complete, copy-paste-ready worked example (e.g. a minimal high-DPI Canvas redraw loop) so the inline code tokens consolidate into an executable whole.

Introduce an explicit validation checkpoint in 'Core Practices' — e.g. verify backing-store size and redraw budget after step 1, or confirm hit-test coverage after step 5 — to give the sequence feedback loops.

Tighten the 'Overview' paragraph, which blends rationale and tradeoff prose that could be trimmed without losing actionable signal.

DimensionReasoningScore

Conciseness

The body is dense and assumes Claude's knowledge of web/Canvas APIs rather than re-explaining them, with a few sentences that could be tightened further; it largely avoids padded conceptual explanation.

4 / 5

Actionability

It provides concrete executable specifics such as `ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)`, `setPointerCapture()`, `getContext("2d", { willReadFrequently: true })`, and the backing-store memory formula, but lacks a single complete copy-paste worked example.

4 / 5

Workflow Clarity

The numbered 'Core Practices' give a coherent build sequence (backing store, transforms, layers, hit testing, pointer handling), but there are no explicit validation checkpoints or feedback loops, so checkpoints are only implicit.

3 / 5

Progressive Disclosure

The body is an organized overview that points to four real one-level-deep skill reference files (rendering-architecture, high-density-interaction, performance-playbook, sparklines-and-microcharts) plus shared foundations, clearly signaled and split into 'Shared theory' and 'Skill references'.

5 / 5

Total

16

/

20

Passed

Description

82%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, third-person description that clearly states the capability and provides explicit, concrete trigger conditions. The only weakness is that the 'what' side names a single action while the rest of the text is trigger framing rather than additional concrete capabilities.

DimensionReasoningScore

Specificity

It names the domain (Canvas2D data visualization) and a single concrete action ('Render data visualizations with Canvas2D'), but the remainder lists trigger conditions rather than additional concrete actions, so coverage is not comprehensive.

3 / 5

Completeness

It explicitly answers both what ('Render data visualizations with Canvas2D') and when ('Use when the visualization needs...') with concrete trigger phrases, matching the top anchor.

5 / 5

Trigger Term Quality

Phrases like 'high mark counts', 'fast redraws', 'immediate-mode rendering', 'custom hit testing', and 'hybrid Canvas plus SVG or HTML' are natural terms a developer would say, though common synonyms like 'scatterplot', 'heatmap', or 'sparklines' are absent.

4 / 5

Distinctiveness Conflict Risk

The Canvas2D / immediate-mode / hybrid-architecture framing carves a clear niche distinct from SVG-only or WebGL skills, with minimal conflict risk.

5 / 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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
openai/plugins
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.