Does it support advanced styling like gradients and smooth curves?

Absolutely. The skill automatically applies best-practice configurations such as smooth line interpolation, 20% fill opacity with gradients, and background color modes for stat panels.

What layout principles does the skill follow?

It follows a 'Pyramid' structure: Row 1 for Global Health (Stats), Row 2 for Core Metrics (Gauges/TimeSeries), and subsequent rows for modular details and raw data tables.

How does this skill improve existing Grafana dashboards?

The skill uses the get_dashboard_by_uid function to analyze your current configuration, extract existing data sources, and suggest a structural refactor based on professional design principles.

Can I use it with any data source?

Yes, while it has optimized workflows for Prometheus and Cloudflare Analysis, it is designed to prompt for and integrate with any data source supported by your Grafana instance.

Grafana Dashboard Designer

Name: Grafana Dashboard Designer
Author: taptap

bytaptap

•

Analytics & Monitoring

Generates and optimizes professional Grafana monitoring dashboards using standardized design systems and visualization best practices.

About

The Grafana Dashboard Designer skill transforms raw monitoring requirements into high-quality, visually striking observability interfaces. It enforces a strict 'Pyramid' layout hierarchy—moving from global health stats to granular details—while ensuring technical consistency by verifying data sources like Prometheus or Cloudflare. By utilizing standardized color palettes for thresholds, thematic emoji row naming, and advanced panel configurations like smooth gradients and area fills, this skill helps developers build dashboards that are not only functional but also intuitive and production-ready.

Key Features

Enforces a 'Pyramid' layout structure for optimal information hierarchy
Applies professional color schemes and threshold standards for error and health states
Organizes panels using thematic emoji prefixes for improved navigation and readability
Validates and extracts DataSource UIDs to ensure data consistency across panels
Configures advanced visualization settings including smooth curves, gradients, and background fill modes
1 GitHub stars

Use Cases

Building a new comprehensive service health dashboard from scratch
Setting up complex visualizations like stacked area charts and threshold-marked gauges with optimal defaults
Refactoring messy or legacy Grafana dashboards into standardized, professional layouts

About

Key Features

Enforces a 'Pyramid' layout structure for optimal information hierarchy
Applies professional color schemes and threshold standards for error and health states
Organizes panels using thematic emoji prefixes for improved navigation and readability
Validates and extracts DataSource UIDs to ensure data consistency across panels
Configures advanced visualization settings including smooth curves, gradients, and background fill modes
1 GitHub stars

Use Cases

Building a new comprehensive service health dashboard from scratch
Setting up complex visualizations like stacked area charts and threshold-marked gauges with optimal defaults
Refactoring messy or legacy Grafana dashboards into standardized, professional layouts