Shaders — скилл

Установка

Работает в

• Claude Code
• Cursor
• Codex
• Windsurf
• GitHub Copilot
• Koda
• Coddy

npx skillfoxx add skills/shaders

Что делает

Shaders — библиотека из 200 WebGPU-эффектов, оформленных как компоненты: внутри `<Shader>` лежат слои, которые рисуются снизу вверх и смешиваются на видеокарте. Скилл `skills/shaders/SKILL.md` объясняет агенту, как с ней работать. Он учит собирать эффект вручную из компонентов, а если их недостаточно, искать готовый пресет командой `npx shaders search` и показывать его командой `npx shaders preview`. Первым шагом скилл требует выполнить в проекте `npx shaders connect`. Команда определяет фреймворк, ставит пакет `shaders`, пишет `shaders.config.ts`, открывает браузер для входа в аккаунт и связывает код с проектом в онлайн-редакторе. Дальше `npx shaders install` пишет по одному файлу компонента с полным деревом и значениями свойств, а `npx shaders update` подтягивает то, что вы поменяли в редакторе. Установленное записывается в `shaders.lock.json`. В скилле описаны правила слоев и масок, динамические свойства, привязанные к курсору или анимации, четыре готовых рецепта (фон главного экрана, стекло над логотипом, размытая картинка под текстом, маска-раскрытие) и советы по скорости. Отдельный файл `components.md` перечисляет компоненты по категориям: текстуры, фигуры, размытия, искажения, стилизация, переходы. MCP-сервер, который ставит команда `npx shaders@latest install-mcp`, ищет пресеты, читает свойства шейдера и превращает SVG в файл SDF.

Для кого. Для фронтенд-разработчиков и дизайнеров-верстальщиков, которые просят Claude Code, Cursor или Codex сделать анимированный фон, стекло или эффект под курсор на React, Vue, Svelte, Solid или чистом JavaScript.

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

Сделай фон для главного экрана на WebGPU: темно-фиолетовый сетчатый градиент, легкое зерно и светящийся след за курсором

Ограничения

• Библиотеке нужен браузер с WebGPU. Серверный рендеринг не поддерживается: в Next.js и других мета-фреймворках `<Shader>` держат только на клиенте, а в SvelteKit он на сервере ничего не рисует.
• Свыше тысячи пресетов и 55 с лишним готовых разделов сайта открываются по подписке Pro. Редактор, пресеты и платформа на shaders.com действуют на отдельных условиях, а код пакета и компонентов лицензирован MIT. Без нее `npx shaders install имя-пресета` предлагает установить версию с водяным знаком, поиск и просмотр бесплатны. Скилл запрещает агенту обходить это ограничение.
• Вход в аккаунт и подключение проекта идут через браузер. В среде без браузера, например в CI, нужен личный ключ в переменной `SHADERS_API_KEY`, а флаг `--no-auth` пропускает вход.
• Пустой вызов `npx shaders` открывает интерактивное меню для людей, поэтому агент должен вызывать команды с явными подкомандами.
• Настраиваемые компоненты на примитивах `shaders/std` автор называет экспериментальными, стабильным считается только вариант на WGSL.

Как отключить. Удалите папку `shaders` из каталога скиллов агента, куда ее положила команда `npx skills add`, и снимите запись `shaders` из MCP-конфигурации (для этого есть команда `npx shaders uninstall-mcp`). Сам пакет убирается менеджером пакетов, а файлы компонентов из `outDir` и `shaders.lock.json` удаляются вручную.

Коротко о README

В репозитории лежит монорепозиторий на pnpm: ядро движка, привязки для React, Vue, Svelte, Solid и JavaScript, основной пакет `shaders` с CLI и папка `skills` со скиллом. Главная страница описывает установку, примеры подключения для каждого фреймворка, визуальный редактор с экспортом кода и CLI. Отдельный раздел посвящен работе с ИИ: скилл, MCP-сервер и файлы `llms.txt`. Есть тесты движка, правила для участников и инструкция, как написать собственный компонент через `defineShader`.