syncfusion-react-dropdowns — скилл для Claude Code: установка
Справочник для ИИ-ассистентов по компонентам выпадающих списков Syncfusion в React. Помогает настроить автодополнение, фильтрацию и удалённые данные.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdowns -a claude-codeЧто делает syncfusion-react-dropdowns
Скилл учит кодинг-ассистента корректно подключать пакеты @syncfusion/ej2-react-dropdowns, @syncfusion/ej2-react-inputs и @syncfusion/ej2-base. Он содержит правила для работы с компонентами AutoComplete, ComboBox, DropDownList, ListBox, Mention, MultiSelect и MultiColumn ComboBox.
Внутри собраны примеры связывания с массивами объектов, конфигурации DataManager через ODataV4Adaptor или WebApiAdaptor, а также настройки кастомных шаблонов через itemTemplate. Для списков с большими объёмами данных описана виртуализация через сервис VirtualScroll. Без импорта CSS-стилей тем интерфейс отобразится со сломанной вёрсткой.
Какие задачи решает
- добавить AutoComplete с привязкой к массиву объектов или удалённому API
- настроить серверную фильтрацию через DataManager и ODataV4Adaptor
- включить виртуальный скролл для длинных списков через VirtualScroll
- оформить элементы и заголовки групп через itemTemplate и groupTemplate
Примеры запросов агенту
- Добавь AutoComplete из Syncfusion с поиском по объектам и фильтрацией StartsWith
- Настрой привязку DropDownList к удалённому API через DataManager с виртуализацией
- Сделай поле ComboBox с кастомной разметкой строки через itemTemplate
Как установить syncfusion-react-dropdowns
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdowns -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-dropdowns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-dropdowns/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdowns -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-dropdowns/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdowns -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-dropdowns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-dropdowns2Вручную: положить файлы
.github/skills/syncfusion-react-dropdowns/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdowns -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-dropdownsВручную: положить файлы
.devin/skills/syncfusion-react-dropdowns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdowns -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-dropdowns
Как установить syncfusion-react-dropdowns в Claude Code?
Выполните команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdowns -a claude-code. Файл навыка запишется в ~/.claude/skills/syncfusion-react-dropdowns/SKILL.md.
Что делает скилл syncfusion-react-dropdowns?
Он предоставляет модели правила и примеры внедрения выпадающих списков Syncfusion в React. Сюда входят параметры фильтрации, группировка, WAI-ARIA доступность и привязка данных.
Какие npm-пакеты нужны для работы компонентов?
В проекте требуются библиотеки @syncfusion/ej2-react-dropdowns, @syncfusion/ej2-react-inputs и @syncfusion/ej2-base. Также нужно импортировать CSS-файлы выбранной темы оформления.
