Data Visualization
Pick the right chart, color scale, and accessibility patterns when adding dashboards or analytics views to your product.
Overview
data-visualization is an agent skill most often used in Build (also Grow analytics, Operate monitoring) that designs clear, accessible charts with appropriate type and color choices.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill data-visualizationWhat is this skill?
- Maps analytical intent to chart types: comparison, trend, part-of-whole, distribution, and relationship
- Applies data-ink ratio, zero-based bar axes, and annotation for key insights
- Defines sequential, diverging, and categorical color encoding plus colorblind-safe guidance
- Accessibility: patterns and labels beyond color, text alternatives, keyboard-friendly interactives
- Responsive rules to simplify series and density at small breakpoints
- Five chart-intent families documented: comparison, trend, part-of-whole, distribution, relationship
Adoption & trust: 719 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have metrics in your app but agents default to the wrong chart, decorative junk, or color-only encoding that fails accessibility and misleads readers.
Who is it for?
Builders adding admin dashboards, usage analytics, or embedded reports who want textbook chart grammar without hiring a data viz specialist.
Skip if: Heavy statistical modeling, ML feature engineering, or one-off spreadsheets with no product UI.
When should I use this skill?
You are designing or refactoring charts, dashboards, or metric views and need appropriate chart types plus accessible styling.
What do I get? / Deliverables
You get a justified chart choice, styling rules, and accessibility checklist so dashboards and reports communicate one clear insight per view.
- Chart type recommendation per metric
- Color and accessibility encoding rules
- Responsive and annotation guidance for the view
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Dashboards and admin analytics are built in the frontend layer even when data comes from backend APIs. Chart selection, responsive simplification, and a11y for data ink live in UI implementation, not in raw ETL.
Where it fits
Choose grouped bars for plan comparison and line charts for MRR trend on the founder dashboard.
Apply diverging color scales for churn above or below target in lifecycle reporting.
Use sparklines and annotated thresholds for error-rate panels without chart junk.
Mock a simple metric view for investor or user tests with correct axis and legend conventions.
How it compares
Principles for charts and accessibility—not a Tailwind component kit (daisyui) or full marketing page aesthetic pass (frontend-design-pro).
Common Questions / FAQ
Who is data-visualization for?
Solo SaaS founders and indie devs shipping in-app analytics, internal ops views, or customer-facing metrics who need credible visual design from their coding agent.
When should I use data-visualization?
During Build for dashboard UI; in Grow when designing funnel and lifecycle charts; in Operate when presenting error rates or SLA trends in monitoring views.
Is data-visualization safe to install?
Check the Security Audits panel on this Prism page; the skill is documentation-style guidance with no implied shell or secret requirements.
SKILL.md
READMESKILL.md - Data Visualization
# 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