AIKraft/AI/Войти
AIKraft/Skills/shaders

shaders

Создавайте WebGPU-эффекты (анимации, градиенты, частицы, размытие) через библиотеку Shaders в React, Vue, Svelte, Solid или vanilla JS. Применяйте при запросах на шейдеры, эффекты курсора, переходы или упоминании shaders.com, Shaders CLI и пресетов.

SHshaders official Разработка ★ 5.3k

Что делает навык

Shaders — это библиотека компонентов WebGPU, позволяющая создавать анимации, градиенты, частицы и эффекты размытия, которые можно компоновать как слои в Figma. Она обеспечивает интеграцию с дизайн-редактором и поддерживает React, Vue, Svelte, Solid и vanilla JS.

Когда применять

  • Создание сложных визуальных эффектов, таких как анимации или частицы, в веб-приложениях.
  • Разработка интерактивных эффектов курсора и переходов между состояниями.
  • Интеграция дизайн-макетов из редактора Shaders в код проекта с помощью CLI.
  • Быстрый прототипинг WebGPU-эффектов без написания низкоуровневого шейдерного кода.

Как работает

  1. Запустить команду `npx shaders connect` в корневой директории проекта для автоматического обнаружения фреймворка и установки пакета.
  2. Пройти аутентификацию в браузере или использовать переменную окружения `SHADERS_API_KEY` для подключения к проекту в дизайн-редакторе.
  3. Настроить файл `shaders.config.ts`, который создается автоматически после подключения.
  4. Использовать компоненты библиотеки в коде приложения, комбинируя их для создания эффектов.
  5. Применять команды CLI для синхронизации изменений между кодом и редактором.

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

Создай эффект размытия фона с помощью библиотеки Shaders в моем React-проекте.
Добавь анимированные частицы на страницу, используя компоненты Shaders.
Подключи мой проект к Shaders CLI и настрой конфигурацию для Vue.

Что понадобится

  • Наличие Node.js и npm (или совместимого пакетного менеджера) для работы CLI.
  • Доступ к интернету для аутентификации и подключения к сервису Shaders.
  • Установка пакета `shaders` в проект.

Описание составлено по SKILL.md навыка, сверено 24.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «shaders» из репозитория: # https://github.com/shader-effects-inc/shaders
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r shaders/ ~/.claude/skills/shaders/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.