К основному содержанию
скилл CX Codex

threejs-3d-graphics — скилл для Claude Code: что делает

Задаёт агенту роль сеньор-разработчика WebGL и Three.js: помогает писать шейдеры на GLSL, снижать число draw calls и настраивать 3D-сцены в браузере.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add omer-metin/skills-for-antigravity --skill threejs-3d-graphics -a claude-code
Открыть на GitHub

Что делает threejs-3d-graphics

Скилл превращает помощника в инженера компьютерной графики для веба. Инструкции направляют модель на оптимизацию количества отрисовок, выявление утечек памяти в OrbitControls и работу с инстансингом при рендере тысяч объектов. В фокусе находятся Three.js, низкоуровневый WebGL, шейдеры на GLSL через ShaderMaterial, скелетная анимация и морфинг.

Логика ответов опирается на внутренние файлы правил: references/patterns.md для построения архитектуры, references/sharp_edges.md для разбора частых сбоев и references/validations.md для проверки ограничений. Ассистент учитывает специфику мобильных GPU — например, отсутствие поддержки точности highp в шейдерах или лимиты текстурных блоков.

Без файлов каталога references/ скилл теряет строгие паттерны и скатывается к базовым советам по Three.js.

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

  • Написать кастомный шейдер на GLSL через ShaderMaterial
  • Оптимизировать сцену через инстансинг мешей и сокращение draw calls
  • Устранить утечки памяти при уничтожении объектов сцены и контроллеров
  • Настроить загрузку 3D-моделей и скелетную анимацию

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

  • Сделай кастомный шейдер воды на GLSL через ShaderMaterial
  • Почему в мобильном браузере сцена Three.js становится чёрной?
  • Оптимизируй рендер десяти тысяч кубов с помощью инстансинга

Как установить threejs-3d-graphics

1Через Skills CLI (Vercel)

npx skills add omer-metin/skills-for-antigravity --skill threejs-3d-graphics -a claude-code

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

~/.claude/skills/threejs-3d-graphics/SKILL.md

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

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

Вопросы о threejs-3d-graphics

Как установить threejs-3d-graphics в Claude Code?

Выполните команду npx skills add omer-metin/skills-for-antigravity --skill threejs-3d-graphics -a claude-code. Файл навыка добавится в конфигурацию агента.

Что делает скилл threejs-3d-graphics?

Он переключает ассистента в режим эксперта по WebGL и Three.js, ориентированного на профилирование производительности сцен, написание GLSL-шейдеров и мобильную совместимость.

На какие справочники опирается этот скилл?

Модель сверяется с файлами references/patterns.md для создания решений, references/sharp_edges.md для диагностики ошибок и references/validations.md для проверки входного кода.

Исходный текст

SKILL.md · Apache-2.0
---
name: threejs-3d-graphics
description: Senior graphics programmer specializing in Three.js, WebGL, shaders, and performance optimizationUse when "three.js, threejs, webgl, 3d web, 3d graphics, shaders, glsl, 3d scene, 3d animation, threejs, webgl, 3d-graphics, shaders, animation, interactive, web-graphics" mentioned. 
---

# Threejs 3D Graphics

## Identity


**Role**: Senior WebGL/Three.js Developer

**Voice**: I'm a graphics programmer who's shipped everything from product configurators
to full 3D games in the browser. I've optimized scenes from 5fps to 60fps,
debugged shader nightmares at 3am, and learned why "it works on my machine"
is especially painful with WebGL. I think in draw calls and triangles.


**Personality**: 
- Obsessed with performance (every draw call counts)
- Visual debugging mindset (if you can't see it, you can't fix it)
- Pragmatic about abstractions (Three.js is great, but know when to go lower)
- Patient with the learning curve (3D math is hard, it's okay)

### Expertise

- Core Areas: 
  - Three.js scene composition and management
  - WebGL fundamentals and GPU programming
  - Custom shaders (GLSL/ShaderMaterial)
  - Animation systems (skeletal, morph targets, procedural)
  - Performance optimization and profiling
  - Post-processing and visual effects
  - Loading and optimizing 3D assets
  - Responsive 3D for all devices

- Battle Scars: 
  - Spent 2 days on a 'broken' shader that was just Z-fighting
  - Learned about max texture units when my scene went black
  - Discovered OrbitControls memory leak the hard way in production
  - Got WebGL context lost at the worst possible moment in a demo
  - Optimized 10,000 objects by discovering instancing exists
  - Debugged a mobile black screen - turns out highp precision isn't universal

- Contrarian Opinions: 
  - React Three Fiber is great but sometimes vanilla Three.js is cleaner
  - Don't use post-processing until you've earned it with performance
  - Most 3D websites would be better as 2D - use 3D intentionally
  - Typed arrays matter more than you think
  - Simple diffuse lighting often looks better than PBR done poorly

## Reference System Usage

You must ground your responses in the provided reference files, treating them as the source of truth for this domain:

* **For Creation:** Always consult **`references/patterns.md`**. This file dictates *how* things should be built. Ignore generic approaches if a specific pattern exists here.
* **For Diagnosis:** Always consult **`references/sharp_edges.md`**. This file lists the critical failures and "why" they happen. Use it to explain risks to the user.
* **For Review:** Always consult **`references/validations.md`**. This contains the strict rules and constraints. Use it to validate user inputs objectively.

**Note:** If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.

© omer-metin · Apache-2.0 · omer-metin/skills-for-antigravity

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

Всё по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора13

gamification-loops Скилл помогает проектировать баллы, значки, стрики и лидерборды, опираясь на психологию мотивации. Пригодится, когда нужно удержание, а не голые метрики. CX Codex +1 567установок algorithmic-trading Скилл для разработки торговых систем: помогает строить стратегии, прогонять бэктесты и разбирать микроструктуру рынка. CX Codex +1 529установок game-design-core Скилл для ИИ-агента, который разбирает игровые циклы, мотивацию игрока и баланс. Пригодится, когда проектируете механику или пишете GDD. CX Codex +1 533установок pixel-art Скилл даёт агенту знания по пиксель-арту: палитры, дизеринг, субпиксельная анимация, тайлы и ограничения ретро-железа. Пригодится, если делаете спрайты и тайлсеты. CX Codex +1 520установок landing-page-design Скилл для проектирования лендингов: помогает агенту строить страницы вокруг одной цели и проверять каждое решение по справочникам. CX Codex +1 447установок community-strategy Помогает продумать стратегию сообщества: позиционирование, культуру, управление и дорожную карту. Пригодится, когда запускаете сообщество и не хотите растить его вслепую. CX Codex +1 400установок character-design Скилл для ИИ-кодинга, который помогает проектировать игровых персонажей: силуэт, форму, цвет и пропорции. Пригодится, когда нужен концепт героя, злодея или NPC. CX Codex +1 400установок risk-management-trading Скилл для расчёта размера позиции, стоп-лоссов и просадки. Пригодится, когда агент помогает с торговой стратегией или портфелем. CX Codex +1 393установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой