83.3K+Скачать
Перейти к руководству
shader-devавтор MiniMax

Shader Dev Skill.

Навык для Claude Code и Codex в области работы с изображениями: GLSL-шейдеры — ray marching, SDF, жидкости, частицы, процедурная графика.

  • Изображения и генеративное искусство
  • Генеративное искусство
Скачать OpenDesignИнструкция по использованию
MiniMax-AI/skills · skills/shader-dev/SKILL.mdSKILL.md
--- name: shader-dev description: Comprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more. --- ## Invocation ## Skill Structure ## How to Use ## Technique Routing Table ## Technique Index ## WebGL2 Adaptation Rules
Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 16 663 символов полностью

01 Что делает

Что делает skill shader-dev в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Единый skill на GLSL, объединяющий 36 совместимых с ShaderToy техник шейдеров для визуальных эффектов в реальном времени: SDF-геометрия, ray marching и освещение, симуляция жидкости, частиц и физики, природные явления (океан, рельеф, атмосфера, объёмные эффекты), процедурная генерация, постобработка, аудио и отладка WebGL2.

Таблица маршрутизации сопоставляет каждый запрос с файлами техник в techniques/, содержащими базовые принципы, шаги реализации и полные шаблоны кода, а более глубокая математика приведена в reference/. Затем при создании отдельных HTML-страниц применяются правила адаптации к WebGL2 — gl_FragCoord.xy вместо fragCoord, обёртка void main() для mainImage, const вместо макросов на основе вызова функций — в рамках фиксированного бюджета производительности, с быстрыми рецептами и заменами для визуальной отладки.

Что он выдаёт

  • Совместимый с ShaderToy GLSL для одной из 36 техник эффектов, который можно использовать как основу визуального эффекта в реальном времени.
  • Отдельная HTML-страница, canvas которой заполняет весь экран, изменяет размер вместе с окном, размещён на чёрном фоне без полос прокрутки и предоставляет совместимые с ShaderToy uniform-переменные iTime, iResolution, iMouse и iFrame.
  • Многопроходные эффекты на базе фреймбуферов WebGL2 с ping-pong буферами для состояния в стиле Buffer A/B.
  • Готовая цепочка постобработки, например тональная компрессия ACES в сочетании с 2x SSAA и виньетированием для фотореалистичных сцен.
Смотрите пример запроса ↗

Как это работает

  1. 01
    Направить запрос к нужной технике

    Агент сопоставляет формулировку пользователя с таблицей маршрутизации техник, чтобы выбрать одну основную технику и сочетаемые с ней, а не читать все 36 файлов.

  2. 02
    Прочитать файл техники

    Каждый файл в techniques/ самодостаточен и содержит принципы, упорядоченные шаги реализации и полный шаблон кода для эффекта.

  3. 03
    Переход к Reference/ за математикой

    Когда требуются выводы формул или продвинутые паттерны, агент переходит по ссылке в конце файла техники к соответствующему руководству reference/.

  4. 04
    Портирование вывода ShaderToy в WebGL2

    Для самостоятельных HTML-артефактов правила адаптации к WebGL2 применяются к коду в стиле ShaderToy перед записью страницы.

  5. 05
    Сборка рецептов в пайплайн

    Быстрые рецепты объединяют модули — геометрию, рендеринг, освещение, атмосферу, постобработку — в полноценный пайплайн, а не в отдельный эффект.

  6. 06
    Отладка через замену вывода

    Вывод временно заменяется нормалями, количеством шагов, глубиной или полосами SDF, чтобы найти ошибку, прежде чем восстановить настоящий цвет.

02 Определите своё применение

Когда использовать скилл shader-dev

Используйте скилл shader-dev в Claude Code или Codex, когда задача связана с работой с изображением такого рода. Область применения и ограничения ниже взяты из собственного файла скилла.

Хорошо подходит

  • Моделирование 3D-объектов и сцен исключительно на основе математики, где implicit-поверхности задаются полями расстояний со знаком, а не загруженными мешами.
  • Эффекты жидкости, дыма и чернил, требующие настоящего решателя с адвекцией, диффузией и проекцией давления через ping-pong буферы.
  • Кадры неба и атмосферы, требующие рассеивания Рэлея/Ми, световых лучей или приближения подповерхностного рассеивания.
  • Процедурный звук, встроенный прямо в шейдер — от осцилляторов и огибающих через фильтры до FM-синтеза.
  • Стилизованная 2D-работа на основе полярного преобразования координат, калейдоскопического складывания и спиральных систем координат.

Знайте границы

  • Не подходит для неограниченных бюджетов GPU: целевая среда может использовать программный рендеринг без GPU, поэтому число итераций нужно держать низким.
  • Макросы — не безопасный способ задавать границы циклов: в циклах на некоторых версиях ES ожидаются константы времени выполнения.
  • Хелперы для террейна принимают только координаты XZ, поэтому полную позицию vec3 нужно свизлить перед передачей.

Что предоставить

  • Запрос эффекта на обычном языкеSkill вызывается как /shader-dev <request>, текст запроса попадает в $ARGUMENTS; формулировка в терминах эффектов позволяет таблице маршрутизации найти соответствие.
  • Категория эффекта в терминологии таблицыТаблица маршрутизации привязана к намерениям, таким как эффекты жидкости/дыма/чернил, сопоставляя каждое с основной техникой и техниками, с которыми её нужно комбинировать.

03 Внутри скилла

Правила, которые skill shader-dev даёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Формирование заголовков шейдеров WebGL2

    Каждый сгенерированный шейдер начинается с #version 300 es, фрагментный шейдер добавляет precision highp float; и объявляет out vec4 fragColor, а varying преобразуется в in/out.

  2. Использовать gl_FragCoord.xy, никогда fragCoord

    fragCoord из ShaderToy не существует в WebGL2, поэтому математика координат должна использовать gl_FragCoord.xy, иначе шейдер не скомпилируется.

  3. Оборачивание mainImage в настоящий Main()

    Шаблоны ShaderToy сохраняют void mainImage(out vec4 fragColor, in vec2 fragCoord), а стандартная void main() вызывает её с реальными координатами фрагмента.

  4. Объявляйте вызываемые функции до вызывающих

    В GLSL нет предварительных объявлений, поэтому функция, например getSunDirection(), должна быть определена выше getAtmosphere(), которая её вызывает, либо код нужно переупорядочить.

  5. Никогда не помещайте вызовы функций в #define

    Макрос вида #define SUN_DIR normalize(vec3(...)) недопустим; замените его на const с заранее вычисленным нормализованным значением.

  6. Избегайте зарезервированных слов GLSL в качестве имён

    Идентификаторы patch, cast, sample, filter, input, output, common, partition и active зарезервированы и не должны использоваться для переменных.

  7. Объявляйте состояние JS в начале

    На HTML-странице переменные let/const должны идти в начале блока script перед любой функцией, которая на них ссылается, иначе Temporal Dead Zone вызовет ошибку, и canvas останется белым.

  8. Оставайтесь в рамках бюджета производительности

    Основной цикл ray marching ограничен 128 шагами, внутренние циклы выборки объёма и освещения — 32, а FBM — 6 октавами, так как развёртывание может использовать ограниченный headless-рендеринг на CPU.

04 Применение

Установить shader-dev в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте shader-dev в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev

Обобщённая форма CLI skills для skills/shader-dev/SKILL.md; репозиторий может документировать собственный путь.

Дайте Skill первую задачу по работе с изображениями

Адаптируйте этот промт с вашим содержимым и ограничениями, затем запустите его в Claude Code или Codex.

Example prompt
create a raymarched SDF scene with soft shadows

Источник: пример SKILL.md (буквально).

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Проверьте, что каждый вызов соответствует своему определению, включая количество и типы параметров — float fbm(vec3 p) не может получить vec2 uv.
  • Строго соблюдайте соответствие типов: скалярам нужны явные конструкторы, а vec2 нельзя прочитать через .z.
  • Перепишите любой тернарный оператор, выбирающий между значениями struct, как if/else, поскольку ESSL этого не допускает.
  • Считайте количество итераций вложенных циклов на пиксель относительно предела в 1000 итераций, превышение которого замораживает браузер.
  • Визуализируйте нормали как col = nor * 0.5 + 0.5 и ищите полосатость, которая означает, что эпсилон слишком велик.
  • Если местоположение uniform возвращается как null, компилятор оптимизировал uniform — используйте его так, чтобы его нельзя было удалить.

В OpenDesign shader-dev встроен: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
MiniMax
Repository
github.com/MiniMax-AI/skills Ветка main
Файл skill
skills/shader-dev/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 60aaae5
License
MIT Из LICENSE; SKILL.md указывает «MIT».
Звёзды репозитория
13 547 Снимок GitHub сделан 14 сентября 2026 для всего репозитория MiniMax-AI/skills, который содержит 6 навыков в этом каталоге. Это не рейтинг или счётчик использования для shader-dev.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. ВызовЗапускается как /shader-dev <request>, при этом запрос передаётся через $ARGUMENTS.
  2. Структура skillСтруктура SKILL.md, руководства по техникам в techniques/ и более глубокие файлы в reference/.
  3. Как использоватьЧетыре шага: определить маршрут, прочитать файлы техник, перейти по ссылкам на reference, применить правила WebGL2.
  4. Таблица маршрутизации техникСопоставляет каждое намерение пользователя с основной техникой и техниками для комбинирования.
  5. Индекс техник36 техник, сгруппированных по категориям, каждая с однострочным описанием.
  6. Правила адаптации WebGL2Преобразование ShaderToy в WebGL2: версия, fragCoord, обёртка main, макросы, подводные камни.
  7. Настройка HTML-страницыТребования к самостоятельной странице: полная
Собственное описание skill
«Всесторонние техники GLSL-шейдеров для создания потрясающих визуальных эффектов — ray marching, SDF-моделирование, симуляция жидкостей, системы частиц, процедурная генерация, освещение, постобработка и многое другое».

Описание из front-matter файла SKILL.md. Полный файл содержит около 16 663 символов. Прочитайте полный файл на GitHub.

Shader Dev

Запустите shader-dev на реальной задаче по работе с изображениями.

Навык shader-dev встроен в OpenDesign. Скачайте приложение, выберите навык в Plugins → Skills, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev