syncfusion-react-grid — скилл для Claude Code: что делает
Помогает агенту настраивать таблицы Syncfusion React Grid с сортировкой, фильтрацией, пагинацией и виртуальным скроллингом.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a claude-codeЧто делает syncfusion-react-grid
Скилл учит нейросеть корректно работать с сеткой данных Syncfusion в React-проектах. Он содержит правила сборки интерфейса, режимов редактирования записей и выгрузки в Excel или PDF. Здесь же описаны вычисления агрегатов вроде сумм или средних значений по группам и колонкам.
В архитектуре библиотеки методы работают только после явной регистрации сервисов через <Inject services={[...]} />. Если модуль Sort или Page не добавлен, вызов метода завершится тихо без ошибок в консоли. Свойства таблицы задаются через JSX-параметры, а вызовы API выполняются строго через ссылку ref.
Прямой сетевой обмен этот компонент не реализует. Запросы к удалённым эндпоинтам вынесены во внешний модуль DataManager, поэтому для загрузки данных по API понадобятся отдельные настройки.
Какие задачи решает
- внедрить виртуальный или бесконечный скроллинг для больших наборов данных
- настроить фильтрацию через меню, поисковую строку или фильтр в стиле Excel
- подключить инлайн-редактирование и сохранение строк пакетами
- выгрузить содержимое таблицы в файлы PDF и Excel
Примеры запросов агенту
- Собери таблицу заказов на Syncfusion с пагинацией и сортировкой по клику на заголовок
- Настрой фильтрацию в стиле Excel и агрегаты для колонки сумм в React Grid
- Добавь инлайн-редактирование строк в таблице через модуль Edit
Как установить syncfusion-react-grid
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-grid/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-grid/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-grid/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-grid/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-grid2Вручную: положить файлы
.github/skills/syncfusion-react-grid/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-gridВручную: положить файлы
.devin/skills/syncfusion-react-grid/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-grid
Как установить syncfusion-react-grid в Claude Code?
Выполните в терминале команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a claude-code.
Что делает syncfusion-react-grid?
Скилл обучает ассистента строить сложные таблицы Syncfusion в React: настраивать группировку, сводные показатели, экспорт и адаптивную разметку.
Почему вызовы методов таблицы могут не срабатывать?
Методам библиотеки обязательны соответствующие модули. Без регистрации компонента через <Inject services={[...]} /> вызовы API завершаются вхолостую без генерации ошибок.
