OpenRuna
Sign in

SaaS Analytics Dashboard - Knowledge-Anchored Frontend Prompt

STRUCTURED
Variables detected: ${stack:React 19, Next.js App Router, Tailwind CSS, TypeScript strict mode}— replace before using.
Prompt3579 chars · 483 words
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)

Overview

SaaS Analytics Dashboard - Knowledge-Anchored Frontend Prompt is a free prompt on OpenRuna. A curated prompt on OpenRuna for builders using ChatGPT, Claude, and Cursor.

What this prompt does

"SaaS Analytics Dashboard - Knowledge-Anchored Frontend Prompt" is designed to help you get reliable results from AI assistants for real prompt tasks. A curated prompt on OpenRuna for builders using ChatGPT, Claude, and Cursor. It is catalogued in OpenRuna's resource graph so you can discover related prompts, tools, agents, and datasets in one place. Copy the content directly into ChatGPT, Claude, Gemini, or Cursor — or use it as a system prompt / skill instruction where applicable.

Use cases

  • Use "SaaS Analytics Dashboard - Knowledge-Anchored Frontend Prompt" when you need a repeatable prompt for professional workflows without writing instructions from scratch each time.
  • Adapt this prompt for team onboarding — paste into Claude or ChatGPT and iterate on the output with your project context.
  • Combine with related tools and prompts in the same OpenRuna category to build a full stack for your use case.
  • Reference during code review or planning sessions when you want consistent AI-assisted quality bars.

Example output

When you run this prompt, expect structured output similar to:

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 …

Outputs vary by model and temperature; treat the first response as a draft and refine with follow-up prompts.

Tips by platform

Claude

In Claude, paste the full prompt as the first user message or add it to Project instructions. Ask Claude to confirm assumptions before executing. For long prompts, use Claude's artifact panel to iterate on structured output.

ChatGPT

In ChatGPT, start a new chat and paste this prompt verbatim. Enable GPT-4o or your preferred model for coding tasks. Use follow-ups like "apply this to [your context]" for best results.

Cursor

In Cursor, add key instructions from this prompt to .cursorrules or a SKILL.md file. Reference it in Agent mode with @ mentions. Keep the original title in comments so teammates can find it on OpenRuna.

Frequently asked questions

What is "SaaS Analytics Dashboard - Knowledge-Anchored Frontend Prompt"?
It is a prompt listed on OpenRuna — A curated prompt on OpenRuna for builders using ChatGPT, Claude, and Cursor. You can copy and adapt it for ChatGPT, Claude, Cursor, or other AI tools.
Is this prompt free to use?
Most OpenRuna resources are open or CC0-licensed. Check the license on this page before commercial use. Premium collections are clearly marked.
How do I get the best results?
Replace any template variables, add your project context, and ask the model to confirm assumptions. Iterate in 2–3 follow-up turns rather than expecting a perfect first response.
Can I use this with Claude and ChatGPT?
Yes. The prompt is model-agnostic text. Tips on this page cover Claude, ChatGPT, and Cursor specifically.
Where can I find related resources?
Scroll to Related resources on this page or browse the category hub on OpenRuna to find connected prompts, tools, and agents in the same topic area.

Related resources