syncfusion-react-context-menu — скилл для Claude Code: установка
Помогает настроить контекстное меню Syncfusion в React: от структуры пунктов и вложенных списков до событий клика, анимаций и шаблонов.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-context-menu -a claude-codeЧто делает syncfusion-react-context-menu
Скилл учит агента работать с компонентом ContextMenuComponent из пакета @syncfusion/ej2-react-navigations. Меню требует обязательного указания свойств target и items. Без селектора target компонент не определит область для клика. Также можно ограничить контекст дочерними тегами через свойство filter.
Внутри описаны параметры анимации, работа на тачскринах и поддержка раскладки RTL. Для нестандартного оформления доступен шаблон itemTemplate. Скилл рассчитан на проекты на Vite или Create React App. При этом в проект нужно заранее импортировать таблицы стилей выбранной темы Syncfusion.
Какие задачи решает
- добавить контекстное меню по правому клику мыши
- построить древовидные подменю с разделителями
- ограничить срабатывание меню нужными элементами через
filter - задать анимацию появления и задержку
hoverDelay
Примеры запросов агенту
- Сделай контекстное меню для таблицы
#users-gridс пунктами редактирования и удаления - Настрой открытие подменю Syncfusion только по клику мыши
- Добавь анимацию SlideDown и иконки
iconCssдля пунктов меню
Как установить syncfusion-react-context-menu
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-context-menu -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-context-menu/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-context-menu/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-context-menu -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-context-menu/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-context-menu -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-context-menu/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-context-menu2Вручную: положить файлы
.github/skills/syncfusion-react-context-menu/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-context-menu -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-context-menuВручную: положить файлы
.devin/skills/syncfusion-react-context-menu/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-context-menu -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-context-menu
Как установить syncfusion-react-context-menu в Claude Code?
Выполните команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-context-menu -a claude-code. Файл навыка сохранится в каталоге ~/.claude/skills/syncfusion-react-context-menu/SKILL.md.
Какие свойства обязательны для работы компонента?
Обязательными являются два свойства: target с CSS-селектором целевого элемента и массив пунктов меню items.
Какой npm-пакет требуется для работы меню?
Компонент поставляется в составе пакета @syncfusion/ej2-react-navigations, для которого также требуются CSS-стили темы.
