data-dashboard-intelligence
Data Dashboard Intelligence
This skill teaches you how to turn normalized event data into dashboards that look and feel premium — not generic template outputs. It works on field semantics (what the data looks like), not platform names (where it came from). By the time you use this skill, platform skills have already normalized fields into universal types like status, duration_ms, cost, and timestamp.
The core idea is simple: every field in a dataset has a shape (numeric, categorical, temporal, textual) and a semantic (it measures time, money, status, identity, etc.). The shape tells you which component to use. The semantic tells you how to aggregate it and what to call it. Together, they produce a dashboard that tells a story instead of just displaying numbers.
1. Field-to-Component Mapping
When you see a field from getEventSamples or analyzeSchema, pick the right component based on what the field is, not what it's named.
| Field Shape | How to Detect | Component | Why This Works |
|---|---|---|---|
| ID (unique, high cardinality) | uniqueValues / totalRows > 0.9 |
MetricCard (count) |
IDs exist to be counted — "Total Executions" |
| Status (categorical, 2–8 values) | String, uniqueValues 2–8 |
PieChart / DonutChart | People intuitively read status distributions as pie slices |
| Binary (exactly 2 values) | uniqueValues === 2, one is positive |
MetricCard (percentage) |
Success/fail is best shown as "94% Success Rate" |
| Timestamp (datetime) | Parseable as date, sequential | TimeseriesChart | Trends over time need a time axis |
| Duration (numeric, positive) | Name contains duration, time, elapsed, ms |
MetricCard (average) |
Average duration is more useful than total |
| Money (numeric, currency-like) | Name contains cost, amount, price, spend |
MetricCard (sum) + trend |
You sum money — "Total Spend: $4,200" |
| Rate (numeric, 0–100 or 0–1) | Name contains rate, ratio, percent, score |
MetricCard (average) |
Rates are averaged or shown as latest |
| Label (medium cardinality, 3–50 values) | String, uniqueValues 3–50 |
BarChart | Bar charts handle medium-cardinality breakdowns well |
| High-cardinality text (>50 values) | String, uniqueValues > 50 |
DataTable column | Too many values for any chart — show in table |
| Long text (avg length > 100 chars) | String, avg(length) > 100 |
DataTable column (truncated) | Transcripts, error messages — table only |
| Override rules (these exist because edge cases produce ugly charts): |
- Timestamp with < 5 distinct dates → MetricCard fallback (sparse timeseries look broken)
More from gracebotly/flowetic-app
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
68vapi
Mapping guidance for Vapi voice AI events. Covers call metrics, assistant performance, cost tracking, and transcript handling. Use for any Vapi-connected dashboard generation or editing task.
62retell
Mapping guidance for Retell AI voice agent events. Covers call metrics, agent performance, disconnect reasons, and conversation analytics.
45todo
Planning and progress tracking skill for agent's internal reasoning. Use when an agent needs to create, track, and complete tasks across its own multi-step operations and maintain state persistence.
25n8n
Dashboard-first journey guidance for n8n. Use when a user connected n8n and wants a Workflow Activity Dashboard (default) with auto-mapping and live preview, and optionally to turn a workflow into a product.
23make
Mapping guidance for Make.com (Integromat) scenario events. Covers execution metrics, scenario performance, operation counts, and module analytics.
22