syncfusion-react-3d-chart — скилл для Claude Code: 3D-графики в React
Скилл помогает агенту собрать объёмные столбчатые и линейчатые диаграммы Syncfusion в React-проекте. Пригодится, когда нужен график с осями, легендой и экспортом.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a claude-codeЧто делает syncfusion-react-3d-chart
Скилл описывает работу с компонентом Chart3DComponent из пакета @syncfusion/ej2-react-charts. Внутри — справочник по API и отдельные файлы-инструкции: типы диаграмм (столбчатая, линейчатая, стекированные и 100% стекированные), привязка данных, настройка осей (категорийная, числовая, дата и время, логарифмическая), несколько панелей, подписи данных, легенда, всплывающие подсказки, выделение, печать и экспорт, темы оформления, доступность.
Данные подключаются через dataSource с указанием xName и yName, серии оборачиваются в Chart3DSeriesCollectionDirective. Угол поворота, наклон и глубину задают пропсами rotation, tilt, depth. Чтобы серия заработала, её модуль нужно перечислить в Inject — забытый ColumnSeries3D или Category3D даёт пустой график, и это первое, что стоит проверить при отладке.
Пакет @syncfusion/ej2-react-charts ставится в проект отдельно, скилл его не подтягивает. Часть разделов доступна только по ссылкам на файлы в references/, поэтому агенту нужно читать их по мере задачи, а не один общий текст.
Какие задачи решает
- собрать объёмную столбчатую диаграмму по массиву данных
- настроить логарифмическую ось для экспоненциального ряда
- добавить вторую ось Y и разнести серии по панелям
- включить экспорт графика в PNG или PDF
- подписать точки данных и вывести легенду с подсказками
Примеры запросов агенту
- сделай 3D column chart по месяцам с легендой и подписями данных
- переведи ось X на datetime и настрой формат дат
- добавь экспорт графика в PDF и тему Tailwind
Как установить syncfusion-react-3d-chart
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-3d-chart/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-3d-chart/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-3d-chart/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-3d-chart/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-3d-chart2Вручную: положить файлы
.github/skills/syncfusion-react-3d-chart/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-3d-chartВручную: положить файлы
.devin/skills/syncfusion-react-3d-chart/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора15
Похожие
Вопросы о syncfusion-react-3d-chart
Как установить syncfusion-react-3d-chart в Claude?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a claude-code. После этого файл скилла появится в ~/.claude/skills/syncfusion-react-3d-chart/SKILL.md.
Что делает syncfusion-react-3d-chart?
Помогает агенту писать код 3D-диаграмм Syncfusion для React: типы серий, оси, привязка данных, панели, легенда, экспорт, темы и доступность.
Нужен ли пакет @syncfusion/ej2-react-charts в проекте?
Да, скилл опирается на компоненты из @syncfusion/ej2-react-charts, и этот пакет ставится в проект отдельно.
