← Voltar para o catálogo
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 虚拟列表, 大列表优化, 滚动性能.
Ver no GitHub ↗
Copiar URL do repo
Copiar link do SKILL.md Licença: MIT
Como adicionar
Copiar comando
/plugin marketplace add bovinphang/frontend-craft
O comando exato pode variar conforme o repositório. Confira o README no GitHub.
Para o autor da skill
Cole no README do seu repo
Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.
[](https://www.skillteca.com.br/skills/fec-list-virtualization)
Copiar snippet
Cria interfaces frontend distintas e de nível de produção com alta qualidade de design, gerando código criativo e polido e design de UI que evita a estética genérica de IA. Use para construir componentes web, páginas e aplicações, ou para estilizar/embelezar UIs web.
Design e Frontend
#ai
#css
por anthropics
Guia para criar servidores MCP (Model Context Protocol) de alta qualidade que permitem que LLMs interajam com serviços externos por meio de ferramentas bem projetadas. Use ao construir servidores MCP para integrar APIs ou serviços externos, seja em Python (FastMCP) ou Node/TypeScript (MCP SDK).
Design e Frontend
#api
#llm
por anthropics
Kit de ferramentas para interagir e testar aplicações web locais usando Playwright. Suporta a verificação de funcionalidades de frontend, depuração de comportamento da UI, captura de screenshots do navegador e visualização de logs do navegador.
Design e Frontend
#test
por anthropics
Conjunto de ferramentas para criar artefatos HTML elaborados e multi-componentes para claude.ai, utilizando tecnologias web frontend modernas (React, Tailwind CSS, shadcn/ui). Use para artefatos complexos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui, não para artefatos HTML/JSX simples de arquivo único.
Design e Frontend
#ai
#css
por anthropics
Alerta por categoria
1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.
Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.
Ler descrição completa Recolher descrição 列表虚拟化优化
Purpose
通过窗口化只渲染可视区域，解决大列表 DOM 过多和滚动卡顿。
Procedure
先确认列表规模和瓶颈：500+ 项、滚动掉帧、DOM 节点过多或内存飙升才引入虚拟化。 固定高度列表用 react-window；动态高度、跨框架或高级场景用 TanStack Virtual；遗留项目可维护 react-virtualized。 明确 item size、overscan、容器高度、key、滚动容器和 resize 行为。 无限滚动时分离数据分页和 DOM 虚拟化；数据获取可联用数据获取 workflow。 验证 DOM 节点数、滚动 FPS、键盘/屏幕阅读器体验和 Ctrl+F/SEO 限制。 Detailed References
涉及固定高度列表、可变/动态高度、无限滚动、网格虚拟化和性能注意事项时，加载 [references/virtualization-patterns.md](references/virtualization-patterns.md)。
Constraints
SEO 关键内容不要只存在于虚拟项中。 浏览器原生 Ctrl+F 无法搜索未挂载项目。 Row 根元素必须透传虚拟库提供的 style/measure ref。 overscan 过大会浪费内存，过小会白屏。 动态高度测量要处理 ResizeObserver 和布局抖动。 Expected Output
10000+ 项列表滚动接近 60fps，DOM 节点数稳定在可视区域及缓冲区范围，内存从 O(n) 降至 O(visible)。
Compartilhar
X
LinkedIn
Copiar link
