data-visualization · owl-listener — Claude Code skill: chart choice and data encoding
Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend.
npx skills add Owl-Listener/designer-skills --skill data-visualization -a claude-codeWhat data-visualization does
The skill kicks in when you ask for data to be shown graphically. It maps the task to a chart family: comparison (bar, grouped bar, bullet), change over time (line, area, sparkline), part of whole (pie or donut, stacked bar, treemap), distribution (histogram, box plot, scatter) and relationship (scatter, bubble, heat map).
Styling rules come next. The agent keeps decoration low, labels the chart directly instead of leaning on a legend, starts the y-axis at zero for bars, and annotates the points that carry the insight. For accessibility it avoids color as the only signal, suggesting patterns, labels or shapes instead. Palettes are split into sequential, diverging and categorical, with a warning about red-green pairs.
Responsive behavior is covered too: at small sizes the skill simplifies the view, drops data points, enlarges labels, and sometimes swaps the chart for a table. The categorical color ramp stays with the color-system skill, so this one will not touch it. Test on real data — idealized samples flatter almost any chart.
What it helps with
- pick a chart type that fits the question
- set axes, labels and legends without clutter
- make a chart readable for colorblind viewers
- simplify a chart for small screens
- choose a scale for ordered versus categorical data
Example prompts for the agent
- show monthly revenue over time and pick the right chart
- compare conversion by channel as a labeled bar chart
- build an accessible distribution chart of orders
How to install data-visualization
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill data-visualization -a claude-code2Manually: put the files in place
~/.claude/skills/data-visualization/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/data-visualization/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill data-visualization -a codex2Manually: put the files in place
.agents/skills/data-visualization/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill data-visualization -a cursor2Manually: put the files in place
.cursor/skills/data-visualization/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills data-visualization2Manually: put the files in place
.github/skills/data-visualization/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill data-visualization -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/data-visualizationManually: put the files in place
.devin/skills/data-visualization/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill data-visualization -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about data-visualization
How do I install data-visualization in Claude?
Run npx skills add Owl-Listener/designer-skills --skill data-visualization -a claude-code. The skill lands at ~/.claude/skills/data-visualization/SKILL.md.
What does data-visualization do?
It selects a chart type for the task and defines the data encoding: marks, axes, labels, color and accessibility. It covers chart choice and encoding only.
How is data-visualization different from color-system?
The categorical color ramp belongs to the color-system skill. This one handles chart selection and encoding.
Source text
SKILL.md · MIT
--- name: data-visualization description: Select chart types and design data encodings — marks, axes, labels, and accessible chart styling. Use when presenting data graphically. Owns chart selection and encoding only; the categorical colour ramp itself belongs to `color-system`. --- # 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
© Owl-Listener · MIT · Owl-Listener/designer-skills
Similar skills
Everything for Design →data-visualization by other authors comes first.
