syncfusion-react-sparkline — скилл для Claude Code
Помогает агенту собрать спарклайны Syncfusion в React: пять типов мини-графиков, тултипы, маркеры и полосы диапазона вместо полноразмерных чартов.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a claude-codeЧто делает syncfusion-react-sparkline
Скилл ведёт агента по компоненту SparklineComponent из @syncfusion/ej2-react-charts: как подключить источник данных, переключить тип, добавить подсказки и подписи. Внутри набор справочных файлов по темам — от первого примера до API, отдельные разделы про пять типов (линия, столбцы, область, win-loss, круг), маркеры, полосы диапазона, настройку осей и темы Material, Fabric, Bootstrap, Highcontrast.
Пакет ставится в проект через npm install @syncfusion/ej2-react-charts --save. Для тултипов нужна инъекция модуля SparklineTooltip через Inject, без неё подсказки просто не появятся. Скилл пригодится, когда график должен жить в ячейке таблицы или на дашборде и места под полноценный чарт нет.
Часть справочника посвящена доступности: заявлены WCAG 2.2 и Section 508, роли WAI-ARIA, поддержка RTL. Если у вас в проекте свои требования к контрасту и клавиатуре, сверить их с этими разделами стоит до вёрстки, а не после.
Какие задачи решает
- вставить тренд-график в ячейку таблицы
- показать соотношение долей компактным круговым спарклайном
- подсветить маркерами пик и минимум ряда
- добавить подсказку с координатами точки при наведении
- выделить полосой допустимый диапазон значений на оси
Примеры запросов агенту
- Сделай спарклайн типа Area по массиву
[0, 6, 4, 1, 3, 2, 5]и включи тултип с форматом${x} : ${y} - Поставь маркеры на стартовую и конечную точки спарклайна в карточке дашборда
- Покажи в таблице win-loss спарклайн по последним результатам матчей
Как установить syncfusion-react-sparkline
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-sparkline/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-sparkline/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-sparkline/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-sparkline/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-sparkline2Вручную: положить файлы
.github/skills/syncfusion-react-sparkline/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-sparklineВручную: положить файлы
.devin/skills/syncfusion-react-sparkline/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-sparkline
Как установить syncfusion-react-sparkline в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a claude-code. Файл скилла окажется по пути ~/.claude/skills/syncfusion-react-sparkline/SKILL.md.
Что делает syncfusion-react-sparkline?
Даёт агенту инструкции по компоненту спарклайнов Syncfusion для React: типы графиков, подсказки, маркеры, подписи данных, полосы диапазона и настройка осей.
Тултипы не появляются — в чём дело?
Модуль подсказок подключается отдельно: добавьте SparklineTooltip в список сервисов через Inject внутри SparklineComponent, иначе настройки тултипа игнорируются.
