skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

ask-virtuoso

Implements virtualized React lists with react-virtuoso for feeds, chat, and infinite scroll.

1|Updated Aug 17, 2026
Search Tags:#React#frontend#chat ui#infinite scroll#sticky headers#react-virtuoso#virtualized list
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill ask-virtuoso-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-virtuoso
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/ask-virtuoso
Command: npx skills add https://github.com/NalinDalal/skillset --skill ask-virtuoso-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Rendering thousands of list items in React causes slow rendering, memory bloat, and janky scrolling. This Skill provides ready-to-use react-virtuoso patterns that render only visible items, handling variable heights, grouping, and infinite loading. ## Core Features & Use Cases - Virtualized Lists: Render long feeds, logs, and search results with variable-height items using the Virtuoso component. - Infinite Scroll & Grouping: Load more items on scroll with endContent triggers, and build sticky-header grouped lists with GroupedVirtuoso. - Chat Patterns: Auto-scroll to new messages, reverse lists, scroll restoration on back navigation, and jump-to-index controls. - Use Case: Build a chat interface where new messages auto-scroll into view only when the user is at the bottom, with a "new messages" button appearing otherwise. ## Quick Start Ask the agent to build a virtualized infinite-scroll feed using react-virtuoso with skeleton loading states.

Frequently Asked Questions about ask-virtuoso

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's Virtuoso component with an endContent trigger detected via react-intersection-observer. When the trigger enters the viewport, fetch the next page and append items to the data array, showing a spinner or skeleton while loading.

How to create a chat list with auto-scroll in react-virtuoso?▼

Track whether the user is near the bottom via the onScroll callback, then call scrollToIndex with align 'end' and smooth behavior when new messages arrive. Show a jump-to-bottom button when the user scrolls up.

Does react-virtuoso support variable height items?▼

Yes, react-virtuoso handles variable heights natively without manual measurement. If all items share a fixed height, pass fixedItemSize to skip measuring for maximum performance.

How do I add sticky group headers to a virtualized list?▼

Use GroupedVirtuoso with a groupCounts array describing each group's item count. Provide groupContent to render sticky headers and itemContent for individual rows.

Why does my virtualized list flash or jump while scrolling?▼

Flashing usually means overscan is too low or skeleton heights do not match real item heights. Increase the overscan prop and ensure loading skeletons match the exact rendered item height.

Related Skills

Explore More Software Engineering Skills→
open-gsdopen-gsd
1.0k

api-design

Design HTTP and GraphQL API contracts with endpoints, schemas, and versioning.

Official
Advanced
lorismazlorismaz

reactive-rails-ui

Add SPA-like interactivity to Rails 8+ server-rendered CRUD pages.

Community
Advanced
rmethodmrmethodm

ss-feedback

Implements loading, empty, error, and success feedback states in React components.

Community
Intermediate
TanStackTanStack
28.3k

vue/compose-with-tanstack-virtual

Compose TanStack Vue Table with TanStack Virtual for row and column virtualization.

Official
Advanced