102.3K+Download
Skip to the usage guide
Data Visualizationby Owl-Listener

Data Visualization Skill.

Choose the graphic that makes the comparison understandable, not the chart that looks most elaborate.

  • Data Visualization
  • Design Guidance
Download OpenDesignView Usage Guide
Source Review · Data VisualizationSKILL.md
Task UX Produces • A chart choice tied to the question • A specification for marks, axes, labels, and context • Accessible and small-screen alternatives Before You Start Provide the actual data, field definitions, reader's question and display constraints. The skill guides chart design; data validation and chart implementation remain separate tasks.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Data Visualization: Choose Honest Visual Encodings

Chart selection, visual encoding, contextual labeling, accessibility, and responsive presentation.

Source-based workflowNot an execution benchmark

The Working Approach

Data Visualization is a chart-design skill. It maps comparison, trend, composition, distribution, and relationship questions to candidate chart forms, then addresses labels, axes, context, and visual encoding.

Its scope is presentation rather than data collection or statistical proof. It emphasizes real data, direct annotation, non-color cues, and responsive alternatives such as a table. Designing the underlying product color palette remains a separate concern.

Expected Deliverables

  • A chart choice tied to the question
  • A specification for marks, axes, labels, and context
  • Accessible and small-screen alternatives
See the Example Brief

From Brief to Review

  1. 01
    State the Question

    Identify the comparison or pattern viewers need to understand.

  2. 02
    Choose the Encoding

    Select a simple chart and define axes, labels, units, and consistent series treatment.

  3. 03
    Check Real Conditions

    Use actual data, add useful context, and review non-color cues and small-screen behavior.

02 When to Use It

When to Use It

Provide the actual data, field definitions, reader's question and display constraints. The skill guides chart design; data validation and chart implementation remain separate tasks.

A Good Fit

  • Dashboard ChartsClarify the chart type and context for a specific metric.
  • Misleading VisualsReview encodings and axes that distort or obscure a comparison.

Limits to Check

  • Not Metric DefinitionThe skill cannot establish the truth of supplied numbers or their business meaning.
  • Not Palette ArchitectureIt owns chart encoding, not the full product color-system layer.

Bring These Inputs

  • Real DataProvide values, units, missing-data conditions, and definitions.
  • Reader QuestionState the decision or comparison the chart should support.
  • Display ContextSpecify size, interaction, mobile use, and text alternatives.

03 Decisions That Matter

Decisions That Matter

  1. Question-Led Selection

    A chart form is justified by the relationship it needs to reveal.

  2. Accessible Redundancy

    Labels, shapes, or patterns carry information that hue alone cannot.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Load this task's SKILL.md from the designer-skills repository in your agent's supported skill location. No universal installer command is established by the entry file.

Upstream Source File
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/data-visualization/SKILL.md

Provide the actual data, field definitions, reader's question and display constraints. The skill guides chart design; data validation and chart implementation remain separate tasks.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use data-visualization to redesign this target-versus-actual chart from the supplied monthly values. Recommend a chart with clear units and context, explain its axis choices, and include a readable mobile alternative and text summary. Do not infer causes from the trend.

Inspect the Result

Check the actual output against these observable criteria.

  • The chart answers the stated question.
  • Axes, labels, and encodings reflect actual data.
  • Meaning remains available without color or hover.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
Owl-Listener
Repository
Owl-Listener/designer-skills
Skill File
ui-design/skills/data-visualization/SKILL.md
License
MIT
Reviewed Snapshot
2026-10-07 · 9a6930cf84a8
Editorial Source Summary
Chart selection, visual encoding, contextual labeling, accessibility, and responsive presentation.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it calculate the underlying metrics?

The source focuses on chart selection and encoding; metric validation is separate.

Must the mobile view keep the same chart?

No. It explicitly allows simpler views, including tables.

Can color be the only series cue?

The source recommends redundant labels, patterns, or shapes.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/data-visualization/SKILL.md