syncfusion-react-3d-circular-chart — скилл для Claude Code
Скилл для ИИ-агента, который помогает собрать в React объёмные круговые и кольцевые диаграммы на компоненте Syncfusion.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a claude-codeЧто делает syncfusion-react-3d-circular-chart
Скилл описывает работу с CircularChart3DComponent из пакета @syncfusion/ej2-react-charts. Агент получает инструкции по установке пакета, подключению CSS-темы и сборке первой диаграммы: серия PieSeries3D, привязка данных через xName и yName, наклон через tilt.
Внутри — набор справочных файлов, к которым агент обращается по теме. Отдельные документы про круговые и кольцевые диаграммы, подписи данных, легенду, всплывающие подсказки, пустые точки, заголовок и подзаголовок, печать и экспорт, а также сводка по API компонента. Для каждой возможности указан свой модуль для Inject: CircularChartDataLabel3D, CircularChartLegend3D, CircularChartTooltip3D. Если модуль не подключить, соответствующая часть диаграммы просто не отрисуется.
Кольцевая диаграмма получается через innerRadius, радиус задаётся в процентах от контейнера. Пустые значения обрабатываются свойством emptyPointSettings с режимами Gap, Average, Drop и Zero. Экспорт идёт в PNG, JPEG, SVG и PDF. Скилл рассчитан на React-проект с Vite или Create React App, поэтому в ванильной вёрстке он вам не поможет.
Какие задачи решает
- собрать объёмную круговую диаграмму из массива категорий
- сделать кольцевую диаграмму с вырезом по центру
- подписать доли значениями и вынести подписи за пределы секторов
- настроить легенду сбоку с прокруткой при большом числе пунктов
- выгрузить диаграмму в PDF или PNG по нажатию кнопки
Примеры запросов агенту
- Собери 3D-круговую диаграмму долей рынка браузеров на Syncfusion, легенда справа, подписи снаружи
- Переделай эту круговую диаграмму в кольцевую с вырезом 40%
- Добавь экспорт диаграммы в PDF по кнопке
Как установить syncfusion-react-3d-circular-chart
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-3d-circular-chart/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-3d-circular-chart/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-3d-circular-chart/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-3d-circular-chart/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-3d-circular-chart2Вручную: положить файлы
.github/skills/syncfusion-react-3d-circular-chart/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-3d-circular-chartВручную: положить файлы
.devin/skills/syncfusion-react-3d-circular-chart/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-3d-circular-chart
Как установить syncfusion-react-3d-circular-chart в Claude?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a claude-code. Скилл окажется в ~/.claude/skills/syncfusion-react-3d-circular-chart/SKILL.md.
Что делает этот скилл?
Проводит агента по подключению и настройке 3D-круговых и кольцевых диаграмм Syncfusion в React: серии, подписи, легенда, подсказки, пустые точки, печать и экспорт.
Какие модули нужно подключать через Inject?
Для каждой возможности свой: PieSeries3D для серии, CircularChartDataLabel3D для подписей, CircularChartLegend3D для легенды, CircularChartTooltip3D для подсказок.
