Web Clone
Jane-xiaoer/claude-skill-web-clone
网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 /…
Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多,或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词:"Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于:通用…
$ npx skills add staruhub/ClaudeSkills --skill threejs-performance -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install staruhub/ClaudeSkills threejs-performance --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/staruhub/ClaudeSkills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/Geek-skills-threejs-performance .claude/skills/threejs-performance && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "threejs-performance" agent skill from https://github.com/staruhub/ClaudeSkills/tree/main/skills/Geek-skills-threejs-performance into .claude/skills/threejs-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-performance", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/staruhub/ClaudeSkills/tree/main/skills/Geek-skills-threejs-performanceType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add staruhub/ClaudeSkills --skill threejs-performance -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install staruhub/ClaudeSkills threejs-performance --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/staruhub/ClaudeSkills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/Geek-skills-threejs-performance .agents/skills/threejs-performance && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "threejs-performance" agent skill from https://github.com/staruhub/ClaudeSkills/tree/main/skills/Geek-skills-threejs-performance into .agents/skills/threejs-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-performance", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add staruhub/ClaudeSkills --skill threejs-performance -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install staruhub/ClaudeSkills threejs-performance --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/staruhub/ClaudeSkills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/Geek-skills-threejs-performance .cursor/skills/threejs-performance && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "threejs-performance" agent skill from https://github.com/staruhub/ClaudeSkills/tree/main/skills/Geek-skills-threejs-performance into .cursor/skills/threejs-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-performance", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/staruhub/ClaudeSkills.git --path skills/Geek-skills-threejs-performance--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add staruhub/ClaudeSkills --skill threejs-performance -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install staruhub/ClaudeSkills threejs-performance --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/staruhub/ClaudeSkills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/Geek-skills-threejs-performance .gemini/skills/threejs-performance && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "threejs-performance" agent skill from https://github.com/staruhub/ClaudeSkills/tree/main/skills/Geek-skills-threejs-performance into .gemini/skills/threejs-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-performance", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install staruhub/ClaudeSkills threejs-performanceInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add staruhub/ClaudeSkills --skill threejs-performance -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/staruhub/ClaudeSkills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/Geek-skills-threejs-performance .github/skills/threejs-performance && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "threejs-performance" agent skill from https://github.com/staruhub/ClaudeSkills/tree/main/skills/Geek-skills-threejs-performance into .github/skills/threejs-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-performance", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add staruhub/ClaudeSkills --skill threejs-performance -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install staruhub/ClaudeSkills threejs-performance --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/staruhub/ClaudeSkills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/Geek-skills-threejs-performance .opencode/skills/threejs-performance && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "threejs-performance" agent skill from https://github.com/staruhub/ClaudeSkills/tree/main/skills/Geek-skills-threejs-performance into .opencode/skills/threejs-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-performance", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
threejs-performanceThree.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多,或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词:"Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于:通用…
Threejs Performance is an agent skill from staruhub/ClaudeSkills. Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多,或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词:"Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于:通用 React 性能问题(用 vercel-react-best-practices)、WebGL/Three.js 入门教学、3D 美术资产的制作本身。
Its SKILL.md is about 900 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/assets.md`, `references/examples.md` and `references/webgpu.md`).
It sits in Game Development, covering 3D graphics and WebGL. It works with Three.js, Vercel and React. The repository describes itself as: 13 curated Agent Skills for research, product decisions, decks, publishing, audits, and more — portable across skills-compatible agents. The licence is MIT.
Read from SKILL.md and the folder at commit 66e02d2. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Threejs Performance loads about 904 tokens when it runs, and up to ~5.4k if it reads all its reference files. Until then it costs about 73 tokens; SKILL.md has 288 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from staruhub/ClaudeSkills at commit 66e02d2, republished under its MIT licence (© staruhub). 288 words, ~904 tokens.
.claude/skills/threejs-performance/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.绘制调用 < 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 三规则(下文) |
绘制调用密集掉帧 / 需要计算着色器做物理粒子(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 次绘制BatchedMeshmergeGeometries 合并new Materialgltf-transform optimize model.glb out.glb --texture-compress ktx2 --compress dracoreferences/assets.mdThree.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 手动触发 + 烘焙光照。
① 动画走 useFrame 直改 ref,永远不在 useFrame 里 setState ② 静态场景用 frameloop="demand" + invalidate() 按需渲染 ③ 显隐切 visible 属性,不要条件挂载 {show && <Model/>}(重挂载重建资源)。完整优化模板:references/examples.md。
WebGL → pmndrs/postprocessing(多效果合并 EffectPass);WebGPU → 原生 TSL 后处理管线。两者完整设置:references/examples.md。
renderer.info.render.calls < 100(超出需给出场景理由)renderer.info.memory 计数在增删对象后回落,无单调增长vercel-react-best-practices| 陷阱 | 具体表现 | 应对 |
|---|---|---|
| dispose 不彻底 | 只 dispose 了 geometry,material 上挂的 texture 全泄漏 | 遍历 material 属性逐个 dispose;GLTF ImageBitmap 还需 close() |
| useFrame 里 setState | 每帧触发 React 重渲染,帧率断崖 | 直改 ref;状态只在交互事件里更新 |
| 条件挂载切换模型 | {show && <Model/>} 每次重建几何体和纹理 | 切 visible 属性 |
| demand 模式忘 invalidate | 相机动了画面不动,被当成"卡死" | 交互回调里调用 invalidate() |
| 循环里 new Material | 1000 个网格 1000 个材质,合批全部失效 | 材质提到循环外共享 |
| PointLight 随手加阴影 | 一个点光 6 次阴影渲染,移动端直接跪 | 优先 SpotLight/DirectionalLight 阴影,点光阴影只留一个 |
stats-gl(FPS/CPU/GPU)· lil-gui(实时调参)· Spector.js(WebGL 帧捕获)· three-mesh-bvh(8 万+ 面 @60fps 射线检测)· r3f-perf(R3F 监控)
| 文件 | 何时读 |
|---|---|
references/webgpu.md | 迁移 WebGPU / 写 TSL / 计算着色器时 |
references/assets.md | 配置压缩管线、LOD、渐进加载时 |
references/examples.md | 需要完整可粘贴代码时(监控/内存清理/对象池/粒子/R3F 模板/后处理/上下文丢失恢复) |
© staruhub, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 3 other files (references) in skills/Geek-skills-threejs-performance of staruhub/ClaudeSkills.
Open the folder on GitHubat commit 66e02d2
Threejs Performance next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Threejs Performance this skillstaruhub/ClaudeSkills | 727 | — | ~904 | Automated safety check: Pass | MIT | |
| Web CloneJane-xiaoer/claude-skill-web-clone | 1k | 2 repos | ~2.7k | Automated safety check: Pass | MIT | |
| Improve Threejsmillionco/react-doctor | 15k | — | ~2.3k | Automated safety check: Pass | Custom licence | |
| Polycsslayoutit/polycss | 759 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Typegpusoftware-mansion-labs/skills | 291 | 2 repos | ~5.6k | Automated safety check: Pass | None | |
| Pmndrs Viversepmndrs/viverse | 132 | — | ~1.7k | Automated safety check: Pass | Custom licence |
Jane-xiaoer/claude-skill-web-clone
网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 /…
millionco/react-doctor
Audit and fix Three.js and React Three Fiber apps for frame-loop performance, GPU memory leaks, scene-graph correctness, and visual defects like z-fighting, shadow acne, wrong color space, and…
layoutit/polycss
Build PolyCSS scenes that render 3D meshes, primitive shapes, or custom polygons as DOM/CSS polygon elements.
software-mansion-labs/skills
TypeGPU is type-safe WebGPU in TypeScript. An agent skill from software-mansion-labs/skills.
pmndrs/viverse
Build, modify, debug, or publish VIVERSE-ready web games and 3D apps with Three.js, React Three Fiber, @pmndrs/viverse, @react-three/viverse, VIVERSE SDK integrations, character controllers…
davila7/claude-code-templates
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes.
staruhub/ClaudeSkills
A skill your agent uses when the user wants an evidence-based research memo, literature review, market/policy/technical landscape, or a multi-source decision brief with citations, trade-offs, and a…
staruhub/ClaudeSkills
用火山引擎 Podcast AI 模型生成中文双人对话播客。当用户要把文章、报告、话题文本转成播客音频、生成对话式音频内容时使用,需要环境具备火山引擎 APPID 和 ACCESSKEY。支持 mp3/oggopus/pcm/aac、语速调节、自定义音色、断点续传。不用于:单人朗读式 TTS(用普通语音合成)、英文播客(模型主要优化中文)、播客文稿本身的撰写(先用写作类 skill…
staruhub/ClaudeSkills
专业微信公众号文章助手,支持四个独立且可组合模式:article 写正文;image-prompts 从文章生成版本化、provider-neutral 的图片提示词 manifest 与稳定占位符,但不调用生图;layout 把文章和 manifest 确定性转换为微信安全的内联 HTML;full-pipeline…
staruhub/ClaudeSkills
A股分析研究助手,提供行情数据获取与技术面/基本面分析框架(仅供研究参考,不构成投资建议)。适用于:(1) 获取A股行情和历史数据,(2) 技术面分析(K线形态、MACD、KDJ、RSI、布林带等),(3) 基本面分析(财务指标、估值分析),(4) 板块热点追踪,(5) 选股策略筛选与量化因子分析,(6)…
staruhub/ClaudeSkills
Windows C盘清理和磁盘空间管理。当用户说C盘满了、磁盘空间不足、清理临时文件/缓存/回收站/系统日志、查找大文件、分析磁盘占用时使用。仅适用于 Windows 环境。不用于:macOS/Linux 磁盘清理、卸载软件(引导用户走系统卸载)、清理用户个人文件(只报告位置,删除决定权在用户)。
staruhub/ClaudeSkills
资深高考命题专家助手,提供专业的命题指导和评审服务。适用于创作高考试题、评审试题质量、分析试卷结构、了解命题趋势等场景。结合文档工具提取解压文件,使用网络搜索了解当年最新命题趋势,使用分析工具评估题目质量和试卷结构。涵盖"一核四层四翼"评价体系、题型规范、评分标准、命题流程等多个维度。不用于:大学/考研/中考命题(体系不同,仅可借鉴)、日常作业题编写、直接替考生解题。
Categories
Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多,或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词:"Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于:通用…. Threejs Performance is an agent skill from staruhub/ClaudeSkills.
Threejs Performance fits situations like: tasks that involve 3D graphics and WebGL.
Run `npx skills add staruhub/ClaudeSkills --skill threejs-performance -a claude-code`. Or copy the skill folder (skills/Geek-skills-threejs-performance in staruhub/ClaudeSkills) into .claude/skills/threejs-performance in your project. Claude Code loads it when a task matches its description.
Run `npx skills add staruhub/ClaudeSkills --skill threejs-performance -a codex`. Or copy the skill folder (skills/Geek-skills-threejs-performance in staruhub/ClaudeSkills) into .agents/skills/threejs-performance in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add staruhub/ClaudeSkills --skill threejs-performance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/threejs-performance, .gemini/skills/threejs-performance, .github/skills/threejs-performance and .opencode/skills/threejs-performance in your project.
SKILL.md names no scripts, command-line tools or credentials: Threejs Performance is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Threejs Performance is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 904 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.5k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Threejs Performance: Web Clone (Jane-xiaoer/claude-skill-web-clone, 1k stars), Improve Threejs (millionco/react-doctor, 15k stars), Polycss (layoutit/polycss, 759 stars) and Typegpu (software-mansion-labs/skills, 291 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
staruhub (a GitHub user) maintains it in staruhub/ClaudeSkills, which has 727 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on August 13, 2026.
Source: staruhub/ClaudeSkills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.