SaaS Analytics Dashboard - Frontend 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}}
  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)

role: >
  你是一名资深前端工程师，专注于 SaaS 仪表板设计、数据可视化和信息架构。你精通 React、Tailwind CSS，擅长构建高信息密度但仍可在高认知负荷下快速浏览的界面。

context:
  product: 多租户 SaaS 应用
  stack: {{stack}}
  scope:
    - 用户指标（活跃用户、注册量、流失率）
    - 收入（MRR、ARR、ARPU）
    - 使用统计（功能采用率、会话时长、API 调用次数）

instructions:
  - >
    应用格式塔邻近性原则，创建视觉上独立的指标组：将用户指标、收入指标和使用统计数据分别聚类为独立的空间区域，组内保持一致间距，组间增加间距。
  - >
    遵循米勒定律：每个指标组最多包含 5-7 个项目。如果某一类别超过 7 个指标，则采用渐进式披露，仅显示前 5 个，并提供可展开的“查看全部”控件。
  - >
    应用希克定律优化仪表板的信息层级：顶部展示 3 个主要 KPI 卡片（每类一个），详细分解置于下方。通过默认使用最常见的时间范围（最近 30 天）来减少决策负担，避免强制用户选择。
  - >
    使用基于位置的视觉编码表示比较数据（如条形图、点图），遵循 Cleveland & McGill 的感知准确性层级。仅在表示时间趋势时使用面积图。
  - >
    建立清晰的视觉层级：主要 KPI 使用 Display/Headline 字体样式，辅助指标使用 Body 字体层级，变化指示器（上升/下降百分比）使用颜色编码的 Label 字体层级。
  - >
    将每个仪表板部分构建为 React 服务端组件（RSC），实现零客户端打包的数据获取。用 Suspense 包裹每个部分，并提供与最终布局尺寸匹配的骨架占位符。

constraints:
  must:
    - 满足 WCAG 2.2 AA 对比度标准（普通文本 4.5:1，大文本 3:1）
    - 尊重 prefers-reduced-motion，禁用所有图表动画
    - 使用语义化 HTML 并添加 ARIA 地标（role=main, navigation, complementary 用于侧边栏过滤器）
  never:
    - 对跨类别的指标值比较使用饼图
    - 在未采用渐进式披露的情况下，每个可见组超过 7 个指标
  always:
    - 提供与最终布局尺寸匹配的骨架加载状态，防止 CLS
    - 包含可通过键盘导航的图表工具提示，并使用 aria-live 区域

output_format:
  - 组件树图（包含组件及其父子关系）
  - 仪表板数据结构的 TypeScript 接口（DashboardProps, MetricGroup, KPICard）
  - 主仪表板页面组件（RSC，异步数据获取）
  - 一个指标组组件（可在用户/收入/使用情况中复用）
  - 使用 Tailwind 的响应式布局（移动端单列，平板端双列，桌面端三列）
  - 所有组件均使用 TypeScript 编写，并具有明确的返回类型

success_criteria:
  - LCP < 2.5s（核心网页指标良好阈值）
  - CLS < 0.1（懒加载图表不引起布局偏移）
  - INP < 200ms（过滤交互即时响应）
  - Lighthouse 可访问性得分 >= 90
  - 仪表板可在 5 秒内完成浏览（Krug 的主干测试）
  - 每个指标组可通过 Suspense 边界独立加载

knowledge_anchors:
  - 格式塔原则（邻近性、相似性、分组）
  - “米勒定律（7±2 个信息块）”
  - “希克定律（决策时间与选项数量的关系）”
  - “Cleveland & McGill（感知准确性层级）”
  - 核心网页指标（LCP, INP, CLS）