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.

70

Quality

86%

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

72%Weight 40%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a well-structured, highly actionable integration framework with excellent progressive disclosure via real one-level-deep references and no conceptual padding. Its main weaknesses are length/redundancy across the Working Pattern, Next.js Guidance, and Output Expectations sections, and the absence of explicit validation checkpoints in its workflow.

Suggestions

Tighten conciseness by consolidating the mobile-control guidance that currently recurs across Working Pattern #10, Next.js Guidance, and Output Expectations into a single canonical section.

Add explicit validation checkpoints to the Working Pattern (e.g., 'verify hydration boundaries render without mismatch before adding interactivity') to lift workflow clarity from a sequenced list to a feedback-looped process.

Consider trimming or merging near-duplicate Output Expectations bullets that restate Working Pattern rules to reduce token cost without losing guidance.

DimensionReasoningScore

Conciseness

The body commendably avoids explaining concepts Claude already knows (no definitions of React, D3, or hydration) and packs in prescriptive design contracts, but the 16-step Working Pattern plus ~18 Output Expectations bullets and recurring coverage of mobile controls across multiple sections create redundancy that could be tightened, landing at the score-2 'mostly efficient but could be tightened' anchor rather than the maximally lean score 3.

2 / 3

Actionability

As an instruction/architecture skill, it provides concrete prescriptive guidance rather than vague direction — named ownership boundaries, specific libraries (Pointer Events, window.visualViewport, Motion useScroll, GSAP ScrollTrigger), explicit state to model (filters, range, metric, zoom, camera target), and specific rules (non-passive native listener for wheel, replace vs push navigation); per the code_vs_instruction scoring note this concrete actionable guidance earns score 3 despite the absence of runnable snippets.

3 / 3

Workflow Clarity

The Working Pattern is a clearly numbered, sequenced 16-step process (above score 1), but it contains no explicit validation checkpoints or feedback loops for error recovery, which the score-3 anchor requires; this matches the score-2 'steps listed but validation gaps; checkpoints missing or implicit' anchor.

2 / 3

Progressive Disclosure

SKILL.md is an overview that points to four real, confirmed one-level-deep reference files (./references/react-component-patterns.md, d3-canvas-and-grammar-in-react.md, nextjs-client-server-boundaries.md, lazy-loading-ssr-and-bundle-strategy.md) plus sibling skills and shared foundations, all clearly signaled under a grouped References section with inline pointers where relevant, matching the score-3 'clear overview with well-signaled one-level-deep references; content appropriately split' anchor.

3 / 3

Total

10

/

12

Passed

Description

100%Weight 40%Scale 1-3

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: a concrete opening action, an explicit 'Use when' trigger clause, and a broad but specific list of capability areas and natural trigger terms. It clearly communicates both what the skill does and when to invoke it, with a well-scoped React/Next.js niche.

DimensionReasoningScore

Specificity

Opens with the concrete action 'Integrate data visualizations into React and Next.js applications' and enumerates multiple specific capability areas (chart components, UML/architecture diagrams, client/server boundaries, hydration-safe rendering, lazy loading, scroll-driven stories, export guidance), matching the score-3 'lists multiple specific concrete actions' anchor.

3 / 3

Completeness

Explicitly states what it does ('Integrate data visualizations into React and Next.js applications') and when to use it via an explicit 'Use when the user needs...' clause, satisfying the score-3 'clearly answers both what AND when with explicit triggers' anchor rather than leaving 'when' implied.

3 / 3

Trigger Term Quality

Natural user-facing terms ('chart components,' 'Next.js client or server boundaries,' 'hydration-safe rendering,' 'lazy loading,' 'scroll-driven visual stories,' 'export guidance') align with how users actually phrase these requests, giving good coverage beyond the score-2 'missing common variations' anchor.

3 / 3

Distinctiveness Conflict Risk

The niche is scoped to visualization inside React/Next.js product surfaces with distinctive triggers (hydration-safe rendering, client/server boundaries, scroll-driven stories) that separate it from generic charting skills; mild overlap with named sibling skills keeps it from being pristine but it is closer to the score-3 'clear niche with distinct triggers' than the score-2 overlap anchor.

3 / 3

Total

12

/

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.