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 d

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 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: For Customizable Dashboard → Use react grid layout Drag and drop, resizable widgets, user defined layouts: 2. Set Up Global State Management Implement filter context for cross widget coordination: 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) : 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 For complete implementation, see examples/tremor dashboard.tsx . Customizable Dashboard Implementation Drag and Drop Grid Layout 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: WebSocket (For Bidirectional) Use when dashboard needs to send commands back to server: Smart Polling Fallback For environments without WebSocket/SSE support: For detailed patterns including error handling and reconnection, see references/real time updates.md . Performance Optimization Lazy Loading Strategy Parallel Data Fetching Widget Level Caching To analyze and optimize dashboard performance, run: Cross Skill Integration Using Data Visualization Components Reference the data viz skill for chart widgets: Integrating Data Tables Reference the tables skill for data grids: Applying Design Tokens Use the design tokens skill for consistent theming: Filter Input Components Optionally use the forms skill for filter controls: 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: 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.

creating-dashboards