Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add bovinphang/frontend-craft --skill fec-list-virtualizationgit clone --depth 1 https://github.com/bovinphang/frontend-craftWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/bovinphang/frontend-craft/fec-list-virtualization)<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-list-virtualization"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-list-virtualization.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00069 | $0.00512 |
| Opus 5 | $0.00034 | $0.00256 |
| Sonnet 5 | $0.00014 | $0.00102 |
| Haiku 4.5 | $0.00007 | $0.00051 |
Grade A, and why
fec-list-virtualization scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
列表虚拟化优化
用途
通过窗口化只渲染可视区域，解决大列表 DOM 过多和滚动卡顿。
流程
- 先确认列表规模和瓶颈：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。
约束
- SEO 关键内容不要只存在于虚拟项中。
- 浏览器原生 Ctrl+F 无法搜索未挂载项目。
- Row 根元素必须透传虚拟库提供的 style/measure ref。
- overscan 过大会浪费内存，过小会白屏。
- 动态高度测量要处理 ResizeObserver 和布局抖动。
预期输出
10000+ 项列表滚动接近 60fps，DOM 节点数稳定在可视区域及缓冲区范围，内存从 O(n) 降至 O(visible)。
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 35 lines · 69 tokens per session scan A a2f48acb4348
fec-list-virtualization is a skill published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 7d ago), licensed MIT. It adds 69 tokens to every session and 512 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
brand-design
Brand-aware design system generator that acts as Head of Brand. Translates abstract brand language into a mathematically-validated, implementation-ready design system, writes creative-brief.md as the source of truth for all UI/UX in a project, and optionally compiles it to framework tokens (Tailwind v4 @theme, v3…
mobile-flows-maestro
This skill should be used when Maestro is explicitly requested or already present and the task is to author, run, or debug iOS/Android Maestro flows; use Maestro MCP; or handle Maestro selectors, system UI, permissions, Keychain, JavaScript, waits, device state, flakiness, or CI. Evidence includes a .maestro directory…
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design…
genpage
Creates, updates, and deploys Power Apps generative pages for model-driven apps using React v17, TypeScript, and Fluent UI V9. Orchestrates specialist agents for planning, entity creation, and code generation. Use it when user asks to build, retrieve, or update a page in an existing Microsoft Power Apps model-driven…
recipe-front-review
Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.
boundaries
Analyze Phoenix context boundaries and module coupling via mix xref. Use when checking cross-context calls, validating dependencies, before splitting modules, or reviewing architecture.