agentsclimarketplace
Sign in

Fec list virtualization

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

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.From its SKILL.md

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

  • 21 stars21 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.

SKILL.md

2.3 KB, 400 tokens by cl100k_base, 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

  1. First confirm the list size and bottleneck: 500+ items, scrolling frame drops, too many DOM nodes, or memory surge before introducing virtualization.
  2. 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.
  3. Clarify item size, overscan, container height, key, rolling container and resize behavior.
  4. Separate data paging and DOM virtualization during infinite scrolling; data acquisition can be combined with the data acquisition workflow.
  5. 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).

What ships with it: 1 file

4.3 KB alongside SKILL.md

references/

Gives 0 of the 12 instructions most performance cost skills give in 400 tokens

Counted across 797 of the 1,117 authors here whose files we hold, read 2026-09-06

  • Check for product marketing context firstin 46 of 797, across 20 files
  • Measure before optimizingin 31 of 797, across 25 files
  • Profile first to identify the actual bottleneckin 23 of 797, across 22 files
  • Verify your robots.txt allows AI crawlersin 21 of 797, across 12 files
  • Import directly and avoid barrel filesin 19 of 797, across 15 files
  • Spawn all runs in the same turnin 18 of 797, across 11 files
  • Write a draft of the skillin 17 of 797, across 10 files
  • Understand the user's intentin 17 of 797, across 10 files
  • Use React.cache for per-request deduplicationin 16 of 797, across 11 files
  • Profile before optimizingin 16 of 797, across 14 files
  • Include specific numbers with sourcesin 15 of 797, across 8 files
  • Add lazy loading to below-fold imagesin 15 of 797, across 10 files

Said here and by no other author read

  • Confirm the list size and bottleneck
  • Follow existing framework and design constraints
  • Select the virtualization library by scenario
  • Clarify item size and container height
  • Separate data paging and DOM virtualization
  • Verify DOM node count and scrolling FPS

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.