К основному содержанию
скилл CX Codex

data-visualization · owl-listener — скилл для Claude Code: выбор графиков

Помогает агенту выбрать тип графика и настроить оси, подписи и цвета так, чтобы диаграмма читалась без легенды.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Owl-Listener/designer-skills --skill data-visualization -a claude-code
Открыть на GitHub

Что делает data-visualization

Скилл включается, когда вы просите показать данные графически. Внутри — правила выбора типа диаграммы по задаче: сравнение (столбцы, сгруппированные столбцы, bullet-чарт), динамика во времени (линия, область, спарклайн), части целого (пончик, стек, treemap), распределение (гистограмма, ящик с усами, scatter) и связи (scatter, bubble, heat map).

Отдельный блок — оформление. Агент держит высокое соотношение данных к декору, ставит подписи прямо на графике вместо легенды, начинает ось Y столбчатых диаграмм с нуля и добавляет аннотации к ключевым точкам. Для доступности советует не полагаться только на цвет: штриховки, подписи, разные формы. Палитры делит на последовательные, дивергентные и категориальные, отдельно предупреждает про красно-зелёные сочетания.

Есть и адаптив: на маленьких экранах скилл предлагает упрощать — меньше точек, крупнее подписи, иногда таблица вместо графика. Категориальная цветовая шкала остаётся за скиллом color-system, так что за неё этот отвечать не будет. Проверяйте на реальных данных: на идеальных сэмплах график почти всегда выглядит нормально.

Какие задачи решает

  • выбрать тип графика под конкретную задачу
  • настроить оси, подписи и легенду без перегруза
  • сделать диаграмму различимой для людей с дальтонизмом
  • упростить график для мобильного экрана
  • подобрать шкалу для упорядоченных и категориальных данных

Примеры запросов агенту

  • покажи динамику выручки по месяцам — подбери подходящий график
  • сравни конверсию по каналам, сделай столбчатую диаграмму с подписями
  • сделай доступную диаграмму распределения заказов

Как установить data-visualization

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill data-visualization -a claude-code

2Вручную: положить файлы

~/.claude/skills/data-visualization/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/data-visualization/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора109

typography-scale Строит модульную типографическую шкалу: размеры, насыщенность, межстрочный интервал. Пригодится, когда верстаете дизайн-систему с нуля. CX Codex +1 2 600установок color-system Скилл собирает палитру продукта: тональные шкалы, семантические роли и проверку контраста по WCAG. Пригодится, когда цвета задают с нуля или переделывают. CX Codex +1 2 500установок illustration-style Скилл помогает составить стайлгид иллюстраций: фиксирует визуальный язык, правила палитры и ограничения размеров. Пригодится при заказе графики или стандартизации визуала. CX Codex +1 2 500установок visual-hierarchy Скилл выстраивает визуальную иерархию интерфейса через размер, насыщенность, цвет, отступы и позицию. Пригодится при создании новых экранов. CX Codex +1 2 500установок layout-grid Скилл задаёт адаптивную сетку страницы: колонки, отступы между ними, поля и поведение на брейкпоинтах. Пригодится, когда верстаете структуру с нуля. CX Codex +1 2 400установок icon-system Задаёт правила для системы иконок: сетку 24x24px, шкалу размеров, именование и доступность. Пригодится при наведении порядка в дизайн-системе проекта. CX Codex +1 2 400установок user-flow-diagram Строит диаграммы экранных переходов: точки входа, развилки, ветки ошибок. Пригодится, когда фичу нужно описать по шагам. CX Codex +1 2 400установок dark-mode-design Скилл переводит готовую светлую палитру в тёмную тему: уровни поверхностей, контраст, приглушение ярких цветов. Нужен, когда светлые токены уже есть. CX Codex +1 2 400установок

Другие версии data-visualization

Похожие

d3-data-visualization официальный OpenAI Скилл помогает собирать кастомные визуализации на D3: SVG- и DOM-графики, подписи, аннотации и интерактивность. Нужен для сложных браузерных диаграмм. CX Codex GP ChatGPT 13установок visualization-strategy-and-critique официальный OpenAI Выбирает форматы диаграмм, компонует дашборды и критикует визуализацию данных. Помогает продумать экран до написания кода. CX Codex GP ChatGPT 22установок mapbox-data-visualization-patterns mapbox Готовые шаблоны визуализации данных на картах Mapbox для Claude Code: картограммы, тепловые слои и 3D-модели. Пригодится при отрисовке статистики и плотности точек. CX Codex +1 2 100установок data-viz aladicf Скилл для проектирования графиков, дашбордов и таблиц с данными. Помогает выбрать тип диаграммы и не забыть про доступность. CX Codex +1 568установок Data Visualization aj-geddes Скилл для построения графиков на matplotlib и seaborn: разведочный анализ, поиск выбросов, слайды для заказчика. CX Codex +1 568установок infographic-and-data-viz social-media-skills Скилл помогает превратить реальные данные в график или инфографику, где главный вывод виден за три секунды. Пригодится, когда цифры есть, а подача хромает. CX Codex +1 610установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о data-visualization

Как установить data-visualization в Claude?

Выполните npx skills add Owl-Listener/designer-skills --skill data-visualization -a claude-code. Скилл окажется в ~/.claude/skills/data-visualization/SKILL.md.

Что делает data-visualization?

Подбирает тип диаграммы под задачу и задаёт кодирование данных: разметку, оси, подписи, цвета и доступность. Работает только с выбором графика и кодированием.

Чем data-visualization отличается от color-system?

Категориальная цветовая шкала относится к скиллу color-system. Здесь остаются выбор типа графика и кодирование данных.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой