data-visualizationlisted
Install: claude install-skill kensaurus/cursor-kenji
# Data Visualization Skill
Create beautiful, accessible, and interactive data visualizations for dashboards and reports.
## CRITICAL: Check Existing First
**Before creating ANY visualization, verify:**
1. **Check for existing chart libraries:**
```bash
cat package.json | grep -i "recharts\|chart\|d3\|visx\|nivo\|tremor"
rg "LineChart|BarChart|PieChart" --type tsx -l | head -10
```
2. **Check for existing chart components:**
```bash
ls -la src/components/charts/ src/components/dashboard/ 2>/dev/null
rg "ResponsiveContainer|Chart" --type tsx | head -10
```
3. **Check for design tokens:**
```bash
cat tailwind.config.* | grep -A10 "chart\|colors"
```
**Why:** Use existing chart library and styling conventions.
## Recharts (Recommended for React)
### Line Chart
```tsx
'use client'
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
Legend,
} from 'recharts'
const data = [
{ month: 'Jan', revenue: 4000, users: 2400 },
{ month: 'Feb', revenue: 3000, users: 1398 },
{ month: 'Mar', revenue: 2000, users: 9800 },
]
export function RevenueChart() {
return (
<ResponsiveContainer width="100%" height={350}>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<XAxis
dataKey="month"
className="text-xs fill-muted-foreground"
tickLine={false}
axisLine={false}
/>
<YAxis
className="text-xs fill-muted-foreground"
tickLine={false}
axisLine={false}
tickFormatter={(value) => `$${value}`}
/>
<T