Metrics Dashboard Builder
VerifiedBuild operational metrics dashboards with Grafana, Prometheus, or Recharts displaying real-time KPIs, time-series charts, and configurable alerts.
Install
Claude Code
Copy the SKILL.md file to .claude/skills/metrics-dashboard.md About This Skill
Metrics Dashboard Builder generates dashboard configurations and React components for monitoring business and operational metrics.
Grafana Dashboards
Generates Grafana JSON dashboard definitions with: time-series panels for RED metrics (Rate, Errors, Duration), stat panels for current value + trend, histogram panels for latency percentile distribution, and table panels for top-N rankings. Pre-built panels for common data sources: Prometheus, Loki, CloudWatch, and PostgreSQL.
Prometheus Stack
Prometheus `prometheus.yml` scrape config, alerting rules (YAML) for SLO breach detection, and Alertmanager routing to Slack, PagerDuty, or email. Recording rules for pre-aggregating expensive queries.
React Dashboards
Recharts-based dashboard components with: `<LineChart>` for time-series, `<BarChart>` for categorical comparisons, `<PieChart>` for composition, `<ScatterChart>` for correlation. Real-time updates via SWR polling or WebSocket subscription. Dark/light mode via CSS custom properties.
Metric Design
Helps define meaningful metrics following DORA (deployment frequency, lead time, MTTR, change failure rate) or SRE four golden signals (latency, traffic, errors, saturation).
Alert Fatigue Prevention
Alert rule design guidance: alert on symptoms not causes, appropriate thresholds with time-window evaluation, runbook URL in every alert annotation, and severity routing (critical → page, warning → ticket).
Use Cases
- Building a Grafana dashboard for API latency, error rate, and throughput (RED metrics)
- Creating a business KPI dashboard with revenue, churn, and activation metrics using Recharts
- Setting up Prometheus alert rules for SLA breach detection with PagerDuty routing
- Designing a real-time operational dashboard with WebSocket-pushed metric updates
Pros & Cons
Pros
- + Pre-built RED and golden signals panels work immediately with Prometheus
- + Alert design guidance prevents the alert fatigue that makes monitoring useless
- + React dashboards support real-time WebSocket updates for live operational views
- + DORA/SRE metric frameworks ensure you measure what matters
Cons
- - Grafana JSON dashboard format changes between major versions require migration
- - Real-time WebSocket dashboards require persistent server connections and scaling considerations
Related AI Tools
Claude Code
Paid
Anthropic's agentic CLI for autonomous terminal-native coding workflows
- Terminal-native autonomous coding agent
- Full file system and shell access for multi-step tasks
- Deep codebase understanding via repository indexing
Cursor
Freemium
AI-native code editor with deep multi-model integration and agentic coding
- AI-native Cmd+K inline editing and generation
- Composer Agent for autonomous multi-file changes
- Full codebase indexing and context awareness
GitHub Copilot
Freemium
AI pair programmer that suggests code in real time across your IDE
- Real-time code completions across 30+ languages
- Copilot Chat for natural language code Q&A
- Pull request description and summary generation
Related Skills
Monitoring Setup
CautionConfigures observability stacks including Prometheus, Grafana, Alertmanager, and OpenTelemetry with dashboards, alerts, and SLO definitions.
Visualization Builder
CautionGenerates data visualizations, charts, and dashboards using Python (matplotlib, plotly, seaborn), JavaScript (D3, Chart.js), and BI tool configurations.
Stay Updated on Agent Skills
Get weekly curated skills + safety alerts
每周精选 Skills + 安全预警