Skill de Painel (Dashboard)
Produzir uma tela única de painel administrativo / analytics.
Fluxo de trabalho
- Leia o DESIGN.md ativo (injetado acima). Cores, tipografia, espaçamento, estilização de componentes vêm dele. Não invente novos tokens.
- Classifique o que o painel monitora (vendas, tráfego, uso, incidentes, operações, etc.) a partir da especificação. Gere nomes e valores de métricas específicos e plausíveis — sem espaços reservados como "Métrica A / Métrica B".
- Organize as regiões obrigatórias:
- Barra lateral esquerda (220–260px): marca no topo, 6–8 links de navegação com ícones, estado ativo usando a cor de destaque do DS.
- Barra superior: título da página à esquerda, campo de busca + avatar / status do usuário à direita.
- Principal:
- Linha 1: 3–4 cartões KPI (rótulo + número grande + delta em relação ao período anterior).
- Linha 2: um gráfico primário (largura total ou 2/3) — renderizado como um gráfico SVG inline de linha / barra / área, desenhado a partir de números com aparência real.
- Linha 3: um gráfico secundário ou tabela (eventos recentes, itens principais, etc.).
- Escreva um documento HTML autossuficiente:
<!doctype html>até</html>, CSS em um único bloco<style>inline.- CSS Grid para o layout geral; Flexbox dentro dos cartões.
- HTML semântico:
<aside>,<header>,<main>,<section>. - Identifique cada região lógica com
data-od-id="slug"para modo de comentário.
- Gráficos: apenas SVG inline, sem bibliotecas JS. Um gráfico de linha tem ~10 linhas
de
<polyline>com preenchimento de área sutil. Um gráfico de barras tem N<rect>s com preenchimento na cor de destaque do DS. Rotule os eixos de forma leve (texto suave, escala menor). - Autoverificação:
- Toda cor vem dos tokens do DESIGN.md.
- Cor de destaque usada no máximo duas vezes (sidebar ativa + um destaque de gráfico).
- Barra lateral + barra superior são fixas (sticky); o conteúdo principal rola independentemente.
- Densidade corresponde ao tom do DS — DSes arejados têm mais espaçamento, DSes densos (trading, cripto) compactam as linhas.
Contrato de saída
Emita entre tags <artifact>:
<artifact identifier="slug-do-painel" type="text/html" title="Título do Painel">
<!doctype html>
<html>...</html>
</artifact>
Uma frase antes do artifact, nada depois.