CtrlK
BlogDocsLog inGet started
Tessl Logo

with-tanstack-virtual

Virtualize final React Table row or column models with TanStack Virtual. Load for useVirtualizer counts, scroll elements, stable keys, data-index measurement, dynamic heights, sticky headers/columns, grid/flex geometry, or infinite fetching; Virtual is renderer composition, not a Table feature.

65

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 ./packages/react-table/skills/with-tanstack-virtual/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

76%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 tight, code-first skill that gives highly executable guidance and clear wrong/correct contrasts for its common pitfalls. Its main gaps are the absence of explicit validation or feedback-loop steps in the workflow and minor duplication between the Setup and Core Patterns examples.

Suggestions

Add an explicit validation checkpoint (e.g. verify the virtualizer count matches getRowModel().rows.length and that getTotalSize() renders a non-zero spacer before shipping) to lift workflow clarity above the implicit-sequence level.

De-duplicate the Setup example against the 'Keep the virtualizer near its render loop' Core Pattern, or explicitly mark one as the canonical version and the other as a focused excerpt, to tighten token efficiency.

Consider splitting the growing Common Mistakes catalog into a referenced file (e.g. COMMON-MISTAKES.md) and keeping only the top pitfalls inline, to improve progressive disclosure as the skill grows.

DimensionReasoningScore

Conciseness

The body is dense and mostly code with short, purposeful prose ('This limits unrelated parent updates and keeps count, measurement, and rendered items together'), assuming Claude's competence; a few explanatory lines and the full Setup example are near-duplicates of the Core Patterns snippet, which could be trimmed.

4 / 5

Actionability

Provides complete, copy-paste-ready TSX in the Setup example and each Common Mistake pairs a concrete 'Wrong' snippet with a 'Correct' snippet, fully executable and covering the common cases with cited sources.

5 / 5

Workflow Clarity

The high-level sequence is implied ('Build the Table model first, then virtualize its final rendered rows or visible columns') and the Common Mistakes are well-labeled, but there are no explicit validation checkpoints or verify-then-proceed steps; while this skill is not strictly destructive, it lacks the feedback loops the rubric rewards.

3 / 5

Progressive Disclosure

Content is organized into clear sections (Setup, Core Patterns, Common Mistakes, API Discovery) with no bundle files to over-inline, and API Discovery points to node_modules type definitions for deeper detail; it stays in one file though, with the bulk of edge cases inline rather than split out, leaving minor organization gaps.

4 / 5

Total

16

/

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.

A highly specific, well-scoped description that names concrete capabilities and draws a clear boundary against related table skills. Its main weakness is the implicit trigger guidance — it lists what to load for rather than stating 'Use when the user asks for ...' — which keeps completeness and trigger-term quality just below full marks.

Suggestions

Add an explicit 'Use when the user asks to ...' clause (e.g. virtual scrolling for large lists, sticky headers, or infinite loading in React tables) so the 'when' is concrete rather than implied by the 'Load for' list.

Include a couple of natural user-facing terms alongside the API jargon (e.g. 'virtual scrolling', 'large list performance', 'windowed rows') to broaden trigger-term coverage.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'Virtualize final React Table row or column models', 'useVirtualizer counts, scroll elements, stable keys, data-index measurement, dynamic heights, sticky headers/columns, grid/flex geometry, or infinite fetching' — giving comprehensive coverage of the skill's capabilities.

5 / 5

Completeness

Clearly answers 'what' (virtualize final row/column models) and provides a 'Load for ...' trigger clause, but the 'when' is framed as 'Load for [list of capabilities]' rather than an explicit 'Use when the user says X' trigger phrase, leaving the trigger guidance implicit.

4 / 5

Trigger Term Quality

Strong technical keywords ('useVirtualizer', 'stable keys', 'dynamic heights', 'sticky headers/columns', 'infinite fetching') that practitioners would name, but it leans on API/technical jargon and omits a few natural lay synonyms (e.g. 'virtual scrolling', 'large lists', 'render performance').

4 / 5

Distinctiveness Conflict Risk

Scoped tightly to TanStack Virtual over a React Table final model, with an explicit boundary ('Virtual is renderer composition, not a Table feature'), creating a clear niche with minimal overlap against sibling table skills.

5 / 5

Total

18

/

20

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

14

/

16

Passed

Repository
TanStack/table
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.