CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

62

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

67%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 dense, expert-level architecture skill with excellent routing to specialized sibling skills and real, focused bundle references. The main gaps are the complete absence of executable code in the body and a References section that lists files without signaling their contents.

Suggestions

Add two or three small executable snippets for the highest-frequency decisions — a `next/dynamic` import with `ssr: false`, a hydration-safe client-only chart wrapper, and the non-passive wheel-listener pattern — so the core guidance is copy-paste ready rather than purely directional.

Give each entry in the References section a one-line description (e.g. 'react-component-patterns.md — ownership model, ref/effect scoping; nextjs-client-server-boundaries.md — server vs client split, search-param state') so readers know which file to open for which need.

Deduplicate the guidance repeated between Next.js Guidance and Output Expectations (mobile keyboard/visualViewport behavior, operational workspaces, concepted-surface workflow) to tighten the body.

DimensionReasoningScore

Conciseness

The body assumes Claude's competence throughout — there is zero explanation of what React, D3, or SSR are, and every line is skill-specific directive guidance ('Prefer Server Components for data fetching', 'Use replace-style navigation for high-frequency transient changes'). It is nonetheless noticeably above the anchor-3 example (which contains evaluative filler) but not anchor-5 lean: several long enumeration tails ('filters, range, metric, comparison, selected entity, active tab, map bounds, zoom, camera target, and drill-down path') and repeated guidance between Next.js Guidance and Output Expectations (mobile keyboard/viewport handling, operational workspaces, concepted surfaces) could be trimmed.

4 / 5

Actionability

Guidance is specific and directive — it names concrete APIs and patterns (`window.visualViewport`, `position: sticky`, `prefers-reduced-motion`, push vs replace navigation, Pointer Events with `touch-action`) — but the body contains no executable code or commands at all: no `next/dynamic` snippet, no client-only wrapper example, no ref/effect pattern. Per the scoring note, absent code in an instruction-only skill is not penalized if guidance is actionable, and here key implementation details are deferred to the reference files, leaving the body directional rather than copy-paste ready — matching anchor 3 ('some concrete guidance but incomplete; missing key details') rather than anchor 4, which expects concrete code or commands.

3 / 5

Workflow Clarity

The Working Pattern is a coherent 16-step decision procedure: steps 1–9 run roughly in sequence (server/browser split → concern separation → ownership → state modeling → loading strategy), steps 10–16 are explicit conditional routing to specialized references, and the Output Expectations section functions as an end-of-work checklist naming what the answer must cover. This fits anchor 4 ('clear sequence with most checkpoints present; minor validation gaps'); it is not anchor 5 because there are no explicit validate-and-recover feedback loops, and it is clearly above anchor 3 since the checkpoints, while implicit-as-validation, are enumerated explicitly as output requirements.

4 / 5

Progressive Disclosure

Structure is good: the body stays at overview/decision level, inline pointers are well signaled ('Use `../scrollytelling-and-parallax-data-visualization/SKILL.md` for the story contract', 'Use `../../references/foundations/mobile-first-responsive-visualization.md` for touch, keyboard, visual viewport ... decisions'), and the four local `./references/*.md` files exist with real focused content, one level deep. It falls short of anchor 5 because the References section is a bare grouped path list — the nine foundation files carry no per-file description of what each covers or when to open it, so discovery relies on the inline mentions.

4 / 5

Total

15

/

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.

A strong description with an explicit 'Use when' trigger list and a clearly stated niche. Its main weaknesses are a thin action inventory (one verb plus a topic list) and trigger terms that overlap with sibling skills that own those domains.

Suggestions

Add one or two more concrete capability verbs beyond 'Integrate' (e.g. 'Structure chart component ownership and hydration-safe rendering, configure Next.js client/server boundaries') so the description lists several specific actions rather than one action plus a topic list.

Scope the overlapping triggers, e.g. 'UML-like or architecture diagram components inside React surfaces' and 'scroll-driven visual stories built as React components', to reduce conflict with the dedicated UML and scrollytelling skills.

DimensionReasoningScore

Specificity

The description names the domain precisely ('Integrate data visualizations into React and Next.js applications') but that single verb is the only concrete action; everything after it ('chart components, UML-like or architecture diagram components, ... hydration-safe rendering, lazy loading') is a list of subject areas, not actions. This matches anchor 3 ('names domain and 1-2 concrete actions, but not comprehensive') and falls short of anchor 4, which requires several specific actions.

3 / 5

Completeness

Both questions are answered explicitly: 'Integrate data visualizations into React and Next.js applications' states the what, and 'Use when the user needs chart components, ... or export guidance' gives concrete trigger phrases — structurally identical to the anchor-5 good example ('Extract text and tables from PDF files... Use when working with PDF files or when the user mentions...'). Anchor 4 would require the 'when' to be less explicit or specific, which is not the case here.

5 / 5

Trigger Term Quality

Natural phrases a user would actually say are well covered: 'chart components', 'UML-like or architecture diagram', 'client or server boundaries', 'hydration', 'lazy loading', 'scroll-driven visual stories', 'export guidance'. A few common variations are missing (e.g. 'D3', 'SVG/Canvas', 'interactive charts'), so it fits anchor 4 ('good keyword coverage; a few natural terms missing') rather than the comprehensive synonym coverage of anchor 5.

4 / 5

Distinctiveness Conflict Risk

The React/Next.js integration niche is clear and mostly distinct, but the description claims 'UML-like or architecture diagram components' and 'scroll-driven visual stories' as triggers — domains the body explicitly routes to sibling skills (`../uml-and-software-architecture-visualization/SKILL.md`, `../scrollytelling-and-parallax-data-visualization/SKILL.md`). That is minor overlap risk with closely related skills (anchor 4), not the minimal conflict risk of anchor 5.

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

openai/plugins

Path

plugins/build-web-data-visualization/skills/react-and-nextjs-data-visualization/SKILL.md

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.