Fec list virtualization

Skill bovinphang/frontend-craft/skills/fec-list-virtualization

frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.

Install

npx -y skills add bovinphang/frontend-craft --skill fec-list-virtualization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

19 stars19 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when optimizing or reviewing large lists, virtual scrolling, windowing, react-window, TanStack Virtual, variable-height rows, dynamic measurement, infinite scroll, grid virtualization, or scroll performance; Chinese triggers include virtual lists, large list optimization, scroll performance.

SKILL.md

2.3 KB, as published. Nobody here has run it

List virtualization optimization

Purpose

Only the visible area is rendered through windowing, which solves the problem of excessive DOM and stuck scrolling in large lists.

Procedure

First confirm the list size and bottleneck: 500+ items, scrolling frame drops, too many DOM nodes, or memory surge before introducing virtualization.
First follow the existing framework, dependencies and design system constraints of the project, and then select the library according to the scenario: React can consider react-window or TanStack Virtual; Vue/Solid/Svelte, dynamic measurement, grid or cross-framework scenarios give priority to TanStack Virtual; the legacy react-virtualized is only maintained and not added.
Clarify item size, overscan, container height, key, rolling container and resize behavior.
Separate data paging and DOM virtualization during infinite scrolling; data acquisition can be combined with the data acquisition workflow.
Verify DOM node count, scrolling FPS, keyboard/screen reader experience, and Ctrl+F/SEO limitations.

Detailed reference

Load references/virtualization-patterns.md when it comes to the need for virtualization, library selection, fixed height, variable/dynamic height, infinite scrolling, grid virtualization, and performance considerations.

Constraints

SEO key content doesn’t exist only in dummy items.
Browser native Ctrl+F cannot search for unmounted items.
The Row root element must transparently transmit the style/measure ref provided by the virtual library.
If overscan is too high, memory will be wasted; if overscan is too low, the screen will be white.
Dynamic height measurement to handle ResizeObserver and layout jitter.

Expected Output

The scrolling of the 10,000+ item list is close to 60fps, the number of DOM nodes is stable within the visible area and buffer range, and the memory is reduced from O(n) to O(visible).