AIKraft/AI/Войти
AIKraft/Skills/ask-sonner

ask-sonner

Руководство по библиотеке Sonner для React: установка Toaster, вызовы toast(), обработка промисов, стилизация, темизация и позиционирование. Полезно при отладке проблем с отображением, стилями, Tailwind, модальными окнами и тёмной темой.

emilkowalski official Разработка ★ 43.3k

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

Навигатор по библиотеке Sonner для React, предоставляющий инструкции по настройке, стилизации и отладке всплывающих уведомлений (toast). Помогает правильно подключить Toaster, вызывать функции и решать проблемы с отображением и темизацией.

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

  • Настройка компонента Toaster в корневом компоненте (например, layout.tsx в Next.js)
  • Вызов функции toast() из клиентского кода, обработчиков событий или эффектов
  • Отладка проблем с дублированием уведомлений из-за неправильного монтирования Toaster
  • Стилизация и темизация уведомлений с учетом Tailwind и темной темы

Как работает

  1. При первом вызове без конкретного вопроса вывести только приветственное сообщение об готовности помочь
  2. При запросе, связанном с Sonner, сначала использовать инструкции из SKILL.md, а при необходимости точных параметров — обращаться к API.md
  3. Убедиться, что компонент <Toaster /> смонтирован ровно один раз в корне приложения (например, в layout.tsx), а не на каждой странице
  4. Вызывать функцию toast() только из клиентского кода (обработчики, эффекты), так как на сервере она не работает
  5. В случае server action возвращать результат и вызывать toast() в клиентском коде, который этот результат получает

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

Как правильно подключить Toaster в Next.js, чтобы уведомления не дублировались?
Почему toast() не работает в server action и как это исправить?
Как стилизовать всплывающие уведомления Sonner с помощью Tailwind CSS?

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

  • Файл API.md с полными таблицами пропсов для <Toaster /> и toast()

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

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

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

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