Data Visualization
- 1.1k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
data-visualization is a Claude Code skill that generates clear, accessible, insight-focused data visualizations with appropriate chart types and styling for developers building analytics and dashboard UI.
About
data-visualization is a designer-skills guide for choosing and styling charts that communicate insights effectively. Chart selection covers comparison with bar, grouped bar, and bullet charts; trends with line, area, and sparklines; part-of-whole with pie, donut, stacked bar, and treemap; and distribution patterns. The skill emphasizes accessibility and clarity over decorative charts. Developers reach for data-visualization when implementing dashboard components, admin analytics, or report views and need principled chart picks instead of defaulting to pie or 3D bar charts.
- Selects optimal chart types: bar, line, scatter, treemap, heatmap, sparklines and more
- Applies core design principles including data-ink ratio, zero-baseline bars, and annotation
- Provides sequential, diverging, categorical and colorblind-safe color guidance
- Ensures full accessibility with patterns, labels, text alternatives and contrast rules
- Delivers responsive visualization strategies that simplify cleanly on mobile
Data Visualization by the numbers
- 1,122 all-time installs (skills.sh)
- +46 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #363 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill data-visualizationAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.1k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you choose the right chart type?
Generate clear, accessible, and insight-focused data visualizations with the right chart type and styling.
Who is it for?
Frontend developers and designers building dashboards or analytics views who need accessible chart selection and styling guidance.
Skip if: Teams needing ETL pipelines, warehouse modeling, or server-side chart rendering libraries without UI design decisions.
When should I use this skill?
The developer asks for chart selection, dashboard visualization design, accessible data charts, or styling for analytics UI.
What you get
Chart type recommendations, accessibility styling guidance, and visualization specs for comparison, trend, and distribution data.
- Chart type recommendations
- Visualization styling guidance
- Accessibility-focused chart specs
Files
Data Visualization
You are an expert in designing clear, accessible, and informative data visualizations.
What You Do
You design data visualizations that communicate insights effectively using appropriate chart types and styling.
Chart Selection
Comparison
Bar charts (categorical), grouped bars (multi-series), bullet charts (target vs actual).
Trend Over Time
Line charts (continuous), area charts (volume), sparklines (inline).
Part of Whole
Pie/donut (few categories), stacked bar (many categories), treemap (hierarchical).
Distribution
Histogram, box plot, scatter plot.
Relationship
Scatter plot, bubble chart, heat map.
Design Principles
- Data-ink ratio: maximize data, minimize decoration
- Clear axis labels and legends
- Consistent color encoding across views
- Start y-axis at zero for bar charts
- Use annotation to highlight key insights
Color in Data Viz
- Sequential: light to dark for ordered data
- Diverging: two-hue scale for above/below midpoint
- Categorical: distinct hues for unrelated categories
- Colorblind-safe palettes (avoid red-green only)
Accessibility
- Don't rely on color alone — use patterns, labels, or shapes
- Provide text alternatives for charts
- Keyboard navigable interactive charts
- Sufficient contrast for data elements
Responsive Data Viz
- Simplify at small sizes (fewer data points, larger labels)
- Consider alternative views for mobile (table instead of chart)
- Touch-friendly tooltips and interactions
Best Practices
- Choose the simplest chart that communicates the insight
- Label directly on the chart when possible (avoid legends)
- Provide context (benchmarks, targets, trends)
- Test with real data, not idealized samples
- Allow users to explore details on demand
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick data-visualization for chart taxonomy and accessible UI styling; use backend analytics skills when the task is SQL aggregation or pipeline design.
FAQ
What chart does data-visualization recommend for trends?
data-visualization recommends line charts for continuous trends, area charts for volume over time, and sparklines for inline trend indicators. The skill matches chart type to the analytical question being answered.
How does data-visualization handle part-of-whole data?
data-visualization maps part-of-whole datasets to pie or donut charts for few categories, stacked bars for many categories, and treemaps for hierarchical breakdowns. Selection depends on category count and hierarchy depth.
Is Data Visualization safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.