ask-virtual-list

Implements virtualized React lists with infinite scroll, variable heights, and scroll restoration using Virtuoso.

1|Updated Aug 17, 2026
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill ask-virtual-list-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-virtual-list
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/ask-virtual-list
Command: npx skills add https://github.com/NalinDalal/skillset --skill ask-virtual-list-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-virtuoso, react-intersection-observer.

What problem does it solve? Rendering long lists like feeds, chats, and logs causes jank, layout shift, and frozen tabs when thousands of items live in the DOM. This Skill provides a proven pattern for building smooth 60fps virtualized lists with infinite scroll and variable-height items. ## Core Features & Use Cases - Virtualized List Pattern: Quality checklist covering overscan, height caching, skeleton loading, and Intersection Observer-based load-more triggers. - Ready-to-Adapt Components: Includes a generic VirtualList wrapper, an activity feed example with paginated loading, and a chat list with auto-scroll-to-bottom behavior. - Scroll Restoration Hook: Saves and restores scroll position via sessionStorage so back navigation returns users to their place. - Use Case: You are building a notifications feed with 10,000+ items of varying heights. Use this Skill to implement Virtuoso with skeleton placeholders, infinite scroll, and sticky section headers without layout shift. ## Quick Start Ask the agent to build a virtualized infinite-scroll feed with variable-height items and skeleton loading using Virtuoso.

Frequently Asked Questions about ask-virtual-list

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

FAQPage Schema
How do I build an infinite scroll list in React?▼

Use react-virtuoso with an Intersection Observer on an end-content element to trigger loadMore when the user approaches the bottom. Track hasMore and isLoading state to prevent duplicate requests, and show skeleton placeholders while fetching.

react-window vs react-virtuoso for variable height lists?▼

react-virtuoso handles variable heights, grouping, and infinite scroll out of the box, while react-window's fixed-height mode breaks with variable content. For dynamic content like feeds and chats, Virtuoso is the recommended choice.

How do I restore scroll position on back navigation in React?▼

Save the scroller's scrollTop to sessionStorage on unmount and restore it on mount using a useScrollRestoration hook. Set history.scrollRestoration to 'manual' so the browser does not interfere with your saved position.

Why does my virtualized list flash blank space on fast scroll?▼

Blank flashes happen when overscan is too low, meaning not enough items render above and below the viewport. Increase overscan to render 5-10 extra items in each direction so content is ready before it scrolls into view.

When should I not use a virtualized list?▼

Avoid virtualization for short lists under 100 items where rendering everything is cheaper than the added complexity. For column-based data, use a table solution like TanStack Table instead of a virtual list.