Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.
by Iván855 installs69 stars
Coding
List Virtualization
Try itUse 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.
What it does
1. 先确认列表规模和瓶颈：500+ 项、滚动掉帧、DOM 节点过多或内存飙升才引入虚拟化。 2. 先遵循项目现有框架、依赖和设计系统约束，再按场景选库：React 可考虑 或 TanStack Virtual；Vue/Solid/Svelte、动态测量、网格或跨框架场景优先考虑 TanStack Virtual；遗留 只维护不新增。 3. 明确 item size、overscan、容器高度、key、滚动容器和 resize 行为。 4. 无限滚动时分离数据分页和 DOM 虚拟化；数据获取可联用数据获取 workflow。 5. 验证 DOM 节点数、滚动 FPS、键盘/屏幕阅读器体验…
The skill document
列表虚拟化优化
Purpose
通过窗口化只渲染可视区域，解决大列表 DOM 过多和滚动卡顿。
Procedure
- 先确认列表规模和瓶颈：500+ 项、滚动掉帧、DOM 节点过多或内存飙升才引入虚拟化。
- 先遵循项目现有框架、依赖和设计系统约束，再按场景选库：React 可考虑
react-window或 TanStack Virtual；Vue/Solid/Svelte、动态测量、网格或跨框架场景优先考虑 TanStack Virtual；遗留react-virtualized只维护不新增。 - 明确 item size、overscan、容器高度、key、滚动容器和 resize 行为。
- 无限滚动时分离数据分页和 DOM 虚拟化；数据获取可联用数据获取 workflow。
- 验证 DOM 节点数、滚动 FPS、键盘/屏幕阅读器体验和 Ctrl+F/SEO 限制。
详细参考
涉及是否需要虚拟化、库选型、固定高度、可变/动态高度、无限滚动、网格虚拟化和性能注意事项时，加载 references/virtualization-patterns.md。
Constraints
- SEO 关键内容不要只存在于虚拟项中。
- 浏览器原生 Ctrl+F 无法搜索未挂载项目。
- Row 根元素必须透传虚拟库提供的 style/measure ref。
- overscan 过大会浪费内存，过小会白屏。
- 动态高度测量要处理 ResizeObserver 和布局抖动。
Expected Output
10000+ 项列表滚动接近 60fps，DOM 节点数稳定在可视区域及缓冲区范围，内存从 O(n) 降至 O(visible)。
Related skills
Write, debug, and tune Playwright specs with locator strategy, trace diagnosis, and CI-aware timeouts.
by ivangdavila1.3k installs130 stars
Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.
by Iván559 installs18 stars
Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.
by johnpatternai22 installs8 stars
Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.
by nssa.io1.0k installs47 stars
Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.
by fly0pants4.3k installs296 stars
More from bovinphang
Browse all skillsGenerate or edit diagrams, visual assets, and image workflows with reviewable PNG self-checks and bounded self-repair.
by bovinphang9 installs1 stars
Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI expo
by bovinphang5 installs
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or
by bovinphang8 installs
Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventio
by bovinphang10 installs1 stars
Use when creating, reviewing, or restructuring frontend monorepos with pnpm workspace, Turborepo, Nx, multi-package dependency boundaries, task orchestration, package naming, or package publishing; Chinese triggers include monorepo, workspace, multi-package.
by bovinphang10 installs1 stars
Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chines
by bovinphang10 installs1 stars