syncfusion-react-kanban: скилл для Claude Code — установка
Помогает разворачивать канбан-доски Syncfusion в React-приложениях с помощью ИИ-агентов. Генерирует код колонок, дорожек swimlane, лимитов WIP и связывает интерфейс с DataManager.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-kanban -a claude-codeЧто делает syncfusion-react-kanban
Скилл содержит инструкции по настройке досок задач на базе библиотеки @syncfusion/ej2-react-kanban. Он учит ассистента создавать колонки, распределять карточки по статусам через keyField и выстраивать нестандартные шаблоны разметки карточек.
Внутри описаны параметры группировки через swimlaneSettings, организация перетаскивания и виртуальный скроллинг для списков с большим числом задач. Агент учится связывать доску с внешними REST API или OData через DataManager.
Без предварительной установки @syncfusion/ej2-react-kanban и импорта CSS-файлов выбранной темы (Material, Bootstrap, Fluent или Tailwind) компонент не отобразит стили.
Какие задачи решает
- настроить группировку карточек по дорожкам swimlane
- ограничить число задач в колонке через лимиты WIP
- подключить удалённые данные через DataManager и REST API
- создать кастомные JSX-шаблоны для карточек и всплывающих подсказок
Примеры запросов агенту
- Собери канбан-доску на React с колонками To Do, In Progress и Done через Syncfusion
- Добавь горизонтальные дорожки swimlane с группировкой задач по исполнителям
- Настрой валидацию лимитов WIP и правила перемещения карточек между колонками
Как установить syncfusion-react-kanban
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-kanban -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-kanban/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-kanban/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-kanban -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-kanban/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-kanban -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-kanban/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-kanban2Вручную: положить файлы
.github/skills/syncfusion-react-kanban/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-kanban -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-kanbanВручную: положить файлы
.devin/skills/syncfusion-react-kanban/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-kanban -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-kanban
Как установить syncfusion-react-kanban в Claude Code?
Выполните команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-kanban -a claude-code. Файл навыка сохранится по пути ~/.claude/skills/syncfusion-react-kanban/SKILL.md.
Что делает скилл syncfusion-react-kanban?
Он предоставляет ИИ-ассистенту документацию по компоненту Syncfusion React Kanban: создание структуры доски, привязка полей, drag-and-drop и валидация лимитов задач.
Какие темы оформления поддерживает компонент?
В справочниках скилла описана интеграция тем Material, Bootstrap, Fluent и Tailwind через импорт соответствующих CSS-стилей.
