Unslop dashboard

Design e apresentaçãoDestaque

Pega um dashboard com cara de IA genérica e deixa limpo: uma cor de destaque só, gráfico em cinza, sem emojis nem selos, variação com âncora e grade de 16px.

Dashboard antes, com muitas cores e emojis, ao lado do mesmo dashboard depois, limpo — Antes e depois feitos com a skill. Dados fictícios (Loja Aurora). Ver em tamanho real: antes e depois.

Pegue a skill

Baixar SKILL.md

Onde colar

Salve o arquivo em .cursor/skills/unslop-dashboard/SKILL.md dentro do seu projeto. No Claude Code, a pasta é .claude/skills/unslop-dashboard/SKILL.md. A IA lê sozinha quando a tarefa combina.

Quando usar

Ao pedir à IA um dashboard, um relatório ou um painel de métricas.
Para limpar um dashboard que já existe e ficou poluído.
Antes de mostrar números para a diretoria ou postar um print.

Texto da skill

---
name: unslop-dashboard
description: Pega um dashboard com cara de IA genérica e deixa limpo, com 6 regras de cor, gráfico, texto, números e espaço.
---

# Unslop dashboard

Use esta skill para revisar ou gerar um dashboard (HTML, slide ou print de BI) que ficou com cara de "feito por IA": cores demais, emojis, selos, sombras pesadas e números sem contexto. O objetivo é um painel calmo, em que o olho vai direto para o que importa.

## Quando usar

- Ao pedir à IA um dashboard, um relatório ou um painel de métricas.
- Para limpar um dashboard que já existe e ficou poluído.
- Antes de mostrar números para a diretoria ou postar um print.

## As 6 regras

1. **Uma cor de destaque só.** Escolha uma cor (por exemplo, azul) e use só na métrica principal. Os outros cards ficam neutros: fundo branco ou cinza claro, texto em cinza escuro.
2. **Barras cinza, destaque só no período atual.** Todas as barras em cinza; só a do período atual leva a cor de destaque. Escreva o valor direto no dado e tire a legenda.
3. **Sem emojis e sem selos.** Nada de foguetes, foguinhos, "HOT", "NOVO" ou "TOP". O número e o título já dizem o que é.
4. **Variação com âncora.** Toda variação diz contra o quê compara: "+12% vs. setembro", e não "+12%!!". Sem exclamação, sem seta colorida sozinha.
5. **Números grandes e finos, títulos em caixa normal.** O número principal é grande e de peso leve (300 a 400). Títulos e rótulos em caixa normal ("Receita", não "RECEITA"), em cinza médio.
6. **Sombras quase invisíveis e grade de 16px.** Sombra no máximo `0 1px 2px rgba(0,0,0,.06)`. Espaços, margens e distâncias entre cards em múltiplos de 16px (8px só para ajuste fino).

## Como aplicar

1. Liste o que está no dashboard: métricas, gráficos, listas.
2. Escolha a métrica principal e a cor de destaque. Todo o resto fica neutro.
3. Passe regra por regra e corrija. Não mude os dados, só a apresentação.
4. No fim, confira a lista abaixo e diga o que mudou em uma frase por regra.

## Checklist final

- [ ] Só uma cor de destaque na tela inteira.
- [ ] Gráfico em cinza, destaque só no período atual, valor no dado, sem legenda.
- [ ] Nenhum emoji, selo ou exclamação.
- [ ] Toda variação tem "vs." e o período de comparação.
- [ ] Números grandes e de peso leve; nenhum título em caixa alta.
- [ ] Sombras quase invisíveis; espaçamentos em múltiplos de 16px.