Agent skill · data analytics · erichowens
data-viz-2025
State-of-the-art data visualization for React/Next.js/TypeScript with Tailwind CSS. Creates compelling, tested, and accessible visualizations following Tufte principles and NYT Graphics standards.
Why this skill is useful
Provides domain-specific knowledge on advanced data visualization techniques and libraries that the AI wouldn't reliably generate on its own.
What it needs
Requires @nivo/core, @observablehq/plot, @percy/cli, @storybook/react, @testing-library/react, @tremor/react, @visx/visx, d3, framer-motion, recharts installed locally. About 9k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Data Visualization 2025: The Art & Science of Visual Communication Create visualizations that Seaborn users, Tufte readers, and everyone else will love. Marry NYT Graphics rigor with MoMA aesthetics, Nike energy, and On Kawara precision. When to Use This Skill ✅ Use for: Building interactive charts, dashboards, and data stories Complex visualizations (chord diagrams, Sankey flows, network graphs) Real-time data displays with animations Mobile-responsive data components Accessible, tested visualizations for production ❌ NOT for: Static PNG/SVG exports without interaction (use design tools) Basic HTML tables (use semantic markup) Print-only graphics (different constraints) Simple icon displays (use icon libraries) Core Philosophy: The Three Pillars 1. Clarity (Tufte's Data-Ink Ratio) Every visual element must earn its place. Remove chart junk, maximize signal-to-noise. 2. Beauty (Aesthetic Standards) Visualizations are art. Use spring physics, thoughtful color, and premium design systems. 3. Truth (Graphical Integrity) Data representation must be honest. Test rigorously, document assumptions, preserve context. Quick Decision Tree The Data Viz Stack (2025) Recommended Packages When to Use Each Library Observable Plot - You want ggplot2/Vega-Lite in JavaScript Grammar-of-graphics approach (marks, scales, transforms) Perfect for rapid prototyping Great for notebooks and exploratory analysis Recharts - You want it to "just work" in React Component-based (everything is a <Component />) Excellent documentation and community TypeScript support built-in Smallest learning curve Nivo - You want visually stunning results 20+ chart types with beautiful defaults Canvas, SVG, and HTML rendering Server-side rendering support (unique feature) Extensive customization via props Visx - You want maximum control with React patterns Low-level primitives (scales, axes, shapes) Compose your own chart types Airbnb's D3 + React toolkit Best for novel visualizations D3.js - You want unlimited p …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/data-viz-2025