Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
ancoleman avatar

Creating Dashboards

ancoleman/ai-design-components

  • 315 installs
  • 426 repo stars
  • Updated December 11, 2025
  • ancoleman/ai-design-components

Creating-dashboards is a Claude Code skill that creates dashboard and analytics interfaces combining data visualization, KPI cards, real-time updates, and interactive layouts.

About

Creating-dashboards is a Claude Code skill for building dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts. A developer uses it when building business-intelligence dashboards, monitoring systems, or executive reports. It covers KPI card anatomy, widget containers, cross-widget filter coordination, real-time updates via server-sent events, and responsive layouts using Tremor or react-grid-layout.

  • KPI cards, charts, tables, and filters in coordinated layouts
  • Cross-widget filter context and real-time updates via SSE
  • Tremor and react-grid-layout for quick or customizable dashboards

Creating Dashboards by the numbers

  • 315 all-time installs (skills.sh)
  • Ranked #740 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

creating-dashboards capabilities & compatibility

Capabilities
creating dashboards · building tables · building forms · building ai chat
Use cases
frontend · ui design · data analysis
From the docs

What creating-dashboards says it does

Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts.
SKILL.md
Server-Sent Events (Recommended for Dashboards)
SKILL.md
npx skills add https://github.com/ancoleman/ai-design-components --skill creating-dashboards

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs315
repo stars★ 426
Last updatedDecember 11, 2025
Repositoryancoleman/ai-design-components ↗

What it does

Build an analytics dashboard with KPI cards, coordinated filters, and real-time widget updates.

Who is it for?

Building BI/analytics dashboards with coordinated KPI cards, charts, and filters.

Skip if: Backend data pipelines or metric computation.

When should I use this skill?

Building a business-intelligence dashboard, monitoring system, or KPI display.

What you get

A responsive dashboard with coordinated filters, real-time updates, and reusable widgets.

  • KPI cards and widget containers
  • Cross-widget filter context
  • Real-time update wiring

By the numbers

  • 3 dashboard layout types (Fixed, Customizable Grid, Template-Based)
  • 3 responsive breakpoints (desktop, tablet, mobile)

Files

SKILL.mdMarkdownGitHub ↗

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:

npm install @tremor/react

For Customizable Dashboard → Use react-grid-layout Drag-and-drop, resizable widgets, user-defined layouts:

npm install react-grid-layout

2. Set Up Global State Management

Implement filter context for cross-widget coordination:

// 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):

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

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

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>
  );
}

For full example with widget catalog, see examples/customizable-dashboard.tsx.

Real-Time Data Patterns

Server-Sent Events (Recommended)

Best for unidirectional updates from server to dashboard:

function useSSEUpdates(endpoint) {
  useEffect(() => {
    const eventSource = new EventSource(endpoint);

    eventSource.onmessage = (event) => {
      const update = JSON.parse(event.data);
      // Update specific widget or all widgets
      dispatch({ type: 'UPDATE_WIDGET', payload: update });
    };

    return () => eventSource.close();
  }, [endpoint]);
}

WebSocket (For Bidirectional)

Use when dashboard needs to send commands back to server:

const ws = new WebSocket('ws://localhost:3000/dashboard');
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateDashboard(data);
};
// Send filter changes to server
ws.send(JSON.stringify({ type: 'FILTER_CHANGE', filters }));

Smart Polling Fallback

For environments without WebSocket/SSE support:

function useSmartPolling(fetchData, interval = 30000) {
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    if (isPaused || document.hidden) return;

    const timer = setInterval(fetchData, interval);
    return () => clearInterval(timer);
  }, [isPaused, interval]);

  // Pause when tab inactive
  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsPaused(document.hidden);
    };
    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
  }, []);
}

For detailed patterns including error handling and reconnection, see references/real-time-updates.md.

Performance Optimization

Lazy Loading Strategy

function DashboardGrid({ widgets }) {
  const [visibleWidgets, setVisibleWidgets] = useState(new Set());

  return widgets.map(widget => (
    <LazyLoad
      key={widget.id}
      height={widget.height}
      offset={100}
      once
      placeholder={<WidgetSkeleton />}
    >
      <Widget {...widget} />
    </LazyLoad>
  ));
}

Parallel Data Fetching

// Fetch all widget data simultaneously
const loadDashboard = async () => {
  const [kpis, charts, tables] = await Promise.all([
    fetchKPIs(),
    fetchChartData(),
    fetchTableData()
  ]);

  return { kpis, charts, tables };
};

Widget-Level Caching

function CachedWidget({ id, fetcher, ttl = 60000 }) {
  const cache = useRef({ data: null, timestamp: 0 });

  const getData = async () => {
    const now = Date.now();
    if (cache.current.data && now - cache.current.timestamp < ttl) {
      return cache.current.data;
    }

    const fresh = await fetcher();
    cache.current = { data: fresh, timestamp: now };
    return fresh;
  };

  // Use cached data while fetching fresh
  return <Widget data={cache.current.data} onRefresh={getData} />;
}

To analyze and optimize dashboard performance, run:

python scripts/optimize-dashboard-performance.py --analyze dashboard-config.json

Cross-Skill Integration

Using Data Visualization Components

Reference the data-viz skill for chart widgets:

// Use charts from data-viz skill
import { createChart } from '../data-viz/chart-factory';

const revenueChart = createChart('area', {
  data: revenueData,
  xAxis: 'date',
  yAxis: 'revenue',
  theme: dashboardTheme
});

Integrating Data Tables

Reference the tables skill for data grids:

// Use advanced tables from tables skill
import { DataGrid } from '../tables/data-grid';

<DataGrid
  data={transactions}
  columns={columnDefs}
  pagination={true}
  sorting={true}
  filtering={true}
/>

Applying Design Tokens

Use the design-tokens skill for consistent theming:

// Dashboard-specific tokens from design-tokens skill
const dashboardTokens = {
  '--dashboard-bg': 'var(--color-bg-secondary)',
  '--widget-bg': 'var(--color-white)',
  '--widget-shadow': 'var(--shadow-lg)',
  '--kpi-value-size': 'var(--font-size-4xl)',
  '--kpi-trend-positive': 'var(--color-success)',
  '--kpi-trend-negative': 'var(--color-error)'
};

Filter Input Components

Optionally use the forms skill for filter controls:

// Advanced filter inputs from forms skill
import { DateRangePicker, MultiSelect } from '../forms/inputs';

<FilterPanel>
  <DateRangePicker onChange={handleDateChange} />
  <MultiSelect options={categories} onChange={handleCategoryFilter} />
</FilterPanel>

Library Selection Guide

Choose Tremor When:

  • Need to build dashboards quickly
  • Want pre-styled, professional components
  • Using Tailwind CSS in your project
  • Building standard analytics interfaces
  • Limited customization requirements

Choose react-grid-layout When:

  • Users need to customize layouts
  • Drag-and-drop is required
  • Different users need different views
  • Building a dashboard builder tool
  • Maximum flexibility is priority

Combine Both When:

  • Use Tremor for widget contents (KPIs, charts)
  • Use react-grid-layout for layout management
  • Get best of both worlds

Bundled Resources

Scripts (Token-Free Execution)

  • scripts/generate-dashboard-layout.py - Generate responsive grid configurations
  • scripts/calculate-kpi-metrics.py - Calculate trends, comparisons, sparklines
  • scripts/validate-widget-config.py - Validate widget and filter configurations
  • scripts/optimize-dashboard-performance.py - Analyze and optimize performance
  • scripts/export-dashboard.py - Export dashboards to various formats

Run scripts directly without loading into context:

python scripts/calculate-kpi-metrics.py --data metrics.json --period monthly

References (Detailed Patterns)

  • references/kpi-card-patterns.md - KPI card design patterns and variations
  • references/layout-strategies.md - Grid systems and responsive approaches
  • references/real-time-updates.md - WebSocket, SSE, and polling implementations
  • references/filter-coordination.md - Cross-widget filter synchronization
  • references/performance-optimization.md - Advanced optimization techniques
  • references/library-guide.md - Detailed Tremor and react-grid-layout guides

Examples (Complete Implementations)

  • examples/sales-dashboard.tsx - Full sales analytics dashboard
  • examples/monitoring-dashboard.tsx - Real-time monitoring with alerts
  • examples/executive-dashboard.tsx - Polished executive reporting
  • examples/customizable-dashboard.tsx - Drag-and-drop with persistence
  • examples/tremor-dashboard.tsx - Quick Tremor implementation
  • examples/filter-context.tsx - Global filter coordination

Assets (Templates & Configurations)

  • assets/dashboard-templates.json - Pre-built dashboard layouts
  • assets/widget-library.json - Widget catalog and configurations
  • assets/grid-layouts.json - Responsive grid configurations
  • assets/kpi-formats.json - Number formatting rules
  • assets/theme-tokens.json - Dashboard-specific design tokens

Dashboard Creation Workflow

1. Define Requirements: Fixed or customizable? Real-time or static? 2. Choose Libraries: Tremor for quick, react-grid-layout for flexible 3. Set Up Structure: Global state, filter context, layout system 4. Build Widgets: KPI cards, charts (data-viz), tables (tables skill) 5. Implement Data Flow: Fetching strategy, caching, updates 6. Add Interactivity: Filters, drill-downs, exports 7. Optimize Performance: Lazy loading, parallel fetching, caching 8. Apply Theming: Use design-tokens for consistent styling 9. Test Responsiveness: Desktop, tablet, mobile breakpoints 10. Deploy & Monitor: Track performance, user engagement

For specific patterns and detailed implementations, explore the bundled resources referenced above.

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kleonxlnxImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

How it compares

Pick creating-dashboards over generic chart skills when you need full dashboard architecture with coordinated filters, KPI cards, and layout persistence rather than a single visualization component.

FAQ

Which libraries does it use?

Tremor for quick analytics dashboards and react-grid-layout for customizable drag-and-drop layouts.

How does it handle real-time updates?

It recommends server-sent events (EventSource) to stream widget updates into the dashboard.

Frontend Developmentfrontend
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.