SkillsAdd

oakoss/agent-skills

data-visualizer

Charts, dashboards, and data visualizations using Recharts, Chart.js, and D3.js.

First seen Feb 23, 2026

Installation

$ npx skills add oakoss/agent-skills --skill data-visualizer
View on skills.sh ↗ GitHub repository ↗

Summary

  • Charts, dashboards, and data visualizations using Recharts, Chart.js, and D3.js.
  • Use when building charts, dashboards, or interactive data displays.
  • Use for chart type selection, data storytelling, annotation patterns, responsive design, accessibility, and performance optimization.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Shared topics
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Shared topics
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
azure-enterprise-infra-planner Shared topics
microsoft/azure-skills

Architect and provision enterprise Azure infrastructure from workload descriptions. For cloud a…

402.8K installs

Also in this package

Other skills from oakoss/agent-skills · top by installs.

npx skills add oakoss/agent-skills
ui-ux-polish 488 playwright 416 coolify 306 application-security 234 find-skills 210 brand-designer 195 knowledge-graph-builder 188 vitest-testing 183 content-humanizer 177 drizzle-orm 168

Browse all from oakoss/agent-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 15
License MIT
Default branch main
Open issues 1
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.2
LicenseMIT
More metadata
author
oakoss
version
1.2

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,628 B
  • docs SUMMARY.md 305 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 93 installs

SKILL.md

Data Visualizer

Build charts, dashboards, and interactive data visualizations using modern libraries. Covers Recharts (React), Chart.js (framework-agnostic), and D3.js (custom/advanced).

Library Selection

Library Best For React Custom Bundle (gzip)
Recharts Quick React charts, standard types Native Limited ~139KB
Chart.js Framework-agnostic, simple API Wrapper Moderate ~68KB (tree-shakeable)
D3.js Custom visualizations, full control Manual Full ~13-30KB per module

Chart Type Selection

Chart Best For Avoid When
Line Trends over time, continuous data Categorical data
Bar Comparing categories, rankings Continuous data
Pie/Donut Part-to-whole (max 5-7 slices) >7 categories, precise comparison
Area Volume over time, stacked categories Too many overlapping series
Scatter Correlation, outliers, distribution Time series
Heatmap Intensity across two dimensions Simple comparisons

Dashboard Patterns

Pattern Use Case Key Feature
KPI Dashboard Executive metrics Trend indicators, card grid
Real-Time Live monitoring SSE/WebSocket, animation disabled
Interactive Filters Exploratory analysis Period/region selects, drill-down
Drill-Down Hierarchical data Click to zoom (year → month → day)

Responsive Design

Approach Implementation
Container-based sizing <ResponsiveContainer width="100%" height={300}>
Aspect ratio mode <ResponsiveContainer width="100%" aspect={2}>
Mobile-aware Reduce strokeWidth, height on small screens
Label simplification Fewer axis labels on mobile

Common Mistakes

Mistake Fix
Fixed width/height Use ResponsiveContainer
Animation on real-time data Set isAnimationActive={false}
Too many pie slices Max 5-7 slices, group rest as "Other"
Non-accessible colors Use WCAG AA compliant, colorblind-safe palette
Loading entire chart library Lazy load with dynamic imports
No data formatting Use Intl.NumberFormat for currency/percent

Delegation

  • Explore data shape and available fields before choosing chart type: Use Explore agent
  • Build a complete multi-chart dashboard from requirements: Use Task agent
  • Plan visualization architecture for large-scale analytics pages: Use Plan agent

References

  • [Library Selection](references/library-selection.md) — Recharts, Chart.js, D3.js setup and examples
  • [Chart Types](references/chart-types.md) — line, bar, pie, area, scatter, heatmap with use cases
  • [Dashboard Patterns](references/dashboard-patterns.md) — KPI, real-time SSE, interactive filters, drill-down
  • [Design and Accessibility](references/design-and-accessibility.md) — color schemes, colorblind-safe palettes, responsive, animation
  • [Data Formatting and Export](references/data-formatting-and-export.md) — number formatters, CSV export, PNG export
  • [Performance](references/performance.md) — lazy loading, virtualization for large datasets
  • [Storytelling and Annotation](references/storytelling-and-annotation.md) — data narratives, annotations, color strategy, edge states