# blog-chart

Генерирует адаптивные SVG-диаграммы для статей в HTML и MDX. Оркестратор запускает скилл при обработке маркеров данных в черновиках blog-write.

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

## Что делает

\`blog-chart` переводит исследовательские данные в векторные SVG-диаграммы. Скилл поддерживает горизонтальные и сгруппированные столбчатые графики, диаграммы-пончики, линейные графики, леденцовые диаграммы, площадные и радарные схемы. Разметка выводится с прозрачным фоном и цветом `currentColor`. Поэтому графика одинаково хорошо видна на тёмном и светлом фоне.

На выходе формируется код для HTML или синтаксис JSX для MDX с заменой атрибутов вроде `stroke-width` на `strokeWidth`. Генератор подставляет атрибуты доступности `role="img"`, описания `<desc>` для программ чтения с экрана и блок источника данных внизу.

Скилл нельзя вызвать напрямую через диалог, так как параметр `user-invocable` выключен. Обычные агенты только оставляют маркеры `[CHART: ...]`, а финальный рендеринг выполняет оркестратор с помощью скрипта `generate_chart_svg.py` на Python 3.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AgriciDaniel/claude-blog --skill blog-chart -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AgriciDaniel/claude-blog --skill blog-chart -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AgriciDaniel/claude-blog --skill blog-chart -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install AgriciDaniel/claude-blog blog-chart
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AgriciDaniel/claude-blog --skill blog-chart -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/AgriciDaniel/claude-blog --path skills/blog-chart
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add AgriciDaniel/claude-blog --skill blog-chart -a opencode
```

### Claude.ai

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

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

## Когда брать
- встроить inline SVG-диаграммы в статьи формата HTML или MDX
- подобрать тип графика под структуру собранных числовых данных
- сохранить контрастность графиков при переключении тёмной и светлой темы
- добавить разметку доступности с тегами title и desc для скринридеров

## Примеры запросов агенту
- Добавь маркер `[CHART: horizontal bar]` для сравнения прироста регистраций по продуктам
- Запусти blog-write и собери черновик статьи с SVG-графиками для MDX

## Похожие
- [syncfusion-react-3d-chart](https://affpapa.org/nevibecode/skills/syncfusion-react-3d-chart.md) — скилл · 656 установок
- [syncfusion-react-3d-circular-chart](https://affpapa.org/nevibecode/skills/syncfusion-react-3d-circular-chart.md) — скилл · 646 установок
- [d3-data-visualization](https://affpapa.org/nevibecode/skills/d3-data-visualization.md) — скилл · 13 установок
- [svg-art](https://affpapa.org/nevibecode/skills/svg-art.md) — скилл · 509 установок
- [chart](https://affpapa.org/nevibecode/skills/chart.md) — скилл · 3900 установок
- [swift-charts](https://affpapa.org/nevibecode/skills/swift-charts.md) — скилл · 4000 установок

Из того же набора: [agricidaniel/claude-blog](https://affpapa.org/nevibecode/by/agricidaniel/claude-blog.md) — 29 карточек

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

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