What this prompt does
This prompt asks the AI to build an infinite scroll component with virtual rendering for Vue 3 and TypeScript. It renders only [visible_buffer] items in the DOM regardless of total count ([total_items]+), supports dynamic row heights rather than fixed-height-only, and loads data through [data_source] integration. It shows loading skeletons while fetching, an error state with retry, scroll-position restoration on route change and browser back, and keyboard navigation with arrow keys, Page Up/Down, and Home/End.
The structure works because rendering tens of thousands of DOM nodes melts the browser, and virtual rendering — keeping only a small buffer mounted — is the only way large lists stay smooth. By exposing a typed useVirtualList composable and supporting both window and container scroll modes, the prompt produces something reusable, not a one-off. Accessibility live-region announcements and a frame-time target of [target_fps]ms keep it usable for everyone, with unit tests and a Storybook demo. Scroll-position restoration on route change and browser back is the detail that separates a polished list from a frustrating one, since losing the user's place after navigating away is exactly the kind of regression virtual lists tend to introduce.
When to use it
- You are rendering long lists — feeds, tables, logs — and the browser stutters or freezes.
- You have
[total_items]+ rows and need only[visible_buffer]mounted at a time. - Your rows vary in height and fixed-height virtual lists won't work.
- You need infinite loading wired to
[data_source]like a cursor-paginated API. - You want scroll position preserved across navigation and browser back.
- You want a reusable, typed
useVirtualListcomposable rather than a bespoke component.
Example output
Expect a Vue 3 Composition API component plus a typed useVirtualList composable, rendering only [visible_buffer] items from a [total_items]+ dataset. You get dynamic row-height handling, [data_source] infinite loading, loading skeletons, error-with-retry, scroll restoration, keyboard navigation, live-region accessibility, unit tests, and a Storybook demo — targeting [target_fps]ms frame time.
Pro tips
- Size
[visible_buffer]to comfortably cover the viewport plus overscan; too small causes blank flashes on fast scroll, too large erodes the performance win. - Dynamic row heights are the hard part — verify measurement-and-cache logic, since wrong height estimates cause scroll jumps.
- Match
[data_source]to your real API; cursor-based pagination integrates more cleanly than offset for infinite scroll. - Test scroll restoration on actual route changes and browser back, not just refresh — that is where naive implementations lose position.
- Treat the
[target_fps]ms frame-time budget as a profiling target; measure with real data volume, since small test sets hide jank. - Do not skip the live-region announcements; screen-reader users otherwise have no signal that new content loaded.
