analytics-metrics — скилл для Claude Code: графики и KPI-дашборды
Скилл собирает дашборды и графики на Recharts: линейные, столбчатые, круговые диаграммы и карточки KPI. Пригодится, когда нужен экран с метриками, а не голая таблица.
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a claude-codeЧто делает analytics-metrics
Скилл даёт агенту готовые шаблоны компонентов на Recharts. Внутри — линейный график с осями и легендой, столбчатая диаграмма, круговая с разбивкой по категориям и карточка KPI со стрелкой роста и процентом изменения. Отдельно лежат утилиты форматирования: числа с суффиксами K и M, валюта через Intl.NumberFormat, проценты со знаком.
Есть пример раскладки дашборда: сетка карточек KPI сверху, под ней два графика в две колонки. Всё на Tailwind-классах, обёртки ResponsiveContainer тянут ширину по контейнеру. Перед первым запуском нужен npm install recharts — без установленного пакета компоненты не соберутся.
Скилл ставится в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode — файл SKILL.md кладётся в каталог скиллов выбранной платформы. Если проект на другой библиотеке графиков, шаблоны придётся переписывать: весь код завязан на API Recharts.
Какие задачи решает
- собрать экран с метриками из карточек KPI и графиков
- показать выручку и число пользователей на одном линейном графике
- разбить продажи по категориям столбчатой диаграммой
- отформатировать суммы в валюте и проценты в карточках
- сверстать адаптивную сетку дашборда под разные ширины экрана
Примеры запросов агенту
- сделай дашборд с четырьмя KPI-карточками и графиком выручки по месяцам
- добавь круговую диаграмму распределения заказов по категориям
- вынеси форматирование чисел и валюты в отдельный модуль утилит
Как установить analytics-metrics
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a claude-code2Вручную: положить файлы
~/.claude/skills/analytics-metrics/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/analytics-metrics/
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a codex2Вручную: положить файлы
.agents/skills/analytics-metrics/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a cursor2Вручную: положить файлы
.cursor/skills/analytics-metrics/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install hoodini/ai-agents-skills analytics-metrics2Вручную: положить файлы
.github/skills/analytics-metrics/SKILL.md1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a gemini-cli2Командой платформы
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/analytics-metricsВручную: положить файлы
.devin/skills/analytics-metrics/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о analytics-metrics
Как установить analytics-metrics в Claude?
Выполните npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a claude-code. Скилл окажется в ~/.claude/skills/analytics-metrics/SKILL.md.
Что делает analytics-metrics?
Подкидывает агенту шаблоны графиков и карточек KPI на Recharts, чтобы тот собирал дашборды по готовым примерам, а не с нуля.
Что нужно для работы скилла?
Пакет Recharts в проекте: перед первым использованием ставят npm install recharts. Компоненты в примерах написаны на TSX и Tailwind.
