analytics-metrics — Claude Code skill: charts and KPI dashboards
A skill that hands your agent ready Recharts components: line, bar and pie charts plus KPI cards. Useful when a screen needs metrics, not another table.
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a claude-codeWhat analytics-metrics does
The skill ships component templates built on Recharts. You get a line chart with axes and legend, a bar chart, a pie chart with per-category slices, and a KPI card that shows a trend arrow and a percentage change. There is also a formatting module: numbers with K and M suffixes, currency via Intl.NumberFormat, signed percentages.
A dashboard layout example is included — a grid of KPI cards on top, two charts side by side underneath. Everything uses Tailwind classes, and ResponsiveContainer handles width. Run npm install recharts first; without the package the components will not compile.
The skill installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, dropping SKILL.md into that platform's skills directory. If your project charts with a different library, expect to rewrite the templates — every snippet is tied to the Recharts API.
What it helps with
- build a metrics screen from KPI cards and charts
- plot revenue and user counts on one line chart
- break sales down by category with a bar chart
- format currency and percentages inside KPI cards
- lay out a responsive dashboard grid for different screen widths
Example prompts for the agent
- build a dashboard with four KPI cards and a monthly revenue line chart
- add a pie chart showing orders split by category
- move number and currency formatting into a shared utils module
How to install analytics-metrics
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a claude-code2Manually: put the files in place
~/.claude/skills/analytics-metrics/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/analytics-metrics/
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a codex2Manually: put the files in place
.agents/skills/analytics-metrics/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a cursor2Manually: put the files in place
.cursor/skills/analytics-metrics/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install hoodini/ai-agents-skills analytics-metrics2Manually: put the files in place
.github/skills/analytics-metrics/SKILL.md1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a gemini-cli2Platform CLI
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/analytics-metricsManually: put the files in place
.devin/skills/analytics-metrics/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about analytics-metrics
How do I install analytics-metrics in Claude?
Run npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a claude-code. The skill lands in ~/.claude/skills/analytics-metrics/SKILL.md.
What does analytics-metrics do?
It gives the agent Recharts chart and KPI card templates so dashboards get assembled from working examples instead of from scratch.
What do I need before using it?
Recharts in the project — install it with npm install recharts. The example components are written in TSX with Tailwind classes.
