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

kpi-dashboard-design — скилл для Claude Code: KPI и установка

Скилл помогает проектировать KPI-дашборды, выбирать метрики и разбирать противоречия в расчётах. Подойдёт для SaaS, операций и анализа когорт.

Установить в Claude Code · Через маркетплейс плагинов Все способы и платформы ↓
/plugin marketplace add wshobson/agents
/plugin install business-analytics@claude-code-workflows
Открыть на GitHub

Что делает kpi-dashboard-design

kpi-dashboard-design задаёт структуру KPI-дашборда: стратегические, тактические и операционные показатели, контекст для метрик, тренды, цели и drilldown от сводки к деталям. Внутри есть правила для executive-, department- и real-time-представлений, а также рекомендации по цветам, адаптивности и документированию формул.

Скилл разбирает типовые сбои: расхождение MRR из-за годовых планов, плоские retention cohorts, нагрузку от частого обновления и постоянные срабатывания алертов. В примерах используются SQL для нормализации MRR и когорт, Python для сводной таблицы и динамического порога. Подробные примеры вынесены в references/details.md.

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

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

  • выбрать KPI для executive-дашборда
  • собрать live-мониторинг состояния сервисов и throughput запросов
  • сравнить retention cohorts по месяцам регистрации
  • найти причину расхождения MRR с расчётами finance
  • настроить алерты по отклонению от rolling average

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

  • Спроектируй executive SaaS metrics dashboard с MRR, churn и LTV/CAC.
  • Проверь, почему retention cohorts выглядят одинаково, и изучи `references/details.md`.
  • Предложи способ вынести расчёт MRR в summary table и обновлять его через cron или Celery.

Как установить kpi-dashboard-design

1Через маркетплейс плагинов

/plugin marketplace add wshobson/agents
/plugin install business-analytics@claude-code-workflows

Команда ставит плагин business-analytics целиком, со всеми его скиллами

2Через Skills CLI (Vercel)

npx skills add wshobson/agents --skill kpi-dashboard-design -a claude-code

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

~/.claude/skills/kpi-dashboard-design/SKILL.md

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

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

Весь набор →
typescript-advanced-types Seth Hobson Помогает агенту писать сложную типизацию TypeScript: generics, conditional types и преобразования типов. Нужен для библиотек, API-клиентов и строгих конфигураций. Claude Code CX Codex Cursor 92 169установок tailwind-design-system Seth Hobson Помогает строить дизайн-системы на Tailwind CSS v4. Пригодится для библиотеки компонентов или унификации интерфейса в проекте. Claude Code CX Codex Cursor 70 180установок brand-landingpage Travis D. Elliott Скилл проводит интервью о продукте и визуальном стиле, затем помогает создать лендинг через Stitch. Подойдёт, если у проекта пока нет готового дизайна. Claude Code CX Codex Cursor 39 476установок python-testing-patterns Seth Hobson Скилл помогает писать тесты Python с pytest, фикстурами и моками. Подходит для настройки тестового набора и отладки падающих проверок. Claude Code CX Codex Cursor 36 943установок python-performance-optimization Seth Hobson Скилл помогает профилировать Python-код, находить узкие места CPU и памяти. Подходит, когда приложение медленно отвечает или тратит слишком много ресурсов. Claude Code CX Codex Cursor 35 675установок nextjs-app-router-patterns Seth Hobson Помогает строить приложения на Next.js App Router: выбирать режим рендеринга, организовывать маршруты и получать данные. Подойдёт при миграции с Pages Router или работе с Server Components. Claude Code CX Codex Cursor 32 529установок api-design-principles Seth Hobson Скилл помогает проектировать и проверять REST- и GraphQL API. Пригодится при подготовке спецификации, пересмотре существующего API или согласовании стандартов команды. Claude Code CX Codex Cursor 30 348установок code-review-excellence Seth Hobson Скилл помогает разбирать pull request по этапам, находить ошибки и давать конкретную обратную связь. Подойдёт для ревью кода и настройки командных стандартов. Claude Code CX Codex Cursor 30 193установок

Похожие

surprise-me bytedance Скилл подбирает другие доступные скиллы и соединяет их в один неожиданный результат. Запустите его, когда хочется идеи или творческого эксперимента. Claude Code CX Codex Cursor +1 2 300установок explain-interface jakubkrehel Разбирает чужие веб-интерфейсы, анимации и визуальные эффекты по ссылке или скриншоту. Помогает понять, из каких слоёв и стилей собран элемент. Claude Code CX Codex Cursor +1 13 900установок unocss Anthony Fu Скилл даёт агенту справочник по UnoCSS: конфиг, правила, шорткаты, пресеты и трансформеры. Пригодится при настройке проекта на UnoCSS или при переносе знаний Tailwind на него. Claude Code CX Codex Cursor +1 16 000установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. Claude Code 979 543установок

Вопросы о kpi-dashboard-design

Как установить kpi-dashboard-design в Claude Code?

Используйте npx skills add wshobson/agents --skill kpi-dashboard-design -a claude-code. Файл скилла появится в ~/.claude/skills/kpi-dashboard-design/SKILL.md.

Что делает kpi-dashboard-design?

Скилл помогает выбрать KPI, разложить дашборд по уровням и проверить расчёты. Он также подсказывает, как строить drilldown, real-time views и алерты.

С какими платформами совместим скилл?

Вход содержит варианты установки для Claude Code, Codex и Cursor. Для Claude Code доступны команды через marketplace и npx skills.

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

SKILL.md · MIT
---
name: kpi-dashboard-design
description: Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios; designing an operations center with live service health and request throughput; creating a cohort retention analysis view for a product team; or debugging a dashboard where metrics contradict each other due to inconsistent calculation methodology.
---

# KPI Dashboard Design

Comprehensive patterns for designing effective Key Performance Indicator (KPI) dashboards that drive business decisions.

## When to Use This Skill

- Designing executive dashboards
- Selecting meaningful KPIs
- Building real-time monitoring displays
- Creating department-specific metrics views
- Improving existing dashboard layouts
- Establishing metric governance

## Core Concepts

### 1. KPI Framework

| Level           | Focus            | Update Frequency  | Audience   |
| --------------- | ---------------- | ----------------- | ---------- |
| **Strategic**   | Long-term goals  | Monthly/Quarterly | Executives |
| **Tactical**    | Department goals | Weekly/Monthly    | Managers   |
| **Operational** | Day-to-day       | Real-time/Daily   | Teams      |

### 2. SMART KPIs

```
Specific: Clear definition
Measurable: Quantifiable
Achievable: Realistic targets
Relevant: Aligned to goals
Time-bound: Defined period
```

### 3. Dashboard Hierarchy

```
├── Executive Summary (1 page)
│   ├── 4-6 headline KPIs
│   ├── Trend indicators
│   └── Key alerts
├── Department Views
│   ├── Sales Dashboard
│   ├── Marketing Dashboard
│   ├── Operations Dashboard
│   └── Finance Dashboard
└── Detailed Drilldowns
    ├── Individual metrics
    └── Root cause analysis
```

## Detailed worked examples and patterns

Detailed sections (starting with `## Common KPIs by Department`) live in `references/details.md`. Read that file when the navigation summary above is insufficient.

## Best Practices

### Do's

- **Limit to 5-7 KPIs** - Focus on what matters
- **Show context** - Comparisons, trends, targets
- **Use consistent colors** - Red=bad, green=good
- **Enable drilldown** - From summary to detail
- **Update appropriately** - Match metric frequency

### Don'ts

- **Don't show vanity metrics** - Focus on actionable data
- **Don't overcrowd** - White space aids comprehension
- **Don't use 3D charts** - They distort perception
- **Don't hide methodology** - Document calculations
- **Don't ignore mobile** - Ensure responsive design

## Troubleshooting

### MRR shown on dashboard contradicts finance's number

The most common cause is inconsistent treatment of annual plans. Finance may prorate to a daily rate while the dashboard normalizes to monthly. Align on a single formula and document it directly on the dashboard card:

```sql
-- Explicit formula shown in tooltip / data dictionary
-- Annual plans: divide total contract value by 12
-- Quarterly plans: divide by 3
-- Monthly plans: use as-is
CASE subscription_interval
    WHEN 'monthly'   THEN amount
    WHEN 'quarterly' THEN amount / 3.0
    WHEN 'yearly'    THEN amount / 12.0
END AS normalized_mrr
```

### Dashboard shows green but product team reports users complaining

The dashboard likely tracks system uptime (a lagging indicator) but not user-facing quality metrics. Add customer-perceived metrics alongside infrastructure metrics:

| Infrastructure (green) | User-perceived (add these) |
|---|---|
| API uptime 99.9% | P95 page load time |
| Error rate 0.1% | Task completion rate |
| Queue depth normal | Support ticket volume |

### Retention cohort looks flat — no variation between cohorts

Check whether the cohort query is partitioning by signup month correctly. A common bug is using `created_at::date` instead of `DATE_TRUNC('month', created_at)`, which groups by day and produces cohorts too small to show trends:

```sql
-- Wrong: too granular, cohorts are too small
DATE_TRUNC('day', created_at) AS cohort_date

-- Correct: monthly cohorts
DATE_TRUNC('month', created_at) AS cohort_month
```

### Real-time dashboard hammers the database

A live dashboard refreshing every 10 seconds with complex cohort SQL will degrade production query performance. Separate OLAP workloads from OLTP by writing pre-aggregated metrics to a summary table via a scheduled job, and have the dashboard read from that:

```python
# Scheduled every 5 minutes via cron/Celery
def refresh_mrr_summary():
    conn.execute("""
        INSERT INTO kpi_snapshot (metric, value, snapshot_at)
        SELECT 'mrr', SUM(...), NOW()
        FROM subscriptions WHERE status = 'active'
        ON CONFLICT (metric) DO UPDATE SET value = EXCLUDED.value
    """)
```

### Alert thresholds fire constantly, team ignores them

Static thresholds set once and never reviewed cause alert fatigue. Use dynamic thresholds based on rolling averages so alerts fire only when the metric deviates significantly from its own baseline:

```python
# Alert if current value is > 2 standard deviations from 30-day rolling mean
def is_anomalous(current: float, history: list[float]) -> bool:
    mean = statistics.mean(history)
    stdev = statistics.stdev(history)
    return abs(current - mean) > 2 * stdev
```

## Related Skills

- `data-storytelling` - Turn dashboard findings into narratives that drive executive decisions

© Seth Hobson · MIT · wshobson/agents

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

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

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