felipebasurto/unslop-ui

Unslop UI

Edite o texto visível e o chrome decorativo de uma página web, tela de aplicativo, gráfico ou dashboard para que ele pare de soar como gerado por IA. Uma boa interface é usada, não lida: mantenha as palavras que uma pessoa precisa para agir e corte o resto.

Alvo: $ARGUMENTS (se vazio, use os arquivos alterados nesta conversa ou pergunte).

Regras de escrita do /pstack:unslop

Aplique estas a cada string que você mantiver. Cite-as pelo número.

!python3 ${CLAUDE_SKILL_DIR}/scripts/load_unslop.py

Se a linha acima ainda mostrar um comando em vez de regras (agentes diferentes do Claude Code), execute python3 scripts/load_unslop.py a partir da pasta desta habilidade e aplique o que for impresso.

Regras de UI

Os IDs são estáveis. Cite-os como U1 a U16 no relatório.

Cópia de interface

• U1. Rótulos de sobrancelha. Texto pequeno em maiúsculas ou com espaçamento entre letras acima de um título ("PASSPORT", "FUNCIONALIDADES", "COMO FUNCIONA"). Delete. O título já diz do que se trata a seção.
• U2. Numeração decorativa. "01 02 03", "01 // Funcionalidades", "§", "//" como prefixos. Delete a menos que a ordem seja real e o usuário a siga (etapas de um checkout, um guia numerado de instalação).
• U3. Reflexo de subtítulo. Um subtítulo abaixo de cada título, ou uma linha acima do H1. Mantenha apenas quando ele afirmar um fato que o título não diz. "Analytics / Entenda seus dados melhor" perde a segunda linha.
• U4. Explicação robótica. Legendas, textos de ajuda e descrições que narram o que o elemento faz visivelmente ("Clique no botão abaixo para começar", "Este gráfico mostra a receita ao longo do tempo"). Delete. Títulos e legendas permanecem com 5 palavras ou menos. Isentos: estados vazios, mensagens de erro e confirmações de ações destrutivas, que podem usar uma frase completa.
• U5. Notas de design vazadas. Texto sobre como a tela funciona ou por que foi projetada daquela forma, parênteses longos, "(atualiza em tempo real)", "(alimentado por IA)". Delete ou mova para uma tooltip se um usuário realmente for procurar por isso.
• U6. Strings de status. Fatos encadeados com "·" ou "|" ("12 itens · Atualizado há 2 min · Sincronizado · v2.1"). Mantenha o único fato sobre o qual o usuário age. Coloque os outros onde são necessários ou os remova.
• U7. Rotular tudo. Um rótulo que repete o placeholder, o ícone, o texto do botão ou o título da seção. Escolha uma dica. Um campo de busca com um ícone de lupa não precisa de um rótulo "Buscar" nem de um placeholder "Buscar..." além de um deles.
• U8. Slogans picados e vazios. "Um. Grande. Negócio.", "Feito diferente.", "Entregue mais rápido. Pense menos." Reescreva como uma frase que nomeie a coisa e o que ela faz, ou delete.

Decoração

• U9. Badges e pills sem estado real. "AO VIVO", "NOVO", "IA", "Beta", "Pro", "🔥 Popular" adicionados por estética. Mantenha um badge apenas se ele refletir dados que o aplicativo realmente rastreia (uma transmissão ao vivo real, um item realmente novo desde a última visita).
• U10. Dots de status. Dots pulsantes ou coloridos (animate-pulse, rounded-full pequenos) ao lado de texto. Mantenha apenas se vinculados a um status ao vivo real.
• U11. Emojis e ícones decorativos. Em títulos, botões, rótulos de KPI e itens de lista. Delete. Um ícone permanece apenas se for o próprio controle (botão de ícone com um aria-label) ou se carregar um significado que o texto não tem.

Gráficos e dashboards

• U12. Títulos de gráfico que nomeiam o tipo de gráfico. "Gráfico de barras da receita mensal" vira "Receita mensal", ou a descoberta: "Receita dobrou desde março".
• U13. Instruções de leitura. Subtítulos ou legendas que explicam como ler o gráfico ("Cada barra representa um mês", "Passe o mouse para detalhes"). Delete.
• U14. Dizer a mesma coisa duas vezes. Cada quantidade recebe uma codificação. Uma barra, um número na barra, uma linha de grade na sua altura e um tick do eixo dizendo o mesmo valor são três a mais; um KPI com seta mais porcentagem mais a palavra "subiu" mais uma frase abaixo ("A receita cresceu 12% em comparação ao mês passado") é o mesmo erro em texto. Mantenha a codificação que o leitor precisa: eixo e linhas de grade para forma, um valor impresso para o número que importa (geralmente apenas o último ponto ou o máximo).
• U15. Andaime do gráfico que compete com os dados. Uma caixa de borda ao redor da área do gráfico, linhas de grade escuras ou densas, ticks menores, bordas grossas de eixo, 3D, sombras e brilhos em marcas, preenchimentos de fundo atrás da área de plotagem. Delete-os, ou torne o que deve ficar (poucas linhas de grade, uma linha de base) um traço fino em cinza claro. Dados no topo, rótulos ao lado, andaime mais tênue. Não redesenhe o gráfico: mesmo tipo, mesmos dados, mesmas cores de série.
• U16. Legenda onde um rótulo direto funciona. Uma caixa de legenda que faz o leitor combinar cores com nomes, quando o nome poderia ficar no final da linha ou ao lado da barra. Rotule a série diretamente, idealmente com seu valor mais recente ("Este ano 1.150"), e remova a legenda. Mantenha uma legenda para mais de quatro séries ou quando as marcas estão muito próximas para rotular.

Para pares antes/depois, leia references/examples.md quando não tiver certeza de até onde cortar.

Guardrails

• Altere apenas texto visível e elementos decorativos. Não toque em lógica, dados, cores, tokens de espaçamento ou estrutura de layout. A única exceção é o andaime de gráfico sob U15, que pode ser reduzido ou clareado.
• Quando você excluir um elemento, exclua também seu wrapper agora vazio e qualquer margem ou espaçamento que existia apenas para ele. Um wrapper que restou segurando um único filho que ele só existia para agrupar também vai.
• Nunca exclua aria-label, alt, title em botões de ícone, ou texto apenas para leitores de tela. Se o texto visível cortado era o único nome acessível, mova-o para dentro de aria-label.
• Texto que vem de dados, props, arquivos i18n ou CMS: edite-o em sua origem (o arquivo de tradução, o fixture) ou relate-o; não codifique uma substituição fixa no componente.
• Se um caso sinalizado merece seu lugar (estado real, ordem real, texto legal), mantenha-o e diga por quê no relatório.

Procedimento

Copie esta checklist e acompanhe:

- [ ] 1. Contar: python3 ${CLAUDE_SKILL_DIR}/scripts/count_tells.py <alvo>   (${CLAUDE_SKILL_DIR} é a pasta deste arquivo)
- [ ] 2. Ler cada string visível e elemento decorativo; marque cada problema com U1-U16 ou um número de regra unslop
- [ ] 3. Editar
- [ ] 4. Contar novamente com o mesmo comando
- [ ] 5. Relatar

O contador é uma heurística baseada em regex. Ele encontra candidatos e fornece um número antes/depois. Ele perde U3, U4, U5, U7, U8, U12, U13 e U14, que precisam de leitura. Para U15 e U16, ele só vê as formas de código (sombras, bordas grossas de eixo e linhas de grade, legendas ativadas). Ele também sinaliza alguns casos legítimos. Sua leitura na etapa 2 é a verificação real.

Formato do relatório:

Regra	Antes	Depois
U1 sobrancelha	6	0
unslop 13 travessão	4	0

Em seguida, liste o que você manteve propositalmente, uma linha cada, com o motivo.