dashboard-ia

name	Dashboard IA
description	CONSTRUIR paneles densos en información, escaneables y eficientes en tareas. Priorizar la visibilidad de datos y la eficiencia de tareas sobre la estética. Hacer cumplir la paginación de tablas, uso significativo del color y ubicación consistente de acciones. Prevenir baja densidad de datos, desplazamiento sin límites y navegación oculta. Activadores: "build (a|a) dashboard", "create (an|a) admin panel", "design (a|a) user portal".
category	ui-ux
version	3.0.0
last_updated	2026-06-28T00:00:00.000Z
stacks	["React 19.2","Vue 3","Next.js 16","Nuxt"]
triggers	[{"pattern":"(build|create|design) (a|an) dashboard","action":"USAR diseño de shell de panel"},{"pattern":"(build|create|design) (an|a) admin panel","action":"USAR diseño de shell de panel"},{"pattern":"data display|metrics|kpi","action":"USAR reglas de visualización de datos"}]
related_skills	["responsive-layout-math","empty-loading-error-states","accessibility-audit-protocol","saas-app-structure","component-architecture-patterns"]
lang	es
direction	ltr
source_version	3.0.0
translated_at	2026-06-29T00:00:00.000Z

Arquitectura de Información para Paneles

IDENTIFICAR: Cuándo activarse

Activar al construir cualquier interfaz donde los usuarios:

• Gestionan datos (CRUD a escala)
• Ven analíticas o métricas
• Configuran ajustes
• Monitorean el estado del sistema
• Administran otros usuarios

PRINCIPIO FUNDAMENTAL

Los paneles son herramientas de trabajo, no galerías de arte. Prioriza la visibilidad de datos y la eficiencia de tareas. Los usuarios vienen a hacer cosas.

DECIDIR: Selección de Diseño

SI el usuario necesita comparación de datos en múltiples columnas →
  USAR tabla (Paso 3)
SI el usuario necesita visión general de métricas de alto nivel →
  USAR fila de tarjetas KPI (Paso 4)
SI el usuario necesita análisis de tendencias →
  USAR gráfico simple (Paso 5)
SI el usuario gestiona registros (CRUD) →
  USAR tabla + botones de acción (Pasos 3 + 6)

EJECUTAR: Instrucciones

Paso 1: Shell del Panel

┌─────────────────────────────────────────────┐
│ ENCABEZADO: [Logo] Ruta > [Búsqueda]         │
├──────────┬──────────────────────────────────┤
│  NAV     │  ÁREA DE CONTENIDO                │
│  (max    │  ┌───────────────────────────┐   │
│  280px)  │  │ Título Pág + Acciones     │   │
│          │  ├───────────────────────────┤   │
│  Link 1  │  │ Área de Datos              │   │
│  Link 2  │  │ (tabla, tarjetas, gráfico) │   │
│  Link 3  │  │                           │   │
├──────────┴──────────────────────────────────┤
└─────────────────────────────────────────────┘

REGLAS:

• Nav: 20% del viewport, max 280px
• Contenido: 80% restante
• Encabezado: fijo, ruta de navegación + búsqueda + menú de usuario
• Móvil (<768px): nav colapsa a hamburguesa o pestañas inferiores

Paso 2: Diseño de Navegación

NAV PRINCIPAL:

• 5-8 elementos de nivel superior máximo. >8 = necesidad de grupos.
• Etiquetas estándar: "Panel", "Usuarios", "Pedidos", "Configuración", "Analíticas"
• Iconos opcionales pero SIEMPRE emparejados con texto (nunca solo icono en escritorio)
• Resaltar página actual

NAV SECUNDARIA:

• Ruta de navegación en la parte superior: Panel > Usuarios > Editar > Alice
• Barra de pestañas para subsecciones dentro de una página

BÚSQUEDA:

• Barra de búsqueda global en el encabezado
• Atajo de teclado: ⌘K o