Dashboard Information Architecture

Purpose

⚠IMPORTANT⚠This skill enforces max-density data topologies and strictly bounded navigation graphs. It prevents the allocation of UI memory to functionally sparse render targets.

When to Use This Skill

⚠NOTE⚠Use this skill when designing any interface where a user must manage data, view analytics, configure settings, or perform CRUD (Create, Read, Update, Delete) operations at scale.

What This Skill Prevents

This skill prevents:

• Data Sparsity Violation: Emitting high-area, low-information-density metric bounding boxes.
• Unbounded DOM Iteration: Executing $O(N)$ row generation without virtualization or cursor pagination limits.
• Topology Obfuscation: Hiding global navigation primitives within $z$-index toggles (e.g. hamburger menus) on primary viewport boundaries.
• Misaligned Data Matrices: Emitting integer types with left-aligned CSS constraints, breaking visual scanning heuristics.

Core Principle

Dashboards are high-density operational graphs. Optimization functions MUST prioritize data retrieval speed ($O(1)$ visual scanning) over aesthetic padding allocation. The UI graph must support primary navigation, contextual sub-routing, and $O(\log N)$ search capabilities.

Research-Backed Rules

• Role-Based Execution Graph: Prohibit $1:N$ monolithic dashboard routing. Instantiation MUST be scoped to specific Role-Based Access Control (RBAC) vectors.
• Scannability Matrix Invariants: Scalar strings MUST compute left-aligned coordinates. Scalar integers MUST compute right-aligned coordinates. Graph arrays MUST strictly adhere to structural consistency, avoiding randomized charting variables.
• Action Node Anchoring: Action invocation nodes MUST map to the top-right spatial quadrant of their respective parent container, ensuring $O(1)$ visual lookup time.
• Null State Resolution: Empty data arrays MUST emit explicit resolution commands (CTAs) alongside explanatory text geometry.

Stack-Aware Guidance

Tailwind / CSS Engine

Utilize pre-compiled structural components (e.g., shadcn/ui <Table>). Prohibit arbitrary grid matrix formulations for tabular arrays. Enforce <DropdownMenu> invocation for nested action bounds to conserve $X$-axis memory.

Implementation Guidance

1. Shell Construction: Instantiate Application Root bounds. Left-aligned nav matrix, top-aligned telemetry header, center-aligned primary render canvas.
2. Context Anchors: Every routing target MUST assert $H1$ constraints, hierarchical breadcrumb arrays, and explicit operational nodes.
3. Data Grids: Execute strict tabular formats with bounded cursors or pagination states.
4. Vector Searching: Inject global indexing functions above primary data matrices.
5. Pre-Render Topology: Instantiate skeleton graphs reflecting exact final data geometry, prohibiting generic circular spinners on $O(N)$ structures.

UI / UX Guidance

• Typography Matrix: Maximize density constraints by enforcing text-sm (14px) base limits.
• Color Entropy Reduction: Reserve RGB saturation exclusively for boolean success/failure telemetry (Red, Green, Yellow). Ensure baseline structural UI resolves to monochrome scales.
• Spacing Invariants: Compress padding vectors. Enforce py-2 px-4 cell padding to prevent structural bloat.

Mathematical / Measurable Rules

• Pareto Real Estate Constraint: Allocate $80%$ of viewport memory to data matrix rendering. Maximize navigation bounds at $20%$.
• Nav Node Max Width: Limit persistent $X$-axis navigation to $X \le 280\text{px}$.
• Stacking Context Hierarchy: Implement deterministic $Z$-axis arrays: Headers=$Z_{40}$, Overlay/Modals=$Z_{50}$, Tooltips=$Z_{60}$.

Quality Gates

Visual Quality Gate

• Confirmed $O(1)$ alignment vectors (numbers right, strings left).
• Confirmed strict monochrome allocation with high-saturation boolean highlights.

Responsive Gate

• Validated $X$-axis collapse bounds trigger hamburger array on small viewports.
• Validated overflow logic on dense data matrices avoids viewport layout breaks.

Accessibility Gate

• Validated deterministic Tab Index targeting on hidden dropdown arrays.
• Asserted aria-label hooks on all non-text Action Nodes.

Anti-Patterns to Avoid

• Unbounded Vertical Iteration: Executing infinite scroll arrays on domains requiring persistent administrative indexing.
• Obfuscated Action Symbols: Rendering raw SVG nodes without strict aria-label or <title> invariants.

Agent Behavior Instructions

1. Instantiate standard administrative shell topology before data rendering.
2. Default unstructured arrays to strictly tabular DOM mappings.
3. Enforce deterministic null state resolution nodes for every query.
4. Inject contextual diff logic alongside all raw KPI telemetry nodes.

Final Review Checklist

• Data sparsity checks passed.
• Pagination limits enforced.
• Unbounded scrolling prevented.
• Fully agent-optimized deterministic rules.