syncfusion-react-sankey — скилл для Claude Code: диаграммы Санкей
Скилл для ИИ-агента, который помогает собрать Sankey-диаграмму на React с компонентом Syncfusion: узлы, связи, легенда, тултипы и экспорт.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a claude-codeЧто делает syncfusion-react-sankey
Скилл описывает работу с SankeyComponent из пакета @syncfusion/ej2-react-charts. Агент получает инструкции по настройке узлов и связей через SankeyNodeDirective и SankeyLinkDirective, по подписям, легенде, тултипам, событиям клика и оформлению. Отдельные разделы — RTL-раскладка, доступность и экспорт диаграммы.
Внутри — набор справочных файлов: references/getting-started.md про установку и подключение модулей, references/nodes-and-links.md про структуру данных, references/labels-and-positioning.md, references/legend-and-display.md, references/interactivity.md, references/appearance-and-styling.md, references/accessibility-and-orientation.md, references/export-and-print.md. Плюс API-справочники по свойствам, событиям и методам компонента. Агент читает нужный файл, а не весь корпус сразу.
Чтобы диаграмма заработала, в проект нужен React и пакет @syncfusion/ej2-react-charts, а сервисы вроде SankeyTooltip и SankeyLegend подключаются через Inject. Без этого тултипы и легенда молча не появятся — это первое, что стоит проверить, если диаграмма отрисовалась, а подсказок нет.
Какие задачи решает
- показать потоки энергии между источниками и потребителями
- разложить этапы процесса по узлам и связям
- собрать интерактивную node-link диаграмму с тултипами
- добавить легенду и подписи к Sankey-диаграмме
- экспортировать диаграмму потоков в изображение
Примеры запросов агенту
- Собери Sankey-диаграмму потоков энергии на React с Syncfusion
- Добавь в Sankey тултипы и легенду снизу
- Настрой экспорт Sankey-диаграммы в PNG
Как установить syncfusion-react-sankey
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-sankey/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-sankey/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-sankey/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-sankey/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-sankey2Вручную: положить файлы
.github/skills/syncfusion-react-sankey/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-sankeyВручную: положить файлы
.devin/skills/syncfusion-react-sankey/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-sankey
Как установить syncfusion-react-sankey в Claude?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a claude-code. Скилл появится в ~/.claude/skills/syncfusion-react-sankey/SKILL.md.
Что делает syncfusion-react-sankey?
Даёт агенту инструкции по компоненту Sankey из Syncfusion для React: узлы, связи, подписи, легенда, тултипы, события, оформление, RTL, доступность и экспорт.
Что нужно для работы компонента?
React и пакет @syncfusion/ej2-react-charts. Сервисы вроде SankeyTooltip, SankeyLegend и SankeyExport подключаются через Inject — без них соответствующие возможности не включатся.
