data-visualization · owl-listener — скилл для Claude Code: выбор графиков
Помогает агенту выбрать тип графика и настроить оси, подписи и цвета так, чтобы диаграмма читалась без легенды.
npx skills add Owl-Listener/designer-skills --skill data-visualization -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/data-visualization/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/data-visualization/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill data-visualization -a codex2Вручную: положить файлы
.agents/skills/data-visualization/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill data-visualization -a cursor2Вручную: положить файлы
.cursor/skills/data-visualization/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills data-visualization2Вручную: положить файлы
.github/skills/data-visualization/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill data-visualization -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/data-visualizationВручную: положить файлы
.devin/skills/data-visualization/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill data-visualization -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора109
Другие версии data-visualization
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о 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