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 staruhub/ClaudeSkills --skill geek-skills-threejs-performancegit clone --depth 1 https://github.com/staruhub/ClaudeSkillsWrote 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/staruhub/claudeskills/geek-skills-threejs-performance)<a href="https://agentmods.dev/skills/staruhub/claudeskills/geek-skills-threejs-performance"><img src="https://agentmods.dev/badge/skills/staruhub/claudeskills/geek-skills-threejs-performance/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/staruhub/claudeskills/geek-skills-threejs-performance"><img src="https://agentmods.dev/badge/skills/staruhub/claudeskills/geek-skills-threejs-performance.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00150 | $0.01814 |
| Opus 5 | $0.00075 | $0.00907 |
| Sonnet 5 | $0.00030 | $0.00363 |
| Haiku 4.5 | $0.00015 | $0.00181 |
Grade A, and why
threejs-performance 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 12d 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.
How it starts
The opening of the file, as written. The whole thing — 95 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Three.js 性能优化指南
黄金法则
绘制调用 < 100 次/帧。 三角形数量不如绘制调用数量重要；超过 500 次绘制调用，强大 GPU 也会吃力。用 renderer.info.render.calls 监控（完整监控代码见 references/examples.md）。
诊断决策树
| 症状 | 先查 | 深入 |
|---|---|---|
| 掉帧、卡顿 | renderer.info.render.calls 是否 >100 |
实例化/合批（下文），后处理链 |
| 内存持续增长 | renderer.info.memory 的 geometries/textures 计数是否只增不减 |
dispose 铁律（下文），references/examples.md 完整清理代码 |
| 加载慢、显存爆 | 模型是否未压缩 | references/assets.md 压缩管线 |
| 粒子/物理瓶颈 | CPU 粒子是否 >5 万 | WebGPU 计算着色器，references/webgpu.md |
| R3F 项目莫名重渲染 | useFrame 里是否 setState | R3F 三规则（下文） |
各领域规则速查
WebGPU：何时迁移
绘制调用密集掉帧 / 需要计算着色器做物理粒子（CPU 约 5 万上限，GPU 可达数百万）/ 复杂后处理链卡顿。
WebGPURenderer 必须 await renderer.init()。TSL 写一次自动编译 WGSL/GLSL。
浏览器支持下限（记录时点数据，现查 caniuse 为准）：Chrome/Edge 113+，Firefox 141+，Safari 26+。
初始化回退、TSL 完整指南、计算着色器示例：references/webgpu.md。
绘制调用优化
- 大量相同几何体（树、石头）→
InstancedMesh：1000 棵树 = 1 次绘制 - 多个不同几何体共享材质 →
BatchedMesh - 静态小物件 →
mergeGeometries合并 - 材质共享复用，永远不要在循环里
new Material
资源压缩（收益数字）
- Draco 几何体压缩：体积减 90-95%
- KTX2 纹理：GPU 内存约降 10 倍
- 一条命令：
gltf-transform optimize model.glb out.glb --texture-compress ktx2 --compress draco - 解码器路径配置与 Meshopt/Draco 选型：
references/assets.md
内存铁律
Three.js 不会自动回收 GPU 资源。 移除对象必须：geometry.dispose() + 遍历 material 的所有 texture 属性逐个 dispose + material.dispose()；GLTF 的 ImageBitmap 还要 texture.source.data.close()。频繁增删对象用对象池。完整代码：references/examples.md。
着色器三规则
① 移动端 precision mediump float（约快 2 倍）② 用 mix/step 替代 if 分支（分支破坏 GPU 并行）③ 数据打包进 vec4，一次纹理取 4 个值。
光照阴影预算
活动光源 ≤3；PointLight 阴影 = 每光源 6 次阴影贴图渲染；贴图尺寸移动端 512-1024、桌面 1024-2048；静态场景 shadowMap.autoUpdate = false 手动触发 + 烘焙光照。
React Three Fiber 三规则
① 动画走 useFrame 直改 ref，永远不在 useFrame 里 setState ② 静态场景用 frameloop="demand" + invalidate() 按需渲染 ③ 显隐切 visible 属性，不要条件挂载 {show && <Model/>}（重挂载重建资源）。完整优化模板：references/examples.md。
后处理选型
WebGL → pmndrs/postprocessing（多效果合并 EffectPass）；WebGPU → 原生 TSL 后处理管线。两者完整设置：references/examples.md。
What ships with it
3 files 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.
- 12d ago First seen · 95 lines · 150 tokens per session scan A 65ae6ea2aba3
threejs-performance is a skill published in the GitHub repository staruhub/ClaudeSkills (712 stars, last pushed 29d ago), licensed MIT. It adds 150 tokens to every session and 1,814 once invoked, about $0.0007 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
performance-profiler
Profile and optimize application performance including load times, memory usage, and rendering. Use when debugging slow performance, memory leaks, or optimizing app speed.
error-boundary-creator
Create error boundaries, error handling, and fallback UIs for React applications. Use when implementing error handling, creating fallback components, or setting up error reporting.
swc-plugin-compatibility
Diagnose and fix Lingui SWC plugin compatibility errors with Next.js, Vite, Rspack, or other SWC runtimes. Use when seeing errors like "failed to invoke plugin", "failed to run Wasm plugin transform", "Failed to deserialize program received from host", "Failed to execute SWC plugin", "out of bounds memory access", or…
frontend-bugfix-debugger
Diagnose and fix frontend defects from evidence, including unclear UI/runtime errors, broken routes, styling regressions, and hydration or client issues. Reproduce before editing; exclude planned refactors and backend-only debugging.
sc-dx
SI-Coder developer experience skill for frontend codebases: fast orientation, predictable project structure, coherent component APIs, design-token reuse, actionable build/test errors, safe local changes, debugging ergonomics, documentation, and low-friction verification.
cross-platform-error-handling
Design consistent error handling across web, mobile, and React Native—central handlers, user-facing copy, retry, and logging.