skills.rest
lynx-family
lynx-familyOFFICIAL
Explore all skills by this author →
Website𝕏@lynxjs_orgGitHub

lynx-ui-list

Virtualize large scrollable lists by rendering only visible items.

115|10|Updated Jan 15, 2026
Search Tags:#performance#react#list#virtualization#scrolling#flow-layout#waterfall-layout
One-click install
npx skills add https://github.com/lynx-family/lynx-ui --skill lynx-ui-list
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lynx-ui-list
Source: https://github.com/lynx-family/lynx-ui/tree/main/packages/lynx-ui-list
Command: npx skills add https://github.com/lynx-family/lynx-ui --skill lynx-ui-list

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rendering large lists efficiently by virtualizing items so only visible ones are mounted, reducing CPU work and memory usage in scroll-heavy interfaces.

Core Features & Use Cases

  • Virtual Scrolling: List and FeedList render only visible items for smooth performance with large datasets.
  • Flexible layouts: Supports three modes: single, flow, and waterfall; FeedList enables multi-column layouts.
  • Height control: Use listMaxSize to cap container size and preserve predictable scrolling behavior.

Quick Start

Create a vertical List with a unique listId, set listType to single (or flow/waterfall), and render items using list-item as direct children.

Frequently Asked Questions about lynx-ui-list

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render large scrollable lists without performance drops?▼

Virtual scrolling renders large lists by mounting only visible items, reducing CPU work and memory usage to maintain smooth performance on massive datasets.

What's the best way to implement a waterfall layout for dynamic list data?▼

Use FeedList to implement multi-column layouts like waterfall or flow, enabling flexible arrangement of dynamic data loading within virtualized scrollable containers.

How do I control container height for predictable list scrolling?▼

Apply listMaxSize to cap the scrollable container height, preserving predictable scrolling behavior while virtualizing items in view within large datasets.

Does virtual scrolling support single, flow, and waterfall layout modes?▼

Virtual scrolling supports single, flow, and waterfall layout modes; FeedList specifically enables multi-column arrangements for responsive list interfaces.

How do I configure nested scrolling within a virtualized list?▼

Virtualized lists support nested scrolling configurations alongside exposing listId, listType, spanCount, and listMaxSize properties for dynamic data loading and event handling.

Why does rendering huge datasets cause high memory usage in scroll-heavy interfaces?▼

Rendering all items simultaneously causes high memory usage; virtualization solves this by rendering only visible items, drastically reducing CPU work and memory overhead.

Related Skills

Explore More Software Engineering Skills→
soham2008xyzsoham2008xyz

vercel-react-native-skills

Enforces React Native rendering, list virtualization, animation patterns to prevent crashes and improve performance.

Community
Intermediate
jiaiyanjiaiyan
21

el-table-v2

Render large datasets in a virtualized table component with fixed columns and custom cell renderers.

Community
Advanced
ThomashighbaughThomashighbaugh
1

react-key-prop

Identify and enforce stable list item keys in React components.

Community
Basic
mohamedgshoaibmohamedgshoaib
5

virtual-lists

Implement list virtualization with react-window to render visible subsets of large datasets.

Community
Intermediate