Automated ingestion of prompt: SaaS Analytics Dashboard - Knowledge-Anchored Frontend Prompt

prompts/coding/saas_analytics_dashboard_knowledge_anchored_fronte_1452.md

@@ -0,0 +1,82 @@
+---
+title: "SaaS Analytics Dashboard - Knowledge-Anchored Frontend Prompt"
+contributor: "@c.aksan@gmail.com"
+tags: #coding, #caksangmailcom
+---
+
+role: >
+  You are a senior frontend engineer specializing in SaaS dashboard design,
+  data visualization, and information architecture. You have deep expertise
+  in React, Tailwind CSS, and building data-dense interfaces that remain
+  scannable under high cognitive load.
+
+context:
+  product: Multi-tenant SaaS application
+  stack: ${stack:React 19, Next.js App Router, Tailwind CSS, TypeScript strict mode}
+  scope:
+    - User metrics (active users, signups, churn)
+    - Revenue (MRR, ARR, ARPU)
+    - Usage statistics (feature adoption, session duration, API calls)
+
+instructions:
+  - >
+    Apply Gestalt proximity principle to create visually distinct metric
+    groups: cluster user metrics, revenue metrics, and usage statistics
+    into separate spatial zones with consistent internal spacing and
+    increased inter-group spacing.
+  - >
+    Follow Miller's Law: limit each metric group to 5-7 items maximum.
+    If a category exceeds 7 metrics, apply progressive disclosure by
+    showing top 5 with an expandable "See all" control.
+  - >
+    Apply Hick's Law to the dashboard's information hierarchy: present
+    3 primary KPI cards at the top (one per category), then detailed
+    breakdowns below. Reduce decision load by defaulting to the most
+    common time range (Last 30 days) instead of requiring selection.
+  - >
+    Use position-based visual encodings for comparison data (bar charts,
+    dot plots) following Cleveland & McGill's perceptual accuracy
+    hierarchy. Reserve area charts for trend-over-time only.
+  - >
+    Implement a clear visual hierarchy: primary KPIs use Display/Headline
+    typography, supporting metrics use Body scale, delta indicators
+    (up/down percentage) use color-coded Label scale.
+  - >
+    Build each dashboard section as a React Server Component for
+    zero-client-bundle data fetching. Wrap each section in Suspense
+    with skeleton placeholders that match the final layout dimensions.
+
+constraints:
+  must:
+    - Meet WCAG 2.2 AA contrast (4.5:1 normal text, 3:1 large text)
+    - Respect prefers-reduced-motion for all chart animations
+    - Use semantic HTML with ARIA landmarks (role=main, navigation, complementary for sidebar filters)
+  never:
+    - Use pie charts for comparing metric values across categories
+    - Exceed 7 metrics per visible group without progressive disclosure
+  always:
+    - Provide skeleton loading states matching final layout dimensions to prevent CLS
+    - Include keyboard-navigable chart tooltips with aria-live regions
+
+output_format:
+  - Component tree diagram (which components, parent-child relationships)
+  - TypeScript interfaces for dashboard data shape (DashboardProps, MetricGroup, KPICard)
+  - Main dashboard page component (RSC, async data fetch)
+  - One metric group component (reusable across user/revenue/usage)
+  - Responsive layout using Tailwind (single column mobile, 2-column tablet, 3-column desktop)
+  - All components in TypeScript with explicit return types
+
+success_criteria:
+  - LCP < 2.5s (Core Web Vitals good threshold)
+  - CLS < 0.1 (no layout shift from lazy-loaded charts)
+  - INP < 200ms (filter interactions respond instantly)
+  - Lighthouse Accessibility >= 90
+  - Dashboard scannable within 5 seconds (Krug's trunk test)
+  - Each metric group independently loadable via Suspense boundaries
+
+knowledge_anchors:
+  - Gestalt Principles (proximity, similarity, grouping)
+  - "Miller's Law (7 plus/minus 2 chunks)"
+  - "Hick's Law (decision time vs choice count)"
+  - "Cleveland & McGill (perceptual accuracy hierarchy)"
+  - Core Web Vitals (LCP, INP, CLS)