CtrlK
BlogDocsLog inGet started
Tessl Logo

react-and-nextjs-data-visualization

Integrate data visualizations into React and Next.js applications. Use when the user needs chart components, UML-like or architecture diagram components, React integration patterns, Next.js client or server boundaries, hydration-safe rendering, lazy loading, framework-aware performance, scroll-driven visual stories, or export guidance.

65

Quality

78%

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/react-and-nextjs-data-visualization/SKILL.md
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, actionable integration guide that leans on real reference bundle files and avoids over-explaining familiar concepts. Its weak spots are the absence of any executable code examples and some redundancy between the Working Pattern and Output Expectations sections.

Suggestions

Add one or two minimal copy-paste snippets (e.g. `dynamic(() => import(...), { ssr: false })` and a `"use client"` boundary example) to lift actionability to fully executable.

Consolidate the overlap between Working Pattern and Output Expectations so ownership-boundary and mobile-layout points are stated once and cross-referenced rather than repeated.

Tighten the trigger list in 'Choose This Skill When' by grouping library families (chart libs vs diagram renderers) to reduce density without losing coverage.

DimensionReasoningScore

Conciseness

The body assumes Claude's competence and avoids explaining what React, Next.js, or D3 are, but there is noticeable overlap between the Working Pattern steps and the Output Expectations list that could be tightened.

4 / 5

Actionability

It gives concrete, specific directives naming real APIs and patterns (e.g. "Use `window.visualViewport`", "Use replace-style navigation ... and push-style navigation", "explicit `touch-action`"), but provides no copy-paste code snippets for a code-integration skill, leaving a minor gap.

4 / 5

Workflow Clarity

The 16-step Working Pattern is a clearly sequenced decision list and the Output Expectations section acts as a deliverables checklist, though there are no explicit validate/feedback checkpoints, which the design-guidance nature of the skill does not strictly require.

4 / 5

Progressive Disclosure

The body is an overview that points to a well-organized, one-level-deep References section split into Shared theory and Skill references, and the four cited ./references/*.md bundle files all exist on disk, making navigation easy.

5 / 5

Total

17

/

20

Passed

Description

78%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 clearly states both the function and explicit, varied use-when triggers in third person. Its main weakness is that the "what" rests on a single action verb while the rest of the text is triggers rather than additional concrete capabilities.

DimensionReasoningScore

Specificity

It names the domain and one concrete action ("Integrate data visualizations into React and Next.js applications"), but the remainder of the description is a list of trigger conditions rather than multiple distinct concrete actions, so coverage is not comprehensive.

3 / 5

Completeness

It explicitly answers both what ("Integrate data visualizations into React and Next.js applications") and when ("Use when the user needs chart components, UML-like or architecture diagram components, ...") with concrete trigger phrases.

5 / 5

Trigger Term Quality

It offers good coverage of natural terms a developer would say ("chart components", "lazy loading", "hydration-safe rendering", "export guidance") with synonyms across chart and diagram types, though a few common phrasings are absent.

4 / 5

Distinctiveness Conflict Risk

It carves a clear niche (data-viz integration inside React/Next.js), but mentions "UML-like or architecture diagram components" and "scroll-driven visual stories" that overlap with closely related sibling skills, creating minor conflict risk.

4 / 5

Total

16

/

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.