# Creating Dashboards

Creates comprehensive dashboard and analytics interfaces that combine data...

- Repository: https://github.com/ancoleman/ai-design-components (526 stars)
- Category: Business
- License: MIT
- Last updated: 2025-12-11
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add ancoleman/ai-design-components --skill creating-dashboards -g -a claude-code -y`
Codex: `npx skills add ancoleman/ai-design-components --skill creating-dashboards -g -a codex -y`
Cursor: `npx skills add ancoleman/ai-design-components --skill creating-dashboards -g -a cursor -y`
Gemini CLI: `npx skills add ancoleman/ai-design-components --skill creating-dashboards -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ancoleman/ai-design-components`

## Description

Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts. Use this skill when building business intelligence dashboards, monitoring systems, executive reports, or any interface that requires multiple coordinated data displays with filters, metrics, and visualizations working together.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Creating Dashboards

## Purpose

This skill enables the creation of sophisticated dashboard interfaces that aggregate and present data through coordinated widgets including KPI cards, charts, tables, and filters. Dashboards serve as centralized command centers for data-driven decision making, combining multiple component types from other skills (data-viz, tables, design-tokens) into unified analytics experiences with real-time updates, responsive layouts, and interactive filtering.

## When to Use

Activate this skill when:
- Building business intelligence or analytics dashboards
- Creating executive reporting interfaces
- Implementing real-time monitoring systems
- Designing KPI displays with metrics and trends
- Developing customizable widget-based layouts
- Coordinating filters across multiple data displays
- Building responsive data-heavy interfaces
- Implementing drag-and-drop dashboard editors
- Creating template-based analytics systems
- Designing multi-tenant SaaS dashboards

## Core Dashboard Elements

### KPI Card Anatomy
```
┌────────────────────────────┐
│ Revenue (This Month)       │ ← Label with time period
│                            │
│  $1,245,832               │ ← Big number (primary metric)
│  ↑ 15.3% vs last month    │ ← Trend indicator with comparison
│  ▂▃▅▆▇█ (sparkline)       │ ← Mini visualization
└────────────────────────────┘
```

### Widget Container Structure
- Title bar with widget name and actions
- Loading state (skeleton or spinner)
- Error boundary with retry option
- Resize handles for adjustable layouts
- Settings menu (export, configure, refresh)

### Dashboard Layout Types

**Fixed Layout**: Designer-defined placement, consistent across users
**Customizable Grid**: User drag-and-drop, resizable widgets, saved layouts
**Template-Based**: Pre-built patterns, industry-specific starting points

The rest: https://github.com/ancoleman/ai-design-components/blob/HEAD/skills/creating-dashboards/SKILL.md