# data-viz-2025

Скилл для React, Next.js и TypeScript: помогает строить интерактивные графики, дашборды и визуализации на Tailwind CSS.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 304 установки · ★ 254
- Автор: curiositech
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/curiositech/some_claude_skills/tree/HEAD/.claude/skills/data-viz-2025/SKILL.md
- Обновлён: 2026-09-06
- HTML: https://affpapa.org/nevibecode/skills/data-viz-2025

## Что делает

Скилл включается, когда в задаче появляются слова «data viz», «chart», «graph», «dashboard», «plot», «Recharts», «Nivo» или «D3». Дальше агент выбирает библиотеку по дереву решений: Observable Plot для быстрого перебора вариантов, Recharts для обычных столбцов и линий, Nivo когда нужен аккуратный вид из коробки, Visx или чистый D3 для нестандартных схем вроде Sankey и сетевых графов, Tremor и shadcn-ui Charts для дашбордов на Tailwind.

Внутри есть чек-лист Тафте, описание рабочего процесса графической команды NYT и разделы про анимацию и цвет. Всё это лежит в справочных файлах: `references/tufte-principles.md`, `references/nyt-workflow.md`, `references/animation-patterns.md`. Анимации советует строить на spring-физике через `framer-motion` и проверять `prefers-reduced-motion`.

Скилл не для статичных PNG и SVG без интерактива, не для печатной графики и не для простых HTML-таблиц — тут он прямо говорит, что браться не будет. Набор инструментов ограничен `Read,Write,Edit,Bash`, так что рисовать картинки вручную агенту нечем. Если проект на Vue или Svelte, весь стек из описания мимо.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill data-viz-2025 -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/data-viz-2025/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/data-viz-2025/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill data-viz-2025 -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/data-viz-2025/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill data-viz-2025 -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/data-viz-2025/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install curiositech/some_claude_skills data-viz-2025
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/data-viz-2025/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill data-viz-2025 -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/curiositech/some_claude_skills --path .claude/skills/data-viz-2025
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/data-viz-2025/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill data-viz-2025 -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/curiositech/some_claude_skills/tree/HEAD/.claude/skills/data-viz-2025/SKILL.md

## Когда брать
- выбрать библиотеку графиков под конкретную задачу на React
- собрать дашборд на Tailwind без ручной вёрстки осей и легенд
- построить Sankey или сетевой граф, для которых нет готового компонента
- убрать лишние линии и подписи, чтобы график читался
- добавить анимацию перехода между состояниями данных

## Примеры запросов агенту
- Построй дашборд продаж на Recharts с фильтром по месяцам, стили под Tailwind
- Нужен Sankey по потокам пользователей между экранами, посоветуй библиотеку и собери компонент
- Проверь мой график по чек-листу Тафте и убери всё лишнее

## Похожие
- [data-viz](https://affpapa.org/nevibecode/skills/data-viz.md) — скилл · 568 установок
- [infographic-and-data-viz](https://affpapa.org/nevibecode/skills/infographic-and-data-viz.md) — скилл · 610 установок
- [analytics-metrics](https://affpapa.org/nevibecode/skills/analytics-metrics.md) — скилл · 380 установок
- [modern-web-development](https://affpapa.org/nevibecode/skills/modern-web-development.md) — скилл · 1200 установок
- [bencium-code-conventions](https://affpapa.org/nevibecode/skills/bencium-code-conventions.md) — скилл · 3300 установок
- [front-end-developer](https://affpapa.org/nevibecode/skills/front-end-developer.md) — скилл · 1300 установок

Из того же набора: [curiositech/some_claude_skills](https://affpapa.org/nevibecode/by/curiositech/some_claude_skills.md) — 20 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md