tanstack-virtual
TanStack Virtual for virtualizing large lists, grids, and tables. Use when rendering thousands of rows, implementing infinite scroll, or optimizing large data displays. Use for virtual, virtualize, virtual-list, virtual-scroll, useVirtualizer, infinite-scroll, windowing.
- Installs
- 138
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oakoss/agent-skills --skill tanstack-virtual- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads tanstack-virtual automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
TanStack Virtual
Overview
TanStack Virtual is a headless UI utility for virtualizing large lists, grids, and tables. It renders only the visible items in the viewport, dramatically reducing DOM nodes and improving performance for datasets with thousands of rows. Framework adapters are available for React, Vue, Solid, Svelte, Lit, and Angular.
When to use: Rendering thousands of rows or columns, building virtualized tables, implementing infinite scroll, displaying large datasets where DOM node count impacts performance.
When NOT to use: Small lists under ~100 items (no performance benefit), server-rendered static content, layouts where all items must be in the DOM for SEO or accessibility, simple pagination (render one page at a time instead).
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Vertical list | useVirtualizer({ count, getScrollElement, estimateSize }) | Wrap items in absolute-positioned container |
| Horizontal list | useVirtualizer({ horizontal: true, ... }) | Use getTotalSize() for width instead of height |
| Grid layout | Row virtualizer + column virtualizer | Two virtualizer instances sharing one scroll element |
| Dynamic sizing | ref={virtualizer.measureElement} | Set data-index on each element |
| Window scroller | useWindowVirtualizer({ count, estimateSize }) | No getScrollElement needed |
| Scroll to item | virtualizer.scrollToIndex(index) | Supports align: 'start' | 'center' | 'end' | 'auto' |
| Scroll to offset | virtualizer.scrollToOffset(px) | Supports align and behavior: 'smooth' |
| Custom keys | getItemKey: (index) => items[index].id | Stable keys improve measurement cache |
| Overscan | overscan: 5 | Renders extra items outside viewport (default: 1) |
| Gap between items | gap: 8 | Space between virtualized items in pixels |
| Multi-lane layout | lanes: 3 | Masonry-style column layouts |
| Padding | paddingStart: 100, paddingEnd: 100 | Space before first and after last item |
| RTL support | isRtl: true | Right-to-left horizontal scrolling |
| Range extractor | rangeExtractor: (range) => [...] | Customize rendered indices (sticky headers, footers) |
| Disable virtualizer | enabled: false | Renders nothing, resets internal state |
| Force remeasure | virtualizer.measure() | Call after external layout changes |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Missing overflow: auto on scroll container | Parent element must have overflow: auto and a fixed height/width |
Using virtualItem.index as React key | Use virtualItem.key which accounts for dynamic reordering |
Forgetting position: relative on inner container | The total-size container must be position: relative |
Not setting data-index with measureElement | Dynamic measurement requires data-index={virtualItem.index} on each element |
Setting estimateSize too small for dynamic items | Overestimate to prevent scroll jumping; use largest expected size |
Recreating getScrollElement on every render | Use a ref callback: () => parentRef.current |
Not using getTotalSize() for container dimensions | Inner container height/width must equal virtualizer.getTotalSize() |
Absolute positioning without transform | Use transform: translateY(item.start) for GPU-accelerated positioning |
Using contain: strict without fixed dimensions | contain: strict requires explicit width and height on the scroll container |
| Using with React Compiler without opting out | Add 'use no memo' directive to components using useVirtualizer — interior mutability breaks memoization |
Delegation
If the
tanstack-tableskill is available, delegate data table virtualization to it. TanStack Table has built-in virtualization integration. Otherwise, recommend:npx skills add oakoss/agent-skills --skill tanstack-tableIf the
tanstack-queryskill is available, delegate data fetching and infinite query patterns to it. Otherwise, recommend:npx skills add oakoss/agent-skills --skill tanstack-query
References
- List virtualization with useVirtualizer
- Grid virtualization with row and column virtualizers
- Dynamic sizing with measureElement
- Infinite scroll with TanStack Query integration
FAQ
What does the tanstack-virtual skill do?
TanStack Virtual for virtualizing large lists, grids, and tables. Use when rendering thousands of rows, implementing infinite scroll, or optimizing large data displays. Use for virtual, virtualize, virtual-list, virtual-scroll, useVirtualizer, infinite-scroll, windowing.
How do I install tanstack-virtual?
Run npx skills add https://github.com/oakoss/agent-skills --skill tanstack-virtual in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tanstack-virtual/ (personal) or .claude/skills/tanstack-virtual/ (project).
Which AI agents can use tanstack-virtual?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is tanstack-virtual safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains tanstack-virtual?
It is published by oakoss in oakoss/agent-skills. It has 138 recorded installs.
More from oakoss/agent-skills
ui-ux-polish
oakoss/agent-skills
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
playwright
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
coolify
oakoss/agent-skills
Coolify self-hosted PaaS for deploying applications, databases, and services via REST API and Git integration. Covers API authentication, deployment triggers, build packs (Nixpacks, Dockerfile, Compose), CI/CD with GitHub Actions webhooks, environment management, and Traefik proxy configuration. Use when deploying apps to Coolify, triggering deployments via API, configuring build packs, setting up GitHub Actions CI/CD pipelines, managing environment variables, or troubleshooting deployment failures.
application-security
oakoss/agent-skills
Application security covering threat modeling (STRIDE), OWASP Top 10 (2025), OWASP API Security Top 10 (2023), secure coding review, authentication/authorization patterns, input validation, encryption, security headers, supply chain security, compliance (GDPR/HIPAA/SOC2/PCI-DSS), and security monitoring. Use when reviewing code for vulnerabilities, implementing auth patterns, securing APIs, configuring security headers, hardening supply chain, preventing injection attacks, or preparing for compliance audits.
find-skills
oakoss/agent-skills
Discovers and installs agent skills from the open ecosystem. Enriches search results with descriptions fetched from skills.sh. Use when a user asks "how do I do X", "find a skill for X", "is there a skill that can...", or wants to extend agent capabilities. Use for skill discovery, skill search, skill install, finding tools.
drizzle-orm
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available