syncfusion-react-charts — скилл для Claude Code: установка
Скилл помогает собирать графики Syncfusion в React: настраивать оси, серии, данные и интерактивность. Пригодится для дашбордов и аналитики.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-charts -a claude-codeЧто делает syncfusion-react-charts
Скилл помогает создавать и настраивать компонент Syncfusion React Chart в React-приложениях. Он охватывает линейные, столбчатые, областные, точечные, круговые и другие виды графиков, оси категорий, числовые, временные и логарифмические шкалы, несколько серий и источники данных. Для удалённых данных предусмотрены DataManager и адаптеры OData, WebAPI и пользовательские адаптеры.
Через скилл можно задавать подписи, легенды, цвета и аннотации, а также добавлять масштабирование, панорамирование, подсказки, перекрёстный курсор и выбор элементов. Есть сценарии для финансовых индикаторов, технического анализа, доступности, локализации, печати и экспорта. WebMCP позволяет подготовить график для просмотра и действий AI-агента через WebMcpChart.
В примерах используется пакет @syncfusion/ej2-react-charts. Для подписей данных действует обязательное ограничение: их нужно размещать внутри marker.dataLabel, а не непосредственно в серии.
Какие задачи решает
- создать график в React-приложении
- связать серии с локальными или удалёнными данными
- настроить оси, подписи и легенду
- добавить масштабирование, подсказки и выбор элементов
- подготовить график для WebMCP и AI-агента
Примеры запросов агенту
- Создай в React график продаж с двумя сериями, категориями по месяцам и легендой.
- Настрой для этого графика временную ось, подсказки, масштабирование и подписи данных через
marker.dataLabel. - Добавь к графику WebMCP через
WebMcpChart, включиenableWebMcp={true}и задай стабильный ID компонента.
Как установить syncfusion-react-charts
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-charts -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-charts/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-charts/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-charts -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-charts/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-charts -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-charts/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-charts2Вручную: положить файлы
.github/skills/syncfusion-react-charts/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-charts -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-chartsВручную: положить файлы
.devin/skills/syncfusion-react-charts/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-charts -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-charts
Как установить syncfusion-react-charts в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-charts -a claude-code, затем откройте ~/.claude/skills/syncfusion-react-charts/SKILL.md.
Что делает syncfusion-react-charts?
Скилл помогает реализовать графики Syncfusion в React: подобрать тип диаграммы, связать данные, настроить оси и серии, добавить интерактивность и стили.
Что нужно учитывать при настройке подписей данных?
Параметры подписей данных нужно размещать внутри marker.dataLabel. В скилле также есть примеры для локальных данных, DataManager, адаптеров OData и динамического обновления серий.
