скилл CX Codex

webgpu-threejs-tsl — скилл для Claude Code

Q: Как установить webgpu-threejs-tsl в Claude Code?

Выполните `npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code`, затем ещё раз `npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code`. Файл скилла находится в `~/.claude/skills/webgpu-threejs-tsl/SKILL.md`.

Q: Какие импорты нужны для WebGPU и TSL?

Для Three.js используется `three/webgpu`, а функции TSL импортируются из `three/tsl`. Обычный входной путь Three.js для этого сценария не подходит.

Помогает писать Three.js-приложения с WebGPU, TSL-материалами, вычислительными шейдерами и постобработкой.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code

Открыть на GitHub

Что делает webgpu-threejs-tsl

Скилл даёт агенту справку и примеры для проектов Three.js с рендерером WebGPU. Он охватывает синтаксис TSL, узловые материалы, пользовательские функции, вычисления на GPU, эффекты постобработки и подключение WGSL.

Внутри есть документы по материалам, устройству WebGPU и восстановлению после потери GPU-устройства. Примеры включают базовую настройку, материал со своим шейдером, систему частиц, конвейер эффектов и сцену Земли с атмосферой. Есть шаблоны проекта и вычислительного шейдера.

Для импорта Three.js нужен путь three/webgpu, а функции TSL берутся из three/tsl. Это повод проверить импорты при переносе существующей сцены на WebGPU.

Какие задачи решает

настроить WebGPURenderer в проекте Three.js
создать узловой материал на TSL
перенести шейдерную логику с GLSL на TSL
написать вычислительный шейдер для массива экземпляров
собрать цепочку эффектов постобработки

Примеры запросов агенту

Настрой Three.js-сцену с WebGPURenderer и TSL-материалом.
Сделай систему частиц через вычислительный шейдер на GPU.
Помоги перенести GLSL-материал на TSL с пользовательской функцией Fn().

Как установить webgpu-threejs-tsl

1Через Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code

2Вручную: положить файлы

~/.claude/skills/webgpu-threejs-tsl/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/webgpu-threejs-tsl/

1Через Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a codex

2Вручную: положить файлы

.agents/skills/webgpu-threejs-tsl/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a cursor

2Вручную: положить файлы

.cursor/skills/webgpu-threejs-tsl/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install dgreenheck/webgpu-claude-skill webgpu-threejs-tsl

2Вручную: положить файлы

.github/skills/webgpu-threejs-tsl/SKILL.md

1Через Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a gemini-cli

2Командой платформы

gemini skills install https://github.com/dgreenheck/webgpu-claude-skill --path skills/webgpu-threejs-tsl

Вручную: положить файлы

.devin/skills/webgpu-threejs-tsl/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о webgpu-threejs-tsl

Как установить webgpu-threejs-tsl в Claude Code?

Выполните npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code, затем ещё раз npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code. Файл скилла находится в ~/.claude/skills/webgpu-threejs-tsl/SKILL.md.

Что делает webgpu-threejs-tsl?

Скилл направляет агента при разработке Three.js-приложений с WebGPU. В нём собраны материалы по TSL, узловым материалам, вычислительным шейдерам, WGSL и постобработке.

Какие импорты нужны для WebGPU и TSL?

Для Three.js используется three/webgpu, а функции TSL импортируются из three/tsl. Обычный входной путь Three.js для этого сценария не подходит.

Похожие скиллы

Всё по теме «Фронтенд и UI» →

threejs-fundamentals CloudAI-X Помогает настроить базовую сцену Three.js r186: рендерер, камеры, цикл анимации с THREE.Timer и import map для WebGL или WebGPU с TSL. CX Codex +1 17 400установок threejs-shaders CloudAI-X Скилл помогает писать кастомные GLSL-шейдеры и материалы для Three.js r186, настраивать униформы и переводить код на TSL для WebGPU. CX Codex +1 15 600установок threejs mrgoonie Скилл для ИИ-кодинга, который помогает собирать 3D-сцены, шейдеры и VR-опыты на Three.js. Пригодится, когда проект упирается в WebGL или WebGPU. CX Codex +1 1 200установок pixijs-custom-rendering pixijs Помогает писать кастомные шейдеры, юниформы, фильтры и батчеры в PixiJS v8 — на GLSL и WGSL, под WebGL и WebGPU. CX Codex +1 5 700установок threejs-scene-setup gamedev-skills Настраивает базовую сцену three.js и помогает найти причины пустого или чёрного canvas. Нужен при старте проекта, ресайзе, цикле рендеринга и OrbitControls. CX Codex +1 5 500установок threejs-webgl freshtechbro Скилл учит агента настраивать сцены Three.js, рендереры WebGL и WebGPU, свет, материалы и загрузку glTF-моделей. Пригодится для 3D-визуализаций и конфигураторов. CX Codex +1 4 600установок