cloud-cost-dashboard-ux

Implements UX design patterns for cloud cost dashboards and daily telemetry explorers.

Updated Jul 7, 2026
One-click install
npx skills add https://github.com/ricardolui/gcp-custom-agent-skills --skill cloud-cost-dashboard-ux-ricardolui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cloud-cost-dashboard-ux
Source: https://github.com/ricardolui/gcp-custom-agent-skills/tree/main/cloud-cost-dashboard-ux
Command: npx skills add https://github.com/ricardolui/gcp-custom-agent-skills --skill cloud-cost-dashboard-ux-ricardolui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Cloud billing data from platforms like GCP BigQuery exports and AWS Cost & Usage Reports arrives asynchronously, so dashboards that default to today's date display incomplete, misleading cost data that confuses users and triggers false alerts. ## Core Features & Use Cases - Default to Yesterday Pattern: Date selectors default to the previous day (index 1) to avoid partial current-day telemetry, with visual badges marking incomplete data. - Cost Change Sorting: Sorts change lists by absolute dollar delta descending so unexpected spend spikes surface immediately. - Client-Side Filtering: Pre-serializes daily service and SKU data as JSON in the page for instant search-as-you-type filtering without database round-trips. - Use Case: When building a daily GCP cost explorer, apply these patterns to default the date picker to yesterday, sort services by cost delta, and color-code increases and decreases with accessible material hues. ## Quick Start Apply these UX patterns to build a cloud cost dashboard that defaults its date selector to yesterday and sorts services by absolute cost change.

Frequently Asked Questions about cloud-cost-dashboard-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I avoid showing incomplete data in a cloud cost dashboard?

Default the date selector to yesterday (index 1 in a reverse-chronological list) instead of today, since billing data from GCP BigQuery exports or AWS CUR lags by 4 to 24 hours. If current-day data is selectable, mark it with a badge like (Partial Data).

How should I sort cost changes in a spending dashboard?

Sort change lists by the absolute dollar delta, Math.abs(current - prior), in descending order. This surfaces both unexpected spend spikes and large savings drops at the top, rather than sorting alphabetically or by total cost.

Why does my cloud billing dashboard show a cost drop today?

Cloud billing data is digested asynchronously, so the current day's data is partial or lagging by 4 to 24 hours. The apparent drop is an artifact of incomplete telemetry, not an actual spending decrease.

Should cost dashboard filtering query the database on every keystroke?

No. Pre-serialize granular daily service and SKU data as JSON maps inside the rendered HTML page, then handle search-as-you-type, sorting, and project filtering client-side. This avoids 1-3 second database latency and extra API costs.

What colors should I use for cost increase and decrease indicators?

Use soft material hues instead of plain primary colors: soft red like #c5221f with an indicator such as ▲ +$50.00 for increases, and soft green like #137333 with ▼ -$25.00 for decreases. This keeps an accessible, professional enterprise aesthetic.