virt-grid

Name: virt-grid
Availability: InStock
Author: reynalivan

Virtualize large lists and grids with TanStack Virtual for React 19.

Updated Feb 15, 2026

Search Tags:#react #virtualization #infinite-scroll #frontend-performance #performance-optimization #list-rendering #tanstack-virtual

Ready to run

npx skills add https://github.com/reynalivan/EMMM2 --skill virt-grid

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: virt-grid
Source: https://github.com/reynalivan/EMMM2/tree/main/.agent/skills/virt-grid
Command: npx skills add https://github.com/reynalivan/EMMM2 --skill virt-grid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Large lists and grids render slowly, causing jank and lag in complex UIs; this skill provides deterministic virtualization to render only visible items.

Core Features & Use Cases

Efficient rendering of long lists and grids using TanStack Virtual.
Infinite scrolling support via useInfiniteQuery integration for seamless data loading.
React 19 compatibility guidelines to avoid flushSync warnings and ensure stable IDs, with examples for common UI patterns.

Quick Start

Apply virt-grid to your large list container to enable efficient virtualization and smooth scrolling.

Frequently Asked Questions about virt-grid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I improve frontend performance for large list rendering in React?▼

Large list rendering performance improves by applying virtualization to render only visible items. This skill virtualizes large lists and grids using TanStack Virtual to eliminate UI jank and lag in complex interfaces.

How do I integrate infinite scroll with virtualized lists using useInfiniteQuery?▼

Infinite scroll integrates with virtualized lists via useInfiniteQuery to enable seamless data loading. This skill supports infinite scrolling to dynamically fetch and render data as users scroll through large grids.

Does this React virtualization approach work with React 19?▼

React 19 compatibility is supported through specific guidelines to avoid flushSync warnings and ensure stable IDs. This skill provides examples for common UI patterns to maintain smooth virtualization in React 19 environments.

What container requirements are needed to virtualize a frontend grid?▼

Virtualizing a frontend grid requires explicit container height, overflow-y auto, and relative parent positioning. This skill enforces these functional requirements to correctly calculate visible item rendering.

Why does my virtualized list scroll lag in complex UIs?▼

Virtualized list scroll lag occurs when large lists render all items simultaneously instead of only visible ones. This skill solves the problem by deterministically virtualizing large grids to improve rendering performance.

When should I use frontend virtualization for list rendering?▼

Frontend virtualization is needed when rendering large lists or grids causes UI jank. This skill targets complex interfaces like FolderGrid, ModList, and ConsoleView to ensure smooth scrolling performance.