# analytics-metrics

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 380 installs · ★ 291
- Author: hoodini
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/hoodini/ai-agents-skills/tree/HEAD/skills/analytics-metrics/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/analytics-metrics

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/analytics-metrics/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/analytics-metrics/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/analytics-metrics/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/analytics-metrics/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install hoodini/ai-agents-skills analytics-metrics
```

2. **Manually: put the files in place**
- File: `.github/skills/analytics-metrics/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/analytics-metrics
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/analytics-metrics/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill analytics-metrics -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/hoodini/ai-agents-skills/tree/HEAD/skills/analytics-metrics/SKILL.md

## When to use it
- 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
- 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

## Similar
- [data-viz-2025](https://affpapa.org/en/nevibecode/skills/data-viz-2025.md) — skill · 304 installs
- [shadcn-ui](https://affpapa.org/en/nevibecode/skills/giuseppe-trisciuoglio-shadcn-ui.md) — skill · 22400 installs
- [syncfusion-react-3d-circular-chart](https://affpapa.org/en/nevibecode/skills/syncfusion-react-3d-circular-chart.md) — skill · 646 installs
- [dashboard-creator](https://affpapa.org/en/nevibecode/skills/dashboard-creator.md) — skill · 315 installs
- [testing-data-visualizations](https://affpapa.org/en/nevibecode/skills/testing-data-visualizations.md) — skill · 18 installs
- [metrics-dashboard](https://affpapa.org/en/nevibecode/skills/metrics-dashboard.md) — skill · 3000 installs

From the same set: [hoodini/ai-agents-skills](https://affpapa.org/en/nevibecode/by/hoodini/ai-agents-skills.md) — 5 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md