creating-dashboards

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkDeclared3 observations
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha a23b34902421 · 20 Oct 2026Report an issue or request a re-scan

• Publisherancoleman GitHub userOwner of the repository this skill is read from
• Source folderancoleman/ai-design-components/skills/creating-dashboardsThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdicta23b34902421A new audit runs when the source changes
• Repository statusNot archivedLast push 313 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its 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…

---
name: creating-dashboards
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.
---

# 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

### Global Dashboard Controls
- Date range picker (affects all widgets)
- Filter panel (coordinated across widgets)
- Refresh controls (manual/auto-refresh)
- Export actions (PDF, image, data)
- Theme switcher (light/dark/custom)

## Implementation Approach

### 1. Choose Dashboard Architecture

**For Quick Analytics Dashboard → Use Tremor**
Pre-built KPI cards, charts, and tables with minimal code:
```bash
npm install @tremor/react
```

**For Customizable Dashboard → Use react-grid-layout**
Drag-and-drop, resizable widgets, user-defined layouts:
```bash
npm install react-grid-layout
```

### 2. Set Up Global State Management

Implement filter context for cross-widget coordination:
```tsx
// Dashboard context for shared filters
const DashboardContext = createContext({
  filters: { dateRange: null, categories: [] },
  setFilters: () => {},
  refreshInterval: 30000
});

// Wrap dashboard with provider
<DashboardContext.Provider value={dashboardState}>
  <FilterPanel />
  <WidgetGrid />
</DashboardContext.Provider>
```

### 3. Implement Data Fetching Strategy

**Parallel Loading**: Fetch all widget data simultaneously
**Lazy Loading**: Load visible widgets first, others on scroll
**Cached Updates**: Serve from cache while fetching fresh data

### 4. Configure Real-Time Updates

**Server-Sent Events (Recommended for Dashboards)**:
```tsx
const eventSource = new EventSource('/api/dashboard/stream');
eventSource.onmessage = (event) => {
  const update = JSON.parse(event.data);
  updateWidget(update.widgetId, update.data);
};
```

### 5. Apply Responsive Design

Define breakpoints for different screen sizes:
- Desktop (>1200px): Multi-column grid
- Tablet (768-1200px): 2-column layout
- Mobile (<768px): Single column stack

## Quick Start with Tremor

### Basic KPI Dashboard
```tsx
import { Card, Grid, Metric, Text, BadgeDelta, AreaChart } from '@tremor/react';

function QuickDashboard({ data }) {
  return (
    <Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-4">
      {/* KPI Cards */}
      <Card>
        <Text>Total Revenue</Text>
        <Metric>$45,231.89</Metric>
        <BadgeDelta deltaType="increase">+12.5%</BadgeDelta>
      </Card>

      <Card>
        <Text>Active Users</Text>
        <Metric>1,234</Metric>
        <BadgeDelta deltaType="decrease">-2.3%</BadgeDelta>
      </Card>

      {/* Chart Widget */}
      <Card className="lg:col-span-2">
        <Text>Revenue Trend</Text>
        <AreaChart
          data={data.revenue}
          index="date"
          categories={["revenue"]}
          valueFormatter={(value) => `$${value.toLocaleString()}`}
        />
      </Card>
    </Grid>
  );
}
```

For complete implementation, see `examples/tremor-dashboard.tsx`.

## Customizable Dashboard Implementation

### Drag-and-Drop Grid Layout
```tsx
import { Responsive, WidthProvider } from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';

const ResponsiveGridLayout = WidthProvider(Responsive);

function CustomizableDashboard() {
  const [layouts, setLayouts] = useState(getStoredLayouts());

  return (
    <ResponsiveGridLayout
      layouts={layouts}
      breakpoints={{ lg: 1200, md: 996, sm: 768 }}
      cols={{ lg: 12, md: 10, sm: 6 }}
      rowHeight={60}
      onLayoutChange={(layout, layouts) => {
        setLayouts(layouts);
        localStorage.setItem('dashboardLayout', JSON.stringify(layouts));
      }}
      draggableHandle=".widget-header"
    >
      <div key="kpi1">
        <KPIWidget data={kpiData} />
      </div>
      <div key="chart1">
        <ChartWidget data={chartData} />
      </div>
      <div key="table1">
        <TableWidget data={tableData} />
      </div>
    </ResponsiveGridLayout>
  );
}

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-20
   ✓SAFE B 89 / 100

   first audit · source a23b34902421

Questions about creating-dashboards

• github.com/ancoleman/ai-design-components/tree/main/skills/creat — the audited source at commit a23b34902421 and every finding aboveObserved · 20 Oct 2026

Spotted something wrong? Report a correction · Methodology