# dashboard-creator

Скилл собирает одностраничный HTML-дашборд: карточки KPI, графики, прогресс-бары и таблицы. Пригодится, когда нужно показать метрики без фронтенд-фреймворка.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 315 установок · ★ 689
- Автор: mhattingpete
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/mhattingpete/claude-skills-marketplace/tree/HEAD/visual-documentation-plugin/skills/dashboard-creator/SKILL.md
- Обновлён: 2026-07-25
- HTML: https://affpapa.org/nevibecode/skills/dashboard-creator

## Что делает

Скилл описывает, из чего состоит дашборд, и задаёт шаблоны разметки. Внутри четыре блока: карточки KPI с названием метрики, значением, изменением в процентах и иконкой тренда, графики bar/pie/line на SVG или CSS, прогресс-бары и таблицы с данными. Готовый файл пишется как `[name]-dashboard.html`.

Порядок работы простой: сначала вытащить метрики и данные, потом разложить карточки по сетке, нарисовать графики, добавить индикаторы выполнения. Цвета скилл советует брать семантические: зелёный на рост, красный на падение, синий для нейтральных значений. В примере карточки стили заданы прямо в `<style>` — системный шрифт, светлый фон, тень под блоком.

Графики рисуются вручную через `<rect>` внутри `<svg>`, поэтому за пределы SVG-примитивов скилл не выходит. Если нужны интерактивные тултипы или зум, это придётся дописывать самому. Зато зависимостей нет: ни библиотек графиков, ни сборки.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill dashboard-creator -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill dashboard-creator -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill dashboard-creator -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mhattingpete/claude-skills-marketplace dashboard-creator
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill dashboard-creator -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/mhattingpete/claude-skills-marketplace --path visual-documentation-plugin/skills/dashboard-creator
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill dashboard-creator -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/mhattingpete/claude-skills-marketplace/tree/HEAD/visual-documentation-plugin/skills/dashboard-creator/SKILL.md

## Когда брать
- собрать страницу с метриками из готовых данных
- показать рост и падение показателей цветом
- нарисовать столбчатую или круговую диаграмму без библиотек
- вывести таблицу и прогресс-бары на одном экране
- сделать интерфейс мониторинга одним HTML-файлом

## Примеры запросов агенту
- Сделай дашборд по метрикам из этого CSV
- Покажи KPI-визуализацию выручки и конверсии
- Сгенерируй performance dashboard с графиками

## Похожие
- [kpi-dashboard-design](https://affpapa.org/nevibecode/skills/kpi-dashboard-design.md) — скилл · 16141 установка
- [metrics-dashboard](https://affpapa.org/nevibecode/skills/metrics-dashboard.md) — скилл · 3000 установок
- [build-dashboard](https://affpapa.org/nevibecode/skills/anthropics-build-dashboard.md) — скилл · 9100 установок
- [consumer-goods-tpe-dashboard-custom-kpi-configure](https://affpapa.org/nevibecode/skills/consumer-goods-tpe-dashboard-custom-kpi-configure.md) — скилл · 311 установок
- [analytics-metrics](https://affpapa.org/nevibecode/skills/analytics-metrics.md) — скилл · 380 установок
- [testing-data-visualizations](https://affpapa.org/nevibecode/skills/testing-data-visualizations.md) — скилл · 18 установок

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

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

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