# virtual-lists Teaches your coding agent list virtualization and windowing techniques for React. Solves scroll stutter and reduces initial rendering time for heavy datasets. - skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1500 installs · ★ 257 - Author: patterns.dev - License: MIT · policy=mirror · the beginning of the file is at the end of this page - Source: https://github.com/PatternsDev/skills/tree/HEAD/javascript/virtual-lists/SKILL.md - Updated: 2026-04-15 - HTML: https://affpapa.org/en/nevibecode/skills/virtual-lists ## What it does This skill guides coding agents through windowing patterns using `react-window` and `react-virtualized`. Instead of mounting the entire dataset at once, the agent learns to render only elements visible within the current scrolling container. It coordinates relative wrapper positioning with absolute item offsets. The guide details implementations for `FixedSizeList`, `VariableSizeList`, and two-dimensional grids with `FixedSizeGrid`. It covers incremental data fetching via `react-window-infinite-loader` and suggests CSS `content-visibility: auto` for simpler interfaces without external libraries. Switching from `react-virtualized` to `react-window` can save around 20-30KB gzipped. Virtualization breaks when accessibility requirements demand every element present in the DOM for screen readers. Skip it also for small lists under 100 items or items with unpredictable dynamic heights. ## Install ### Claude Code (native platform) 1. **Skills CLI (Vercel)** ```bash npx skills add PatternsDev/skills --skill virtual-lists -a claude-code ``` 2. **Manually: put the files in place** - File: `~/.claude/skills/virtual-lists/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/virtual-lists/ ### Codex 1. **Skills CLI (Vercel)** ```bash npx skills add PatternsDev/skills --skill virtual-lists -a codex ``` 2. **Manually: put the files in place** - File: `.agents/skills/virtual-lists/SKILL.md` — For all projects use ~/.agents/skills/ ### Cursor 1. **Skills CLI (Vercel)** ```bash npx skills add PatternsDev/skills --skill virtual-lists -a cursor ``` 2. **Manually: put the files in place** - File: `.cursor/skills/virtual-lists/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/ ### GitHub Copilot 1. **GitHub CLI** ```bash gh skill install PatternsDev/skills virtual-lists ``` 2. **Manually: put the files in place** - File: `.github/skills/virtual-lists/SKILL.md` ### Gemini CLI 1. **Skills CLI (Vercel)** ```bash npx skills add PatternsDev/skills --skill virtual-lists -a gemini-cli ``` 2. **Platform CLI** ```bash gemini skills install https://github.com/PatternsDev/skills --path javascript/virtual-lists ``` ### Windsurf (Devin Desktop) **Manually: put the files in place** - File: `.devin/skills/virtual-lists/SKILL.md` — The legacy .windsurf/skills/ path still works ### OpenCode **Skills CLI (Vercel)** ```bash npx skills add PatternsDev/skills --skill virtual-lists -a opencode ``` ### Claude.ai **Claude.ai** - Zip the folder and upload it in Settings → Capabilities → Skills Where a file is given instead of a command, copy the files from the source to that path: https://github.com/PatternsDev/skills/tree/HEAD/javascript/virtual-lists/SKILL.md ## When to use it - eliminate scroll jank when rendering massive lists in React - cut initial DOM rendering delays for large tabular datasets - configure `FixedSizeList` or `VariableSizeList` based on row height - virtualize 2D tables across both axes using `FixedSizeGrid` - implement lazy data fetching with `react-window-infinite-loader` ## Example prompts - Refactor this React list to use react-window FixedSizeList - Set up a virtualized 2D table using FixedSizeGrid - Implement infinite scrolling with react-window-infinite-loader ## Source text · SKILL.md · MIT Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: e92dd2546df949c9. BEGIN THIRD-PARTY FILE e92dd2546df949c9 ```text --- name: virtual-lists description: Teaches virtual list (windowing) techniques for rendering large datasets. Use when rendering lists or tables with hundreds or thousands of items that cause scroll jank or slow initial render. paths: - "**/*.js" - "**/*.ts" license: MIT metadata: author: patterns.dev version: "1.1" related_skills: - "module-pattern" - "singleton-pattern" --- # List Virtualization ## Table of Contents - [When to Use](#when-to-use) - [When NOT to Use](#when-not-to-use) - [Instructions](#instructions) - [Details](#details) - [Source](#source) List virtualization (also known as windowing) is the idea of rendering only visible rows of content in a dynamic list instead of the entire list. The rows rendered are only a small subset of the full list with what is visible (the window) moving as the user scrolls. This can improve rendering performance. If you use React and need to **display large lists of data efficiently**, you may be familiar with [react-virtualized](https://bvaughn.github.io/react-virtualized/). It's a windowing library by [Brian Vaughn](https://twitter.com/brian_d_vaughn) that renders only the items currently visible in a list (within a scrolling "viewport"). This means you don't need to pay the cost of thousands of rows of data being rendered at once. ## When to Use - Use this when rendering large lists or grids (hundreds/thousands of items) that cause performance issues - This is helpful for reducing initial render time and improving scroll performance ## When NOT to Use - For short lists (under ~100 items) where native rendering is fast enough without virtualization - When accessibility requirements demand all list items be in the DOM for screen readers - When the list items have unpredictable, content-dependent heights that make virtualization measurements unreliable ## Instructions - Use `react-window` (or `react-virtualized`) to render only visible items in a scrollable container - Choose `FixedSizeList` for items of equal height or `VariableSizeList` for items of different heights - Use `react-window-infinite-loader` for incrementally loading data as the user scrolls - Consider CSS `content-visibility: auto` for simpler cases where full virtualization isn't needed ## Details ### How does list virtualization work? "Virtualizing" a list of items involves **maintaining a window** and **moving that window around your list**. Windowing in react-virtualized works by: - Having a small container DOM element (e.g `