creating-dashboards

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. Activate this skill when: 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 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: Implement filter context for cross-widget coordination: 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 Server-Sent Events (Recommended for Dashboards) : Define breakpoints for different screen sizes: For complete implementation, see examples/tremor-dashboard.tsx . For full example with widget catalog, see examples/customizable-dashboard.tsx . Best for unidirectional...