creating-dashboards

Name: creating-dashboards
Author: ancoleman

310installs59forks

How to install creating-dashboards?

ancoleman/ai-design-components/creating-dashboards

$npx -y skills add ancoleman/ai-design-components --skill creating-dashboards

Installs into the current project.

Summary

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 mu

Files · 1

View on GitHub

SKILL.md

1	# Creating Dashboards
2
3	## Purpose
4
5	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.
6
7	## When to Use
8
9	Activate this skill when:
10	- Building business intelligence or analytics dashboards
11	- Creating executive reporting interfaces
12	- Implementing real-time monitoring systems
13	- Designing KPI displays with metrics and trends
14	- Developing customizable widget-based layouts
15	- Coordinating filters across multiple data displays
16	- Building responsive data-heavy interfaces
17	- Implementing drag-and-drop dashboard editors
18	- Creating template-based analytics systems
19	- Designing multi-tenant SaaS dashboards
20
21	## Core Dashboard Elements
22
23	### KPI Card Anatomy
24	```
25	┌────────────────────────────┐
26	│ Revenue (This Month) │ ← Label with time period
27	│ │
28	│ $1,245,832 │ ← Big number (primary metric)
29	│ ↑ 15.3% vs last month │ ← Trend indicator with comparison
30	│ ▂▃▅▆▇█ (sparkline) │ ← Mini visualization
31	└────────────────────────────┘
32	```
33
34	### Widget Container Structure
35	- Title bar with widget name and actions
36	- Loading state (skeleton or spinner)
37	- Error boundary with retry option
38	- Resize handles for adjustable layouts
39	- Settings menu (export, configure, refresh)
40
41	### Dashboard Layout Types
42
43	Fixed Layout: Designer-defined placement, consistent across users
44	Customizable Grid: User drag-and-drop, resizable widgets, saved layouts
45	Template-Based: Pre-built patterns, industry-specific starting points
46
47	### Global Dashboard Controls
48	- Date range picker (affects all widgets)
49	- Filter panel (coordinated across widgets)
50	- Refresh controls (manual/auto-refresh)
51	- Export actions (PDF, image, data)
52	- Theme switcher (light/dark/custom)
53
54	## Implementation Approach
55
56	### 1. Choose Dashboard Architecture
57
58	For Quick Analytics Dashboard → Use Tremor
59	Pre-built KPI cards, charts, and tables with minimal code:
60	```bash
61	npm install @tremor/react
62	```
63
64	For Customizable Dashboard → Use react-grid-layout
65	Drag-and-drop, resizable widgets, user-defined layouts:
66	```bash
67	npm install react-grid-layout
68	```
69
70	### 2. Set Up Global State Management
71
72	Implement filter context for cross-widget coordination:
73	```tsx
74	// Dashboard context for shared filters
75	const DashboardContext = createContext({
76	filters: { dateRange: null, categories: [] },
77	setFilters: () => {},
78	refreshInterval: 30000
79	});
80
81	// Wrap dashboard with provider
82	<DashboardContext.Provider value={dashboardState}>
83	<FilterPanel />
84	<WidgetGrid />
85	</DashboardContext.Provider>
86	```
87
88	### 3. Implement Data Fetching Strategy
89
90	Parallel Loading: Fetch all widget data simultaneously
91	Lazy Loading: Load visible widgets first, others on scroll
92	Cached Updates: Serve from cache while fetching fresh data
93
94	### 4. Configure Real-Time Updates
95
96	Server-Sent Events (Recommended for Dashboards):
97	```tsx
98	const eventSource = new EventSource('/api/dashboard/stream');
99	eventSource.onmessage = (event) => {
100	const update = JSON.parse(event.data);
101	updateWidget(update.widgetId, update.data);
102	};
103	```
104
105	### 5. Apply Responsive Design
106
107	Define breakpoints for different screen sizes:
108	- Desktop (>1200px): Multi-column grid
109	- Tablet (768-1200px): 2-column layout
110	- Mobile (<768px): Single column stack
111
112	## Quick Start with Tremor
113
114	### Basic KPI Dashboard
115	```tsx
116	import { Card, Grid, Metric, Text, BadgeDelta, AreaChart } from '@tremor/react';
117
118	function QuickDashboard({ data }) {
119	return (
120	<Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-4">
121	{/* KPI Cards */}
122	<Card>
123	<Text>Total Revenue</Text>
124	<Metric>$45,231.89</Metric>
125	<BadgeDelta deltaType="increase">+12.5%</BadgeDelta>
126	</Card>
127
128	<Card>
129	<Text>Active Users</Text>
130	<Metric>1,234</Metric>
131	<BadgeDelta deltaType="decrease">-2.3%</BadgeDelta>
132	</Card>
133
134	{/* Chart Widget */}
135	<Card className="lg:col-span-2">
136	<Text>Revenue Trend</Text>
137	<AreaChart
138	data={data.revenue}
139	index="date"
140	categories={["revenue"]}
141	valueFormatter={(value) => `$${value.toLocaleString()}`}
142	/>
143	</Card>
144	</Grid>
145	);
146	}
147	```
148
149	For complete implementation, see `examples/tremo

People who liked this also viewed

6 picks

Type

creating-dashboards

310installs59forks

View on GitHub

How to install creating-dashboards?

ancoleman/ai-design-components/creating-dashboards

$npx -y skills add ancoleman/ai-design-components --skill creating-dashboards

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Creating Dashboards
2
3	## Purpose
4
5	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.
6
7	## When to Use
8
9	Activate this skill when:
10	- Building business intelligence or analytics dashboards
11	- Creating executive reporting interfaces
12	- Implementing real-time monitoring systems
13	- Designing KPI displays with metrics and trends
14	- Developing customizable widget-based layouts
15	- Coordinating filters across multiple data displays
16	- Building responsive data-heavy interfaces
17	- Implementing drag-and-drop dashboard editors
18	- Creating template-based analytics systems
19	- Designing multi-tenant SaaS dashboards
20
21	## Core Dashboard Elements
22
23	### KPI Card Anatomy
24	```
25	┌────────────────────────────┐
26	│ Revenue (This Month) │ ← Label with time period
27	│ │
28	│ $1,245,832 │ ← Big number (primary metric)
29	│ ↑ 15.3% vs last month │ ← Trend indicator with comparison
30	│ ▂▃▅▆▇█ (sparkline) │ ← Mini visualization
31	└────────────────────────────┘
32	```
33
34	### Widget Container Structure
35	- Title bar with widget name and actions
36	- Loading state (skeleton or spinner)
37	- Error boundary with retry option
38	- Resize handles for adjustable layouts
39	- Settings menu (export, configure, refresh)
40
41	### Dashboard Layout Types
42
43	Fixed Layout: Designer-defined placement, consistent across users
44	Customizable Grid: User drag-and-drop, resizable widgets, saved layouts
45	Template-Based: Pre-built patterns, industry-specific starting points
46
47	### Global Dashboard Controls
48	- Date range picker (affects all widgets)
49	- Filter panel (coordinated across widgets)
50	- Refresh controls (manual/auto-refresh)
51	- Export actions (PDF, image, data)
52	- Theme switcher (light/dark/custom)
53
54	## Implementation Approach
55
56	### 1. Choose Dashboard Architecture
57
58	For Quick Analytics Dashboard → Use Tremor
59	Pre-built KPI cards, charts, and tables with minimal code:
60	```bash
61	npm install @tremor/react
62	```
63
64	For Customizable Dashboard → Use react-grid-layout
65	Drag-and-drop, resizable widgets, user-defined layouts:
66	```bash
67	npm install react-grid-layout
68	```
69
70	### 2. Set Up Global State Management
71
72	Implement filter context for cross-widget coordination:
73	```tsx
74	// Dashboard context for shared filters
75	const DashboardContext = createContext({
76	filters: { dateRange: null, categories: [] },
77	setFilters: () => {},
78	refreshInterval: 30000
79	});
80
81	// Wrap dashboard with provider
82	<DashboardContext.Provider value={dashboardState}>
83	<FilterPanel />
84	<WidgetGrid />
85	</DashboardContext.Provider>
86	```
87
88	### 3. Implement Data Fetching Strategy
89
90	Parallel Loading: Fetch all widget data simultaneously
91	Lazy Loading: Load visible widgets first, others on scroll
92	Cached Updates: Serve from cache while fetching fresh data
93
94	### 4. Configure Real-Time Updates
95
96	Server-Sent Events (Recommended for Dashboards):
97	```tsx
98	const eventSource = new EventSource('/api/dashboard/stream');
99	eventSource.onmessage = (event) => {
100	const update = JSON.parse(event.data);
101	updateWidget(update.widgetId, update.data);
102	};
103	```
104
105	### 5. Apply Responsive Design
106
107	Define breakpoints for different screen sizes:
108	- Desktop (>1200px): Multi-column grid
109	- Tablet (768-1200px): 2-column layout
110	- Mobile (<768px): Single column stack
111
112	## Quick Start with Tremor
113
114	### Basic KPI Dashboard
115	```tsx
116	import { Card, Grid, Metric, Text, BadgeDelta, AreaChart } from '@tremor/react';
117
118	function QuickDashboard({ data }) {
119	return (
120	<Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-4">
121	{/* KPI Cards */}
122	<Card>
123	<Text>Total Revenue</Text>
124	<Metric>$45,231.89</Metric>
125	<BadgeDelta deltaType="increase">+12.5%</BadgeDelta>
126	</Card>
127
128	<Card>
129	<Text>Active Users</Text>
130	<Metric>1,234</Metric>
131	<BadgeDelta deltaType="decrease">-2.3%</BadgeDelta>
132	</Card>
133
134	{/* Chart Widget */}
135	<Card className="lg:col-span-2">
136	<Text>Revenue Trend</Text>
137	<AreaChart
138	data={data.revenue}
139	index="date"
140	categories={["revenue"]}
141	valueFormatter={(value) => `$${value.toLocaleString()}`}
142	/>
143	</Card>
144	</Grid>
145	);
146	}
147	```
148
149	For complete implementation, see `examples/tremo

People who liked this also viewed

6 picks

Type