Gráficos, blocos de painel e peças pra agentes de IA em HTML, CSS e JavaScript puro. Grátis e inteiro, da leal labs.
Cards de arquivo entram um a um acima do prompt, com miniatura e botão para remover.
Consultas do agente e fontes consultadas, exibidas em tempo real com contador de tempo.
Limites de uso do plano
Uso por categoria e limites do plano, com os valores contando ao entrar na tela.
Estados pendente, rodando e concluído, com a lista de passos avançando um a um.
O p95 da rota de pagamento passou de 800 ms por 10 minutos a partir das 8h59, na região de São Paulo.
O certificado do domínio da API vence em 18 de junho. Renove antes para evitar queda no acesso.
Há 1.180 mensagens aguardando envio, o triplo da média das últimas quatro semanas.
Três anéis concêntricos que preenchem conforme a meta do dia. Passe o mouse sobre um anel para ler o progresso no centro.
A mesma ideia em miniatura: cada dia do mês ganha três anéis. O seletor troca de mês com transição.
Grade de células arredondadas em cinco níveis do acento. As abas trocam a granularidade com transição e cada célula tem dica ao passar o mouse.
Tudo aí em cima é o design system rodando. Passe o mouse pra parar e mexa à vontade.
Funil, Sankey, radar, radial, medidor e mais. Cards com seletor de período, destaque ao passar o mouse e número que conta, todos nos mesmos tokens. Lá fora isso é pago. Aqui vem junto.
Etapas com halo em camadas e pílulas de conversão, curvas suaves ou cortes nítidos, e azulejos com o número de cada coluna.
Barras arredondadas sobre um trilho, com alternador de período, título que conta até o valor e contorno no hover.
Polígono preenchido sobre uma grade hexagonal. Passe o mouse sobre um eixo e o título conta até o valor dele, com o azulejo correspondente em destaque.
Duas séries só com contorno sobre a mesma grade. A legenda é viva: passe o mouse sobre uma série para isolá-la.
Fluxos coloridos pela fonte, do trabalho às entregas. Passe o mouse sobre uma fonte ou destino para isolar os fluxos dele.
Duas séries com curva suave que se desenham ao entrar. Passe o cursor num ponto do tempo e título, número e azulejos mostram aquele instante.
O funil de vendas como barras horizontais com ícone, valor e participação de cada etapa, mais uma grade de azulejos.
Anéis concêntricos com o nome escrito ao longo do próprio arco. Passe o mouse sobre um anel e os outros recuam, enquanto título e azulejo acompanham.
Série empilhada com preenchimentos em gradiente. Passe o cursor num mês e título, legenda e azulejos o acompanham.
Barras num eixo e uma linha de conversão no outro, volume e taxa lidos juntos em uma tela.
Meia-volta de segmentos empilhados e arredondados, com a maior parcela no centro. Passe o mouse sobre um segmento para trocar o centro.
Lista de barras com o rótulo dentro da barra e o valor à direita. Passe o cursor numa linha e as outras esmaecem.
Tickets por tempo de resolução, coloridos por categoria. Passe o cursor numa categoria da legenda para isolá-la, ou num ponto para ver os detalhes.
Casca, miolo e azulejo. A profundidade vem da superfície, então o card não precisa de sombra pra existir.
O canto de fora é o de dentro mais o recuo: casca 28 é miolo 16 mais 12. As curvas ficam paralelas e o olho para de tropeçar.
Passe o mouse e os outros itens esmaecem, com o título acompanhando. Você lê um dado por vez.
Mude data-accent no html e todos os componentes acompanham. Cinco acentos da leal labs, nos temas claro e escuro.
Um comando no terminal, duas linhas de CDN ou a skill pro seu agente. Sem npm, sem build, sem conta.
Tudo, em ./unslop, com a skill em .claude/skills/unslop
curl -fsSL unslop.leallabs.dev/i | shSó um componente
curl -fsSL unslop.leallabs.dev/i | sh -s add sankeyNo <head>
<link rel="stylesheet" href="https://unslop.leallabs.dev/unslop.css">
<script src="https://unslop.leallabs.dev/unslop.js" defer></script>Onde o gráfico vai aparecer
<div data-u="funnel" data-u-props='{"stages":[...]}'></div>A instalação completa já deixa a skill em .claude/skills/unslop. O agente passa a montar tela com estes componentes e tokens, em vez de inventar estilo.
curl -fsSL unslop.leallabs.dev/i | shDepois, peça normalmente
> monta um painel de vendas com funil e sankey usando o unslopdata-u onde quer o componenteNão existe plano Pro. Componentes, blocos, gráficos, tokens e a skill são grátis, sem conta e sem cartão, com licença MIT. A leal labs fez pra usar nos próprios projetos e abriu pra todo mundo.
Cobrado nunca.