developer coding template risk: low

React SaaS Metrics Dashboard Generator

Instructs the model to generate a React Server Component-based dashboard for a multi-tenant SaaS application displaying user metrics, revenue, and usage statistics. Outputs include…

PROMPT

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)

INPUTS

stack REQUIRED

Technology stack including React version, framework, CSS, and TypeScript mode

e.g. React 19, Next.js App Router, Tailwind CSS, TypeScript strict mode

ROLES & RULES

Role assignments

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.

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.
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)
Do not use pie charts for comparing metric values across categories
Do not exceed 7 metrics per visible group without progressive disclosure
Provide skeleton loading states matching final layout dimensions to prevent CLS
Include keyboard-navigable chart tooltips with aria-live regions

EXPECTED OUTPUT

Format

structured_report

Schema

bullet_list · 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

Constraints

Component tree diagram
TypeScript interfaces for DashboardProps, MetricGroup, KPICard
Main dashboard page component as React Server Component with async data fetch
Reusable metric group component
Responsive Tailwind layout: 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

CAVEATS

Missing context

Specific metrics lists for each category (e.g., exact user metrics)
Data source details (e.g., API endpoints for async fetches)

QUALITY

OVERALL: 0.92
CLARITY: 0.95
SPECIFICITY: 0.98
REUSABILITY: 0.85
COMPLETENESS: 0.95

IMPROVEMENT SUGGESTIONS

Parameterize the 'scope' metrics as a YAML list or JSON placeholder for easier reuse across products.
Add example data payloads to 'knowledge_anchors' or context for consistent TypeScript interfaces.
Explicitly define time range options and default filter state in constraints.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.