CtrlK
BlogDocsLog inGet started
Tessl Logo

typescript-data-visualization-engineering

Build typed data visualizations in TypeScript. Use when the user wants TypeScript visualization code, typed data models, browser visualization components, UML-like diagram models, interactive graph or architecture diagram contracts, scroll-driven scene contracts, library selection guidance, or a maintainable visualization architecture beyond React- or Next-specific concerns.

67

Quality

81%

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

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

The content is a well-structured, lean architecture guide that delegates detail to genuine reference files and provides specific, actionable directives plus an output checklist. It could improve by de-duplicating library lists and adding a couple of concrete type examples to make guidance copy-paste ready.

Suggestions

De-duplicate the renderer/library enumerations that recur across 'Renderer and Library Selection', 'Output Expectations', and the reference files; reference the canonical list once.

Add one or two concrete worked examples (e.g. a sample typed view-state codec interface) so the data-contract guidance is copy-paste ready rather than directive-only.

Tighten the long compound bullets in rule 11 and the Output Expectations section into shorter sub-bullets to reduce token load.

DimensionReasoningScore

Conciseness

The body is dense, imperative, and assumes Claude's competence without explaining basic concepts, but library enumerations (e.g. deck.gl, PixiJS, Sigma.js, ECharts GL) repeat across 'Renderer and Library Selection', 'Output Expectations', and references, and several compound bullets (rule 11, output-expectation items) could be tightened.

4 / 5

Actionability

Directives are concrete and specific ('Define the data schema before rendering', 'Validate external data at the boundary', 'Model selections, filters, tooltip payloads... as explicit types') and the Output Expectations section functions as a clear production checklist, but there are no concrete worked examples or sample type interfaces to lift it to fully copy-paste-ready guidance.

4 / 5

Workflow Clarity

The numbered TypeScript Rules give an ordered design sequence (schema -> validate -> separate concerns -> model state) and Output Expectations provides a verification checklist with explicit routing decision points, but there are no explicit validation/feedback loops; this is acceptable since the skill is architectural rather than destructive or batch-oriented.

4 / 5

Progressive Disclosure

The body is a clear overview that delegates detail to real one-level-deep bundle files (./references/library-selection-for-builders.md, react-and-framework-boundaries.md, types-and-data-contracts.md, export-and-product-integration.md, all present) and clearly signals sibling/foundation references, with content appropriately split into well-organized sections.

5 / 5

Total

17

/

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.

The description is strong: it pairs a clear capability statement with an explicit, trigger-rich 'Use when' clause and a well-scoped niche. Its main weakness is mild overlap with adjacent specialist skills and a reliance on one action verb across a broad deliverable list.

DimensionReasoningScore

Specificity

Lists several concrete deliverables ('typed data models', 'browser visualization components', 'UML-like diagram models', 'interactive graph or architecture diagram contracts', 'scroll-driven scene contracts', 'library selection guidance'), but relies on a single primary verb ('Build') rather than multiple distinct actions, leaving minor coverage gaps versus the comprehensive-action anchor.

4 / 5

Completeness

Explicitly answers both 'what' ('Build typed data visualizations in TypeScript') and 'when' via a concrete 'Use when the user wants...' clause enumerating specific trigger phrases, matching the anchor for clearly answering both with concrete triggers.

5 / 5

Trigger Term Quality

Strong natural keyword coverage ('TypeScript visualization code', 'UML-like diagram models', 'interactive graph', 'architecture diagram', 'scroll-driven scene', 'library selection') with synonyms across diagram types, though some phrases ('scroll-driven scene contracts', 'typed data models') lean specialized rather than plain user language.

4 / 5

Distinctiveness Conflict Risk

It carves a distinct niche ('beyond React- or Next-specific concerns') and uses specific triggers, but sub-areas like UML diagrams and scroll-driven scenes overlap with dedicated sibling skills the body itself routes to, creating minor conflict risk.

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.

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.