syncfusion-react-popups — скилл для Claude Code: диалоги и тултипы
Скилл для ИИ-агентов, который подсказывает, как собирать модальные окна, тултипы и поповеры на компонентах Syncfusion для React.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a claude-codeЧто делает syncfusion-react-popups
Скилл описывает два компонента из @syncfusion/ej2-react-popups: Dialog и ToolTip. Внутри — справочники по режимам modal и modeless, девяти готовым позициям плюс своим координатам X/Y, перетаскиванию за заголовок, изменению размера, шаблонам шапки, тела и подвала, шестнадцати эффектам анимации. Отдельные файлы посвящены кнопкам действий, событиям вроде beforeClose, локализации и доступности по WCAG 2.2.
Агенту скилл полезен тем, что избавляет от угадывания имён пропсов. Он подскажет allowDragging, enableResize, closeOnEscape, enableRtl, структуру ButtonPropsModel и методы show()/hide() через ref. Есть раздел про вложенные диалоги, формы с валидацией и загрузку содержимого по AJAX.
Перед установкой проверьте версии: все пакеты @syncfusion/ej2-* должны быть одной мажорной версии, иначе получите конфликт peer-зависимостей. Ставить их советуют вместе — @syncfusion/ej2-react-popups, @syncfusion/ej2-base, @syncfusion/ej2-buttons, @syncfusion/ej2-popups. Понадобятся и CSS-темы: material, bootstrap или tailwind.
Какие задачи решает
- собрать модальное окно подтверждения удаления
- встроить форму с валидацией внутрь диалога
- сделать перетаскиваемое окно с изменением размера
- показать тултип с подсказкой при наведении
- настроить закрытие по Escape и фокус для скринридеров
Примеры запросов агенту
- Сделай модальный диалог подтверждения на DialogComponent с кнопками OK и Cancel
- Добавь перетаскивание за заголовок и изменение размера в этот диалог
- Покажи тултип с пояснением над иконкой помощи
Как установить syncfusion-react-popups
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-popups/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-popups/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-popups/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-popups/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-popups2Вручную: положить файлы
.github/skills/syncfusion-react-popups/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-popupsВручную: положить файлы
.devin/skills/syncfusion-react-popups/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-popups
Как установить syncfusion-react-popups в Claude?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-popups -a claude-code. После этого файл скилла появится по пути ~/.claude/skills/syncfusion-react-popups/SKILL.md.
Что делает syncfusion-react-popups?
Даёт агенту справочник по компонентам Dialog и ToolTip из Syncfusion для React: режимы, позиционирование, шаблоны, анимации, события и доступность.
Что нужно для работы скилла?
Пакеты @syncfusion/ej2-react-popups, @syncfusion/ej2-base, @syncfusion/ej2-buttons и @syncfusion/ej2-popups одной мажорной версии, плюс импорт CSS-темы.
