syncfusion-react-notifications — скилл для Claude Code: тосты и бейджи
Скилл по компонентам уведомлений Syncfusion для React: тосты, бейджи, сообщения, скелетоны и спиннеры. Пригодится, когда нужно быстро собрать статус-индикаторы.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a claude-codeЧто делает syncfusion-react-notifications
Скилл ведёт агента по пяти компонентам из @syncfusion/ej2-react-notifications: Toast, Badge, Message, Skeleton и Spinner. Внутри — справочные файлы по каждому блоку: установка, позиционирование, таймауты, шаблоны, анимация, доступность и API. Агент читает нужный reference и пишет код по нему, а не по памяти.
По тостам разобраны девять предустановленных позиций, timeOut со значением по умолчанию 5000 мс, extendedTimeout на 1000 мс при наведении, статичные тосты через timeOut: 0, шаблоны, кнопки действий и ToastUtility.show() для быстрого вызова без создания компонента. Есть раздел про WAI-ARIA и RTL.
Перед установкой пакета скилл прямо требует остановиться и спросить пользователя: команду npm install @syncfusion/[email protected] --save запускает человек, а не агент. То же с npm run dev. Если вы ждёте от агента полной автономности, этот скилл её не даст — он намеренно тормозит на каждом шаге. Текст обрезан на разделе Message, так что по нему деталей меньше, чем по Toast.
Какие задачи решает
- показать всплывающее уведомление после сохранения формы
- повесить бейдж со счётчиком на иконку
- вывести сообщение об ошибке с нужным уровнем важности
- подставить скелетон вместо контента, пока грузятся данные
- настроить позицию и анимацию тоста без чтения документации
Примеры запросов агенту
- Добавь тост об успешном сохранении в правом нижнем углу с прогресс-баром и кнопкой закрытия
- Сделай статичный тост с кнопками Undo и Confirm, который не исчезает сам
- Покажи скелетон с shimmer-анимацией вместо карточки товара, пока идёт загрузка
Как установить syncfusion-react-notifications
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-notifications/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-notifications/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-notifications/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-notifications/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-notifications2Вручную: положить файлы
.github/skills/syncfusion-react-notifications/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-notificationsВручную: положить файлы
.devin/skills/syncfusion-react-notifications/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора15
Похожие
Вопросы о syncfusion-react-notifications
Как установить syncfusion-react-notifications в Claude?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a claude-code. После этого файл скилла появится по пути ~/.claude/skills/syncfusion-react-notifications/SKILL.md.
Что делает syncfusion-react-notifications?
Проводит агента по компонентам уведомлений Syncfusion для React: тосты, бейджи, сообщения, скелетоны и спиннеры. Агент читает нужный reference-файл и пишет код по нему.
Скилл сам установит пакет и запустит dev-сервер?
Нет. Он требует подтверждения перед каждым действием: установку npm install @syncfusion/[email protected] --save и запуск npm run dev выполняет пользователь.
