data-visualization-mastery
Installation
SKILL.md
Data Visualization Mastery
Why Data Visualization Mastery Matters
Data visualization is the art and science of encoding information visually so humans can perceive patterns, outliers, and trends faster than reading raw numbers. A poorly chosen chart misleads. A poorly designed chart confuses. A well-designed chart tells the truth instantly. This skill codifies the principles of Edward Tufte, Stephen Few, Jacques Bertin, and Tamara Munzner into a systematic framework for building data-dense UIs that are beautiful, honest, and accessible.
The gap between a developer-built dashboard and a professionally designed data experience is systematic craft: choosing the right chart type, encoding data correctly, managing visual hierarchy across dozens of data points, and ensuring every pixel of ink serves the data.
Reference Architecture
| File | Contents | Use When |
|---|---|---|
references/chart-type-encyclopedia.md |
50+ chart types organized by purpose (comparison, trend, distribution, relationship, part-to-whole, flow, geo, hierarchy). Each chart: when to use, when NOT to use, data shape, max data points, design specs (colors, spacing, typography, gridlines), accessibility notes, thumbnail description. | Selecting the right chart for a dataset. Reviewing chart design specs. Auditing chart choices in an existing UI. |
references/dashboard-layout-patterns.md |
30+ dashboard layout patterns: KPI rows, chart grids, filter bars, drill-down hierarchies, real-time monitoring, executive summary, operational, analytical, mobile card-stack. Each: CSS grid layout, spacing, component hierarchy, responsive collapse strategy. | Designing dashboard layouts. Reviewing dashboard information architecture. Building responsive analytics UIs. |
references/data-table-mastery.md |
Complete data table design system: anatomy, column types (15+), sorting, filtering, pagination, selection, expansion, fixed headers, inline editing, cell formatting, empty/loading states, responsive strategies, density modes, full accessibility spec, production React/TypeScript code. | Designing or building data tables. Auditing table usability. Adding features to existing tables. |
references/dataviz-accessibility.md |
Dataviz accessibility: alt text patterns for every chart type, data table alternatives, 8 colorblind-safe palettes with hex codes, pattern fills, high contrast mode, screen reader announcements, keyboard navigation, sonification, WCAG success criteria mapping. | Making charts accessible. Auditing dataviz accessibility. Building inclusive dashboards. |
references/dataviz-code-patterns.md |
Production code for top 20 chart types using Recharts (React). Chart wrapper component with loading/error/empty states. Design tokens for dataviz. Responsive containers. Theme integration. Tooltip and legend customization. Print styles. | Implementing charts in React. Building chart component libraries. Setting up dataviz design tokens. |