Dashboards

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

ContentAnalytics
bySamuelca63991,501 words

What is Dashboards?

What this skill does

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.

Who it's for

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.

Key workflows

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.

Common questions

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.

How to use in Metaflow

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.

Related skills

Technical Blog Writing

Technical blog post writing with structure, code examples, and developer audience conventions. Covers post types, code formatting, explanation depth, and developer-specific engagement patterns. Use for: engineering blogs, dev tutorials, technical writing, developer content, documentation posts. Triggers: technical blog, dev blog, engineering blog, technical writing, developer tutorial, tech post, code tutorial, programming blog, developer content, technical article, engineering post, coding tuto

View →

Social Media Content Engine

When the user wants help creating, scheduling, or optimizing social media content for LinkedIn, Twitter/X, Instagram, TikTok, Facebook, or other platforms. Also use when the user mentions 'LinkedIn post,' 'Twitter thread,' 'social media,' 'content calendar,' 'social scheduling,' 'engagement,' 'viral content,' 'what should I post,' 'repurpose this content,' 'tweet ideas,' 'LinkedIn carousel,' 'social media strategy,' or 'grow my following.' Use this for any social media content creation, repurpos

View →

ROI Analyzer

Use when preparing executive reports, evaluating investments, or calculating ROI/break-even/payback period. 30-minute analysis (87.5% time saving). Includes scenario analysis.

View →

UTM Builder

Generate UTM-tagged URLs for campaign tracking. Create consistent, organized tracking links for Google Analytics, HubSpot, and other analytics platforms. Supports bulk generation, naming conventions, and campaign documentation. Use when creating tracking links, campaign URLs, or organizing marketing attribution.

View →

Webinar To Content Multiplier

Convert webinar recordings into blog posts, social snippets, email series. Extract key quotes, statistics, and soundbites.

View →

Help Center Architecture

Detailed patterns for designing help center information architecture across common complexity scenarios: multi-product, multi-role, multilingual, and high-scale

View →