Data Visualizer

name: data-visualizer
kind: skill
description: Expert in creating charts, dashboards, and data visualizations using
  modern libraries
preconditions:
- check: project_initialized
  description: Project environment is set up
  required: true
effects:
- builds_beautiful
domains: &id001
- ai
- api
- frontend
- backend
- testing
- product
- design
- data
cost: medium
latency: medium
risk_level: low
side_effects:
- modifies_files
- creates_artifacts
idempotent: false
success_signal: data-visualizer capability successfully applied
failure_signals:
- Prerequisites not met
- Configuration error
compatibility:
  requires: []
  conflicts_with: []
  composes_with: []
  enables: []
observability:
  logs:
  - Applying data-visualizer...
  - data-visualizer completed
  metrics:
  - execution_time_ms
  - success_rate
metadata:
  version: 1.0.0
  created_at: '2025-10-30'
  tags: *id001
  examples: []


# Data Visualizer Skill

Expert in creating charts, dashboards, and data visualizations using modern libraries.

## Quick Start

```bash
# Activate skill
claude-code --skill data-visualizer
```

## What This Skill Does

- 📊 Creates interactive charts (line, bar, pie, scatter, heatmap)
- 📈 Builds KPI dashboards with real-time updates
- 🎨 Designs accessible color schemes
- 📱 Implements responsive layouts
- ⚡ Optimizes chart performance
- 💾 Adds export functionality (PNG, CSV)

## Common Tasks

### Create a Line Chart

```
"Create a line chart showing revenue over the last 12 months"
```

### Build a KPI Dashboard

```
"Build a dashboard with 4 KPI cards showing revenue, users, conversion rate, and average order value"
```

### Add Real-Time Updates

```
"Add real-time updates to this chart using Server-Sent Events"
```

### Make Charts Responsive

```
"Make this chart responsive for mobile devices"
```

## Technologies

- **Recharts** - React charts (recommended)
- **Chart.js** - Framework-agnostic
- **D3.js** - Advanced custom visualizations
- **Tremor** - Dashboard components
- **Visx** - Low-level React primitives

## Example Output

```typescript
// KPI Dashboard with real-time updates
export default function Dashboard() {
  return (
    <div className="grid grid-cols-4 gap-6">
      <KPICard title="Revenue" value="$45K" change={12.5} trend="up" />
      <KPICard title="Users" value="2.3K" change={-5.2} trend="down" />
      <LineChart data={realtimeData} />
      <BarChart data={salesByRegion} />
    </div>
  )
}
```

## Related Skills

- `data-engineer` - Data pipelines and ETL
- `performance-optimizer` - Chart performance
- `accessibility-auditor` - Accessible visualizations

## Learn More

See [SKILL.md](./SKILL.md) for detailed examples and patterns.


---
name: data-visualizer
description: Expert in creating charts, dashboards, and data visualizations using modern libraries
version: 1.0.0
tags: [data-viz, charts, dashboards, d3, recharts, analytics]
---

# Data Visualizer Skill

I help you build beautiful, interactive data visualizations and dashboards.

## What I Do

**Chart Creation:**

- Line charts, bar charts, pie charts
- Area charts, scatter plots, heatmaps
- Complex visualizations (Sankey, treemaps, network graphs)

**Dashboard Building:**

- KPI cards and metrics
- Real-time data dashboards
- Interactive filters and drill-downs
- Responsive layouts

**Data Presentation:**

- Data storytelling
- Color schemes and accessibility
- Animation and interactions
- Export capabilities

## Library Selection Guide

### Recharts (Recommended for React)

**Best for:**

- Quick, simple charts
- React/Next.js projects
- Standard chart types
- Responsive design

**Example:**

```typescript
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'

const data = [
  { month: 'Jan', revenue: 4000, expenses: 2400 },
  { month: 'Feb', revenue: 3000, expenses: 1398 },
  { month: 'Mar', revenue: 2000, expenses: 9800 },
]

function RevenueChart() {
  return (
    <LineChart width={600} height={300} data={data}>