syncfusion-react-treegrid — скилл для Claude Code: обзор и запуск
Помогает настраивать React-компонент TreeGrid от Syncfusion: строить иерархические таблицы, привязывать данные и включать экспорт.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treegrid -a claude-codeЧто делает syncfusion-react-treegrid
Скилл обучает ассистента правилам работы с табличной сеткой Syncfusion TreeGrid в React-проектах. Он содержит спецификации по свойствам компонентов, типам колонок, виртуальной прокрутке и пагинации. Это избавляет от типичных ошибок разметки при отображении вложенных структур вроде дерева файлов или штатного расписания.
Главное требование компонента — точное соответствие структур данных. Для вложенных массивов обязателен проп childMapping, иначе строки просто не раскроются. Если данные приходят плоским списком, сетка потребует связку idMapping и parentIdMapping. Типы колонок в разметке должны строго совпадать с типами в объектах, иначе сломаются сортировка и фильтры.
Какие задачи решает
- настроить иерархическую таблицу с раскрывающимися строками
- сконфигурировать типы колонок и форматирование дат
- добавить экспорт строк в Excel, PDF или CSV
- подключить виртуальный скроллинг для больших наборов данных
Примеры запросов агенту
- Настрой Syncfusion TreeGrid для дерева папок с поддержкой раскрытия через subtasks
- Добавь колонку даты с форматом yMd и проверь соответствие типов в TreeGridComponent
- Сконфигурируй постраничную навигацию и диалоговый режим редактирования для таблицы
Как установить syncfusion-react-treegrid
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treegrid -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-treegrid/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-treegrid/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treegrid -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-treegrid/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treegrid -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-treegrid/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-treegrid2Вручную: положить файлы
.github/skills/syncfusion-react-treegrid/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treegrid -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-treegridВручную: положить файлы
.devin/skills/syncfusion-react-treegrid/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treegrid -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-treegrid
Как установить syncfusion-react-treegrid в Claude Code?
Запустите команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treegrid -a claude-code. Ассистент загрузит правила компонента и сможет применять их при генерации React-кода.
Что делает скилл syncfusion-react-treegrid?
Он подсказывает агенту правила вёрстки таблиц Syncfusion, параметры маппинга иерархий, режимы редактирования ячеек и настройки экспорта.
Почему в таблице не раскрываются вложенные элементы?
Компоненту необходим проп childMapping, значение которого в точности повторяет имя поля со вложенным массивом. Для плоских списков вместо него обязательно задавать idMapping вместе с parentIdMapping.
