Agent Skills
› Owl-Listener/designer-skills
› data-visualization
data-visualization
GitHub专注于数据可视化的设计与实现，指导选择合适的图表类型及编码方式。涵盖对比、趋势、分布等场景的图表选择，遵循设计原则，确保色彩编码合理及无障碍访问，提供响应式与最佳实践建议。
Trigger Scenarios
需要选择合适的数据图表类型
设计数据可视化样式与配色
优化图表的可访问性与响应式布局
Install
npx skills add Owl-Listener/designer-skills --skill data-visualization -g -y
SKILL.md
Frontmatter
{
"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
Version History
-
20e34c4
Current 2026-08-19 23:23
通过脚本强制描述包含使用触发条件，明确技能边界以解决冲突（如与color-system分离），并限制描述长度。
- acc3e57 2026-07-25 05:16
