syncfusion-react-bullet-chart — скилл для Claude Code
Помогает ИИ настраивать пулевые диаграммы Syncfusion в React. Пригодится для вывода KPI, плановых показателей и диапазонов качества на компактных дашбордах.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a claude-codeЧто делает syncfusion-react-bullet-chart
Скилл даёт ассистенту инструкции по работе с компонентом BulletChartComponent. Модель учится связывать данные, рисовать шкалу фактических значений и сравнительные маркеры цели в виде круга, креста или прямоугольника. Здесь же описана разбивка фона на качественные сегменты через BulletRangeDirective.
Компонент поддерживает как горизонтальное, так и вертикальное положение. По умолчанию задана высота 126px и растягивание на ширину окна, но размеры можно переопределить через стили или проценты. Без внедрения модуля BulletTooltip во внутренние сервисы всплывающие подсказки отображаться не будут, поэтому агент сразу добавит нужную инъекцию в код.
Какие задачи решает
- настроить сравнение фактических показателей с целевыми маркерами
- разметить качественные цветовые зоны на шкале индикатора
- подключить всплывающие подсказки с шаблонами значений
- задать вертикальную или горизонтальную ориентацию диаграммы
Примеры запросов агенту
- Построй горизонтальный bullet chart для выручки с планкой цели и тремя зонами эффективности
- Добавь тултип к BulletChartComponent с шаблоном фактического и целевого значения
- Сделай вертикальный индикатор KPI с шагом оси и форматированием валюты
Как установить syncfusion-react-bullet-chart
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-bullet-chart/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-bullet-chart/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-bullet-chart/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-bullet-chart/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-bullet-chart2Вручную: положить файлы
.github/skills/syncfusion-react-bullet-chart/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-bullet-chartВручную: положить файлы
.devin/skills/syncfusion-react-bullet-chart/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-bullet-chart
Как установить syncfusion-react-bullet-chart в Claude Code?
Запустите команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a claude-code. Также можно разместить файл вручную по пути ~/.claude/skills/syncfusion-react-bullet-chart/SKILL.md.
Для чего нужен syncfusion-react-bullet-chart?
Он помогает ИИ внедрять пулевые графики Syncfusion в React-приложения. Скилл ускоряет разметку индикаторов прогресса, привязку данных и стилизацию шкал.
Что требуется для показа всплывающих подсказок в графике?
Подсказки скрыты из коробки. Чтобы они заработали, нужно активировать параметр tooltip.enable и зарегистрировать модуль BulletTooltip в сервисах компонента.
