# three-best-practices

Скилл с набором правил по Three.js: подсказывает агенту, как не течь по памяти и держать кадры. Пригодится, когда пишете или чините 3D-сцену.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1500 установок · ★ 64
- Автор: three-agent-skills
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/emalorenzo/three-agent-skills/tree/HEAD/skills/three-best-practices/SKILL.md
- Обновлён: 2026-01-28
- HTML: https://affpapa.org/nevibecode/skills/three-best-practices

## Что делает

Скилл собирает 120+ правил по Three.js в 18 категорий и расставляет их по приоритету — от настройки проекта до отладки. Агент подхватывает их, когда вы пишете код сцен, разбираете утечки памяти или работаете с шейдерами на GLSL и TSL. Срабатывает на задачах с геометрией, материалами, текстурами, светом, рендерингом WebGL и WebGPU.

Внутри — разбитые по префиксам блоки: `setup-` про импорты и `renderer.setAnimationLoop()`, `memory-` про dispose геометрий, материалов и рендер-таргетов, `render-` про один цикл `requestAnimationFrame` и лимит pixel ratio, `drawcall-` про InstancedMesh и BatchedMesh. Дальше идут геометрия, материалы, сжатие ассетов, свет и тени, граф сцены, шейдеры, WebGPU, Core Web Vitals, физика, WebXR, постобработка и мобильная оптимизация.

Правила опираются на официальные гайды Three.js из ветки `llms` и подборку 100 Three.js Tips от Utsubo. Указана версия Three.js 0.182.0+. Если проект сидит на старом релизе библиотеки, часть советов по WebGPU и TSL мимо — это повод сверить версию до того, как агент начнёт править код.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add emalorenzo/three-agent-skills --skill three-best-practices -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/three-best-practices/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/three-best-practices/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add emalorenzo/three-agent-skills --skill three-best-practices -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/three-best-practices/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add emalorenzo/three-agent-skills --skill three-best-practices -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/three-best-practices/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install emalorenzo/three-agent-skills three-best-practices
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/three-best-practices/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add emalorenzo/three-agent-skills --skill three-best-practices -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/emalorenzo/three-agent-skills --path skills/three-best-practices
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/three-best-practices/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add emalorenzo/three-agent-skills --skill three-best-practices -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/emalorenzo/three-agent-skills/tree/HEAD/skills/three-best-practices/SKILL.md

## Когда брать
- найти утечку памяти в сцене с динамическими текстурами
- свести число draw call к разумному минимуму
- выбрать между WebGLRenderer и WebGPURenderer
- ускорить загрузку моделей через Draco или Meshopt
- настроить тени так, чтобы они не съедали кадры

## Примеры запросов агенту
- проверь мою сцену на Three.js по правилам скилла и скажи, где течёт память
- перепиши этот цикл рендера: убери аллокации и оставь один setAnimationLoop
- стоит ли здесь InstancedMesh вместо сотни отдельных мешей?

## Похожие
- [threejs](https://affpapa.org/nevibecode/skills/mrgoonie-threejs.md) — скилл · 1200 установок
- [3d-sky-rays](https://affpapa.org/nevibecode/skills/3d-sky-rays.md) — скилл · 506 установок
- [threejs-react-three-fiber](https://affpapa.org/nevibecode/skills/threejs-react-three-fiber.md) — скилл · 1300 установок
- [react-three-fiber](https://affpapa.org/nevibecode/skills/react-three-fiber.md) — скилл · 3800 установок
- [threejs-shaders](https://affpapa.org/nevibecode/skills/threejs-shaders.md) — скилл · 15600 установок
- [three-js](https://affpapa.org/nevibecode/rules/three-js.md) — правило · ★ 3579

Из того же набора: [emalorenzo/three-agent-skills](https://affpapa.org/nevibecode/by/emalorenzo/three-agent-skills.md) — 2 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md