Data Visualizer

This one helps you build charts and dashboards using Recharts, Chart.js, or D3.js depending on your stack and complexity needs. It includes working examples for each library, from simple line charts to real-time dashboards with server-sent events. The patterns section is genuinely useful: it shows you KPI cards, live data streaming setups, and interactive filters with actual implementation code. If you're reaching for a charting library but aren't sure which one to use or how to structure a dashboard, this gives you concrete starting points. The library selection guidance is honest about tradeoffs, recommending Recharts for React projects and Chart.js for framework-agnostic work, while steering you toward D3 only when you actually need custom visualizations.

skills.sh installs: 576
GitHub stars: 39
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daffy0208/ai-dev-standards --skill data-visualizer --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

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 },
]

SKILL.md on GitHub