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.

67

Quality

80%

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

85%

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 Canvas2D design skill with clear progressive disclosure and a sequenced practice list; its main weakness is mild verbosity and overlap between the Overview and the Choose-When section.

Suggestions

Trim redundancy between the Overview paragraphs and the "Choose Canvas2D When" bullet list so the trigger rationale appears once.

Consider one minimal copy-paste Canvas resize-and-draw skeleton to anchor the high-DPI and transform guidance concretely.

DimensionReasoningScore

Conciseness

The body is information-dense and does not explain basic concepts Claude already knows, but the Overview prose and the "Choose Canvas2D When" list partly restate the description's triggers and could be tightened for token efficiency.

2 / 3

Actionability

It gives concrete, specific guidance throughout — exact APIs (ctx.setTransform(pixelRatio,0,0,pixelRatio,0,0), setPointerCapture(), getContext("2d",{willReadFrequently:true})) and a backing-store memory formula — and as an instruction/design skill the absence of full code blocks is not penalized per the scoring notes.

3 / 3

Workflow Clarity

Core Practices 1–8 provide a sensibly ordered build-up (backing store → transforms → layers → hit testing → pointer → mobile) and the Output Expectations section acts as an explicit verification checklist; no destructive or batch operation is present that would require a validation cap.

3 / 3

Progressive Disclosure

SKILL.md is an overview that points to four real one-level-deep ./references/*.md files (rendering-architecture, high-density-interaction, performance-playbook, sparklines-and-microcharts) plus clearly signaled shared foundations references, with easy navigation.

3 / 3

Total

11

/

12

Passed

Description

75%

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 complete, distinctive description with an explicit Use-when trigger, but its capability list is a single action plus conditions and its trigger phrasing is more technical than what users naturally say.

Suggestions

Lead with a few more concrete verbs (e.g., "Render dense scatterplots, heatmaps, and sparkline walls with Canvas2D") to broaden the action list.

Add common user-facing trigger terms such as scatterplot, heatmap, sparklines, or "chart is slow/laggy" alongside the technical ones.

DimensionReasoningScore

Specificity

The description names the domain and one concrete action ("Render data visualizations with Canvas2D"), but the rest of the clause lists conditions ("high mark counts", "fast redraws", "immediate-mode rendering") rather than multiple distinct actions, so it is not a comprehensive action list.

2 / 3

Completeness

It explicitly answers both what it does ("Render data visualizations with Canvas2D") and when to use it (explicit "Use when the visualization needs..." trigger clause), matching the anchor for a complete what-and-when description.

3 / 3

Trigger Term Quality

It includes some relevant terms (Canvas2D, SVG, HTML, redraws), but leans technical ("immediate-mode rendering", "custom hit testing", "hybrid Canvas plus SVG or HTML architecture") and misses common user phrasings like scatterplot, heatmap, sparklines, or "my chart is slow".

2 / 3

Distinctiveness Conflict Risk

The Canvas2D framing plus performance-oriented triggers carve a clear niche distinct from SVG-only or WebGL/Three.js skills, making it unlikely to fire for the wrong visualization skill.

3 / 3

Total

10

/

12

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.