SaaS Analytics Dashboard - Knowledge-Anchored Frontend Prompt

Improved prompt:

You are a senior frontend engineer tasked with designing a high-performance, data-dense dashboard for a multi-tenant SaaS application. The dashboard must balance information density with scannability, adhering to cognitive psychology principles while optimizing for Core Web Vitals.

Role and Expertise:
You specialize in SaaS dashboard design, data visualization, and information architecture, with deep expertise in React, Next.js App Router, Tailwind CSS, and TypeScript in strict mode. You excel at building interfaces that remain scannable under high cognitive load.

Product and Stack:
Product: Multi-tenant SaaS application
Stack: React 19, Next.js App Router, Tailwind CSS with custom variants, TypeScript strict mode

Dashboard Scope and Metrics:
The dashboard will include the following metric categories:

• User metrics: Active users, signups, churn
• Revenue metrics: Monthly Recurring Revenue (MRR), Annual Recurring Revenue (ARR), Average Revenue Per User (ARPU)
• Usage statistics: Feature adoption, session duration, API calls

Design Principles and Best Practices:

1. Gestalt Proximity Principle: Create visually distinct metric groups by clustering user metrics, revenue metrics, and usage statistics into separate spatial zones with consistent internal spacing and increased inter-group spacing.

2. Miller's Law: Limit each metric group to 5-7 items maximum. If a category exceeds 7 metrics, apply progressive disclosure by showing the top 5 with an expandable "See all" control to minimize cognitive overload.

3. Hick's Law: Optimize the dashboard's information hierarchy by presenting 3 primary KPI cards at the top (one per category), followed by detailed breakdowns below. Reduce decision load by defaulting to the most common time range (Last 30 days) to eliminate unnecessary selection.

4. Perceptual Accuracy Hierarchy: Apply position-based visual encodings (bar charts, dot plots) for comparison data according to Cleveland & McGill's hierarchy, reserving area charts for trend-over-time data only to ensure accurate perception.

5. Visual Hierarchy: Establish a clear visual hierarchy where primary KPIs use Display/Headline typography, supporting metrics use Body scale, and delta indicators (up/down percentage) use color-coded Label scale to guide the user's focus.

Technical Implementation Guidelines:

• Build each dashboard section as a React Server Component (RSC) for zero-client-bundle data fetching to optimize initial page load.
• Wrap each section in Suspense with skeleton placeholders that match the final layout dimensions to prevent layout shift and provide a consistent user experience during data loading.

Constraints and Accessibility Considerations:

• Must meet WCAG 2.2 AA contrast requirements (4.5:1 normal text, 3:1 large text) to ensure accessibility for users with visual impairments.
• Respect the prefers-reduced-motion media query for all chart animations to accommodate users with motion sensitivity or preferences.
• Use semantic HTML with ARIA landmarks (role=main, navigation, complementary) to provide proper structure and support keyboard navigation.

Output Format and Success Criteria:

• Provide a component tree diagram illustrating the parent-child relationships between the main dashboard page component and the reusable metric group component.
• Define TypeScript interfaces for the dashboard data shape, including the structure for DashboardProps, MetricGroup, and KPICard.
• Generate the main dashboard page component as a React Server Component (RSC) with async data fetching.
• Create a reusable metric group component that can be applied across user, revenue, and usage categories.
• Implement a responsive layout using Tailwind CSS that adapts to different screen sizes, with a single column for mobile, two columns for tablet, and three columns for desktop.

Performance and Accessibility Metrics:
The dashboard must meet the following performance and accessibility thresholds:

• Largest Contentful Paint (LCP): < 2.5 seconds
• Cumulative Layout Shift (CLS): < 0.1
• Interactive (INP): < 200ms
• Lighthouse Accessibility score: >= 90

The dashboard should be scannable within 5 seconds, adhering to Jakob Nielsen's Trunk Test, and each metric group should be independently loadable via Suspense boundaries to minimize layout shifts and optimize performance.

Deliverables:

• Component tree diagram
• TypeScript interfaces for dashboard data shape
• Main dashboard page component (RSC, async data fetch)
• Reusable metric group component
• Responsive layout components using Tailwind CSS
• All components with explicit return types and TypeScript definitions

Knowledge Anchors:

• Gestalt Principles (proximity, similarity, grouping)
• Miller's Law: "The Magical Number Seven, Plus or Minus Two"
• Hick's Law: Time to make a decision increases with the number of options
• Cleveland & McGill's perceptual accuracy hierarchy for visual encodings
• Core Web Vitals (LCP, INP, CLS) performance metrics
• Accessibility standards (WCAG 2.2, ARIA landmarks)

Please provide the complete solution, including the components, data interfaces, and the main dashboard page implementation, adhering to the specified output format and success criteria.