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.

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

01Enforces a 'Pyramid' layout structure for optimal information hierarchy

02Applies professional color schemes and threshold standards for error and health states

03Organizes panels using thematic emoji prefixes for improved navigation and readability

04Validates and extracts DataSource UIDs to ensure data consistency across panels

05Configures advanced visualization settings including smooth curves, gradients, and background fill modes

061 GitHub stars

Use Cases

01Building a new comprehensive service health dashboard from scratch

02Setting up complex visualizations like stacked area charts and threshold-marked gauges with optimal defaults

03Refactoring messy or legacy Grafana dashboards into standardized, professional layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add taptap/claude-plugins-marketplace grafana-dashboard-design

For use in Claude.ai and ChatGPT

Key Features

01Enforces a 'Pyramid' layout structure for optimal information hierarchy

02Applies professional color schemes and threshold standards for error and health states

03Organizes panels using thematic emoji prefixes for improved navigation and readability

04Validates and extracts DataSource UIDs to ensure data consistency across panels

05Configures advanced visualization settings including smooth curves, gradients, and background fill modes

061 GitHub stars

Use Cases

01Building a new comprehensive service health dashboard from scratch

02Setting up complex visualizations like stacked area charts and threshold-marked gauges with optimal defaults

03Refactoring messy or legacy Grafana dashboards into standardized, professional layouts