Skill de Dashboard
Genera una pantalla única de administración / analíticas.
Flujo de trabajo
- Lee el DESIGN.md activo (inyectado arriba). Los colores, tipografía, espaciado y estilos de componentes provienen de él. No inventes nuevos tokens.
- Clasifica lo que monitorea el dashboard (ventas, tráfico, uso, incidencias, operaciones, etc.) a partir del brief. Genera nombres y valores de métricas específicos y verosímiles — nada de marcadores genéricos "Métrica A / Métrica B".
- Distribuye las regiones requeridas:
- Barra lateral izquierda (220–260px): marca en la parte superior, 6–8 enlaces de navegación con iconos, el estado activo utiliza el acento del DS.
- Barra superior: título de página a la izquierda, campo de búsqueda + avatar/estado del usuario a la derecha.
- Principal:
- Fila 1: 3–4 tarjetas KPI (etiqueta + número grande + delta vs. período anterior).
- Fila 2: un gráfico principal (ancho completo o 2/3) — se renderiza como un gráfico inline SVG de líneas / barras / área dibujado a partir de números realistas.
- Fila 3: un gráfico secundario o tabla (eventos recientes, elementos principales, etc.).
- Escribe un documento HTML autocontenido:
<!doctype html>hasta</html>, CSS en un bloque<style>único e inline.- CSS Grid para el layout general; Flexbox dentro de las tarjetas.
- HTML semántico:
<aside>,<header>,<main>,<section>. - Etiqueta cada región lógica con
data-od-id="slug"para el modo de comentarios.
- Gráficos: solo SVG inline, sin librerías JS. Un gráfico de líneas es ~10 líneas de
<polyline>con un sutil relleno de área. Un gráfico de barras son N<rect>s con relleno del acento del DS. Etiqueta los ejes ligeramente (texto atenuado, escala pequeña). - Autoverificación:
- Cada color proviene de los tokens de DESIGN.md.
- El acento se usa como máximo dos veces (sidebar activo + un resalte de gráfico).
- La barra lateral y la barra superior son fijas (sticky); el main se desplaza independientemente.
- La densidad se ajusta al tono del DS — diseños aireados obtienen más espaciado, diseños densos (trading, cripto) aprietan las filas.
Contrato de salida
Emitir entre etiquetas <artifact>:
<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>
Una frase antes del artifact, nada después.