dashboard-patterns

Codify real-time dashboard patterns for NodeJS-Starter-V1 with Supabase Realtime and spectral colours.

1|Updated Sep 14, 2025
One-click install
npx skills add https://github.com/CleanExpo/DR-NRPG --skill dashboard-patterns-cleanexpo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dashboard-patterns
Source: https://github.com/CleanExpo/DR-NRPG/tree/main/.skills/custom/dashboard-patterns
Command: npx skills add https://github.com/CleanExpo/DR-NRPG --skill dashboard-patterns-cleanexpo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework and set of components for building real-time, data-rich dashboards that adhere to strict design principles and functional requirements.

Core Features & Use Cases

  • Real-time Data Visualisation: Integrates Supabase Realtime and polling for live data updates.
  • Scientific Luxury Design: Enforces a specific aesthetic with spectral colours, timeline layouts, and physics-based animations.
  • Component Library: Offers pre-built components like MetricTile, DataStrip, and AgentNode for consistent UI.
  • Use Case: Develop a new monitoring dashboard for agent performance, ensuring all data is displayed in real-time using spectral colours and a timeline layout, with clear loading and empty states.

Quick Start

Apply the dashboard-patterns skill to create a new agent performance monitoring dashboard.

Frequently Asked Questions about dashboard-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a real-time dashboard with Supabase Realtime integration?

To build a real-time dashboard with Supabase Realtime, you need a framework that handles live data updates via polling and websockets. This Skill provides pre-built components and Supabase Realtime integration to stream live data directly to UI visualisation surfaces.

What UI components do I need for a data-rich monitoring dashboard?

Essential UI components for a data-rich monitoring dashboard include MetricTile, DataStrip, and AgentNode. These pre-built elements ensure consistent rendering of real-time metrics, loading states, and empty states across all data visualisation surfaces.

How do I enforce a consistent design system across data visualisation surfaces?

Enforcing a consistent design system across data visualisation surfaces requires codified rules for spectral colour mapping, timeline layouts, and physics-based animations. This approach ensures all dashboard components adhere to strict Scientific Luxury design principles.

Can I use NodeJS-Starter-V1 for building agent performance monitoring dashboards?

Yes, you can use NodeJS-Starter-V1 for building agent performance monitoring dashboards. This Skill codifies real-time dashboard patterns specifically for NodeJS-Starter-V1, offering pre-built layouts and components suited for tracking agent metrics.

Does this dashboard framework support locale-specific data formatting?

Yes, this dashboard framework supports locale-specific data formatting by enforcing Australian locale rules across all data visualisation surfaces. This ensures numbers, dates, and times display correctly for the target region.

What is the best way to structure a real-time dashboard layout using timeline and orbital patterns?

The best way to structure a real-time dashboard layout using timeline and orbital patterns is to enforce timeline layouts with physics-based animations. This creates a structured, chronological data visualisation flow for live monitoring metrics.