К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

threejs-shaders · calesthio — скилл для Claude Code: что делает и как установить

Скилл помогает писать шейдеры для Three.js: менять вершины, собирать фрагментные эффекты и расширять материалы. Пригодится для кастомной графики.

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

Что делает threejs-shaders

Скилл подсказывает, как работать с GLSL и ShaderMaterial в Three.js. Он охватывает uniform-параметры, varying-переменные и передачу данных между вершинным и фрагментным шейдерами. С его помощью можно менять вершины, сэмплировать текстуры, собирать градиенты, шумовые и Fresnel-эффекты.

Внутри есть примеры для ShaderMaterial и RawShaderMaterial, обновления uniform-значений, текстур и матриц. ShaderMaterial даёт встроенные uniform-параметры и атрибуты Three.js. Для RawShaderMaterial придётся явно описать нужные параметры и атрибуты.

Скилл рассчитан на проекты с библиотекой three. Исходный текст обрывается на разделе про градиенты, поэтому описание покрывает только показанные приёмы.

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

  • создать кастомный материал для Three.js
  • изменить положение вершин через GLSL
  • передать параметры из JavaScript в шейдер
  • собрать эффект на основе текстуры или шума
  • передать нормали и координаты между шейдерами

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

  • Создай для объекта Three.js `ShaderMaterial` с анимируемым uniform `time` и эффектом смещения вершин.
  • Напиши вершинный и фрагментный шейдеры для Fresnel-эффекта, используя данные камеры и нормали.
  • Добавь в материал Three.js сэмплирование текстуры и градиент по `vUv`.

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

1Через Skills CLI (Vercel)

npx skills add calesthio/OpenMontage --skill threejs-shaders -a claude-code

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

~/.claude/skills/threejs-shaders/SKILL.md

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

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

Весь набор →
video-understand calesthio Скилл извлекает кадры из видео и расшифровывает аудио локально через ffmpeg и Whisper. Подходит для анализа роликов без API-ключей. Claude Code CX Codex Cursor +1 1 300установок remotion calesthio Скилл для вёрстки видео в Remotion с библиотекой переходов и правилами сборки сцен при 30 кадрах в секунду. Claude Code CX Codex Cursor +1 1 200установок video-download calesthio Скачивает видео, аудио и субтитры по URL через yt-dlp. Пригодится для получения файла, выбора качества или просмотра метаданных без загрузки. Claude Code CX Codex Cursor +1 1 200установок lottie-bodymovin calesthio Помогает переносить 12 принципов диснеевской анимации в векторные Lottie-ролики. Связывает формулы After Effects с управлением через JavaScript. Claude Code CX Codex Cursor +1 1 100установок create-video calesthio Скилл превращает описание в готовый видеоролик: пишешь, что хочешь видеть, а HeyGen генерирует сценарий, выбирает аватара, озвучивает и монтирует. Подходит для быстрого создания демо, объяснялок и промо без лишних настроек. Claude Code CX Codex Cursor +1 1 100установок video-toolkit calesthio Автоматизирует создание видео: генерирует закадровый голос, музыку, анимирует говорящие головы, компонует сцены через Remotion. Нужны Node.js, Python3, ffmpeg и доступ к облачным GPU (Modal или RunPod). Claude Code CX Codex Cursor +1 1 100установок text-to-speech calesthio Генерирует аудио из текста через HeyGen Starfish, подбирая голос, скорость и тон. Пригодится для озвучки, дикторского текста и подкастов. Claude Code CX Codex Cursor +1 1 100установок bfl-api Black Forest Labs Скилл помогает подключать BFL FLUX API для генерации и редактирования изображений. Нужен для асинхронных запросов, polling и вебхуков. Claude Code CX Codex Cursor +1 1 000установок

Другие версии threejs-shaders

threejs-shaders CloudAI-X Скилл помогает писать кастомные GLSL-шейдеры и материалы для Three.js r186, настраивать униформы и переводить код на TSL для WebGPU. Claude Code CX Codex Cursor +1 15 400установок

Похожие

senior-fullstack sickn33 Скилл направляет реализацию фич, которые затрагивают интерфейс, backend, базу данных и deployment. Проверяет целостность от запроса до ответа: контракты API, права доступа, валидация, миграции и откат. Claude Code CX Codex Cursor +1 2 300установок javascript-pro https://github.com/Jeffallan Скилл для написания, отладки и рефакторинга JavaScript кода с ES2023+, async/await, ESM модулями и Node.js API. Нужен, если вы строите vanilla JavaScript приложения или оптимизируете производительность в браузере и Node.js. Claude Code CX Codex Cursor +1 6 000установок gpui-kit-design-guides longbridge Скилл передаёт агенту обязательные правила дизайна десктопных приложений на GPUI Kit. Пригодится при проектировании новых экранов, правке интерфейсов и проверке вёрстки по чек-листам. Claude Code CX Codex Cursor +1 959установок sketch Hermes Agent (adapted from gsd-build/get-shit-done) Создаёт 2–3 HTML-варианта интерфейса, чтобы сравнить дизайн-направления до того, как начнёшь строить продакшн-код. Claude Code CX Codex Cursor +1 402установок unit-test-vue-pinia официальный github Помогает писать и проверять юнит-тесты для Vue 3, TypeScript, Vitest и Pinia. Пригодится, когда тесты уже есть, но лезут во внутренности компонентов. GitHub Copilot 1 800установок nextjs-developer https://github.com/Jeffallan Скилл настраивает архитектуру приложений на Next.js 14+ с App Router, серверными компонентами и Server Actions. Помогает внедрить потоковый SSR и подготовить проект к деплою. Claude Code CX Codex Cursor +1 5 700установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о threejs-shaders

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

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

Что делает `threejs-shaders`?

Скилл помогает создавать GLSL-шейдеры для Three.js, настраивать ShaderMaterial, uniform-значения и varying-переменные. Он также разбирает смещение вершин, текстуры, градиенты, шум и Fresnel-эффект.

Чем `ShaderMaterial` отличается от `RawShaderMaterial`?

ShaderMaterial предоставляет встроенные uniform-параметры и атрибуты Three.js. В RawShaderMaterial всё нужное нужно определить самостоятельно.

Смотрите также

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

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором