Sidebar (240-280px) + main content area Main content: top bar (filters, date range, title) + grid of widgets Widget grid: CSS Grid with auto-fill, varied sizes
The Dashboards skill provides a structured layout for presenting key marketing metrics and data visualizations in a clear, accessible format. It features a sidebar (240-280px wide) alongside a main content area that includes a top bar with filters, date range selectors, and titles, plus a dynamic grid of widgets built with CSS Grid. This setup supports varied widget sizes, enabling flexible arrangements of KPI cards, charts, activity lists, and notifications within a maximum content width of 1440px.
This skill standardizes the presentation of performance data with consistent styling for KPI cards, chart containers, and data widgets, including color-coded trends and clear typography. It ensures smooth user experience with sticky filter bars, skeleton loaders for charts, and empty states when data is missing, all designed to help marketers quickly interpret and act on analytics.
This skill is ideal for performance marketers managing PPC campaigns who need to monitor KPIs like CTR, conversion rates, and spend daily. Growth leads coordinating cross-channel efforts can use it to consolidate diverse data sources into a single dashboard for strategic decision-making. Agencies building custom client reporting interfaces will find this layout useful for delivering clean, branded dashboards that highlight client-specific metrics and trends.
Practitioners first configure the sidebar navigation to host key filters or shortcuts relevant to their campaigns. Next, they set up the main content area’s top bar with date range controls and filtering options to enable quick timeframe comparisons. The core workflow centers on populating the widget grid with KPI cards reflecting current campaign performance, trend indicators, and supporting charts that visualize conversions, traffic sources, or audience segments. Finally, marketers add activity lists and notifications widgets to surface recent updates or anomalies, creating a comprehensive view of marketing health.
How customizable is the widget grid? The grid supports varied widget sizes using CSS Grid auto-fill, making it flexible for different data presentation needs. Can I use this layout for real-time data? Yes, it includes skeleton loaders and empty states to handle loading and no-data scenarios gracefully. Does the filter bar support multiple applied filters? Yes, it displays applied filter chips with easy removal and a clear-all option for efficient data slicing.
Attach the Dashboards skill to any agent task that requires a structured interface for data visualization and KPI tracking. Once enabled, expect a responsive layout with a collapsible sidebar, a sticky filter bar, and a grid that dynamically adjusts to your widgets’ size and content. This skill integrates seamlessly with data-driven workflows to surface actionable insights efficiently, making it a solid foundation for marketing analytics dashboards.
For broader context, see our roundup of claude marketing skills, and read common Claude Code content mistakes for related setup guidance.