chart — скилл для Claude Code: интерактивные графики в HTML
Строит интерактивные графики на Apache ECharts: линии, столбцы, свечи, точки. Отдаёт готовую HTML-страницу и PNG-скриншот.
npx skills add Starchild-ai-agent/official-skills --skill chart -a claude-codeЧто делает chart
Скилл собирает страницу с графиком в отдельной папке проекта внутри output/chart-html/. Данные лежат прямо в HTML, поэтому в iframe не ломается CORS. Рендер — на Apache ECharts через CDN, картинка получается через нативный экспорт getDataURL с последующей склейкой canvas.
Шаблонов двенадцать: line.html, bar.html, pie.html, candlestick.html, scatter.html, dashboard.html, radar.html, heatmap.html, dual-axis.html, multi-panel.html, waterfall.html. Есть и сборка с нуля через build_chart_custom(...). В папке проекта остаются index.html, generate.py, data.json, README.md и screenshot.png — по ним график воспроизводится позже.
Просмотр идёт через chart_server.py, а не статикой: сервер сам переписывает пути с префиксом /preview/<id>/... перед обращением к файловой системе. Если отдать output/chart-html напрямую, iframe покажет листинг каталога вместо страницы. Для режима «только картинка» нужен Playwright — screenshot_chart(project_dir) без него не отработает.
Какие задачи решает
- построить график цены за период и сравнить два ряда
- собрать дашборд с KPI-карточками и сеткой из четырёх графиков
- показать свечи OHLCV по торговым данным
- разложить изменение бюджета на вклады waterfall-диаграммой
- выгрузить график картинкой для отчёта
Примеры запросов агенту
- построй график BTC против золота за последний год, шаблон line
- сделай столбчатую диаграмму выручки по кварталам в проекте revenue-q
- собери multi-panel: цена, объём и RSI на одной оси X
Как установить chart
1Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a claude-code2Вручную: положить файлы
~/.claude/skills/chart/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/chart/
1Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a codex2Вручную: положить файлы
.agents/skills/chart/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a cursor2Вручную: положить файлы
.cursor/skills/chart/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Starchild-ai-agent/official-skills chart2Вручную: положить файлы
.github/skills/chart/SKILL.md1Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a gemini-cli2Командой платформы
gemini skills install https://github.com/Starchild-ai-agent/official-skills --path chartВручную: положить файлы
.devin/skills/chart/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора15
Похожие
Рядом в теме «Данные и базы»
Все скиллы по теме «Данные и базы» →Вопросы о chart
Как установить chart в Claude?
Выполните npx skills add Starchild-ai-agent/official-skills --skill chart -a claude-code. После этого файл скилла лежит в ~/.claude/skills/chart/SKILL.md.
Что делает скилл chart?
Генерирует интерактивные страницы с графиками на Apache ECharts и сохраняет их в отдельную папку проекта. Плюс умеет отдавать PNG-скриншот.
Почему превью показывает список файлов вместо графика?
Скорее всего папка отдана статикой напрямую. Запускайте chart_server.py — он переписывает пути с префиксом /preview/<id>/... и находит нужный index.html.
