Communitygithub.com

madebyjred-sudo/taste

Use para auditar ou limpar a UI de um aplicativo web com bom gosto.

O que é taste?

Taste é uma skill para agentes de IA (como Claude Code, Cursor, Codex) que automatiza a auditoria e limpeza da interface de um aplicativo web em desenvolvimento. Ela captura cada tela duas vezes, gera uma lista de achados com referência de arquivo e linha, atribui uma pontuação por tier (A, AA, AAA) e cria uma contraproposta em um clone do repositório com um branch próprio, nunca alterando o repositório original. A skill suporta cinco modos (correção, limpeza, melhoria, edição, criação) e recursos como medição de ruído de base (para dados dinâmicos), integração com Stageshow para cenas de demonstração, e validação de decisões com critérios de UX/DX/AX. É ideal para revisões de UI, testes visuais de mudanças e apresentação de produtos limpos.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/madebyjred-sudo/taste/tree/HEAD/skill

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que taste faz?

Audita uma aplicação web ativa (capturas por tela, achados com fonte, pontuação por tier) e produz uma contraproposta em um clone com branch própria, com relatório antes e depois. Nunca escreve no repositório analisado.

Quando usar

  • Pedem para revisar, limpar, corrigir ou melhorar a interface de um repositório com servidor de desenvolvimento.
  • Você quer provas visuais de uma mudança de UI antes de levá-las ao repositório real.

Perfis e mundos

  • perfis/REPO.json no repositório do taste: mundo (shift | personal), perfil (livre | estrito), url, arranque, leituras_permitidas (lista {metodo, rota} de requisições POST que apenas leem; o restante é bloqueado), previo ({nome, porta, comando}: o que o servidor precisa antes de iniciar, por exemplo, um túnel ssh para o banco de desenvolvimento; taste abre se a porta estiver fechada e fecha apenas o que abriu), entorno (variáveis extras para o servidor: desliga tarefas de fundo que escrevem, por exemplo, uma varredura periódica).
  • Uma execução lê apenas biblioteca/externa e a biblioteca do seu mundo. Nunca a do outro.
  • Estrito (produtos de cliente com marca fechada): nunca mude tokens nem marca nem adicione peças.

Tiers

A (o mínimo), AA (padrão, A + AA), AAA (tudo). A pontuação do tier usa os achados daquele tier e dos inferiores.

Os cinco modos

modoo que faz
correcaocorrige achados sem alterar layout nem peças
limpezaapenas remove: slogan, textos de ajuda, rótulos secundários, duplicados, estilos mortos; muda "você" para "tu" e remove travessões
melhoriapolidura dentro do esquema atual
edicaoapenas o solicitado em --pedido TEXTO
criacaotela ou componente novo a partir da biblioteca

De ponta a ponta

  1. taste MODO --repo CAMINHO --tier AA [--solo VISTA] [--agente nenhum|claude] [--pedido TEXTO] Audita, escreve pacote/VISTA.md por tela, clona para CORRIDA/arvore no branch taste/AAAAMMDD-HHMM-MODO e escreve CORRIDA/TAREFA.md. Com nenhum imprime a frase para colar no seu agente.
  2. Leia TAREFA.md e cada pacote (capturas, achados por regra com arquivo:linha, regras que aplicam, inspo e componentes do mesmo padrão).
  3. Escreva CORRIDA/criterios.json: um por achado ou grupo da mesma regra. Cada critério leva regra (id de regras.json ou inspo:ID), criterio (uma frase imperativa), por_que (com a fonte arquivo:linha), ux, dx, ax (melhora | igual | piora + 5 palavras), acao, componente, arquivos, estado, motivo_descarte.
    • Se algo piora UX, DX ou AX, é descartado (taste força).
    • Em limpeza, tudo que não for remover fica proposto.
  4. Aplica na árvore apenas os aplicado, um commit por critério ou grupo. Nunca push.
  5. Executa a verificação de tipos da árvore (npx tsc --noEmit se houver tsconfig).
  6. taste comparar --corrida CORRIDA: levanta a árvore na porta + 1, repete as mesmas telas, captura em capturas/depois, redetecta, executa guardas e gera relatorio.html.

Ruído de base

A auditoria captura cada tela duas vezes sobre a mesma árvore e salva em tela.ruido o quanto muda sozinha (dados vivos, relógios, carregamento preguiçoso). As guardas somam esse ruído ao limite de 0,5% das telas não tocadas. --sem-ruido o pula (executa na metade do tempo, mas as guardas ficam mais estritas do que justo). Cada captura usa um contexto de navegador novo: o estado que um clique deixa (barra recolhida no localStorage) não passa para a tela seguinte.

Ler o relatório

  • Acima: pontuação global antes, depois e delta por tier; índice de telas com seu delta.
  • Por tela: desktop e móvel antes e depois, cada critério com regra, fonte, ux/dx/ax e estado.
  • Guardas não ok ou um delta negativo: não traga o branch. Revise o motivo.
  • Trazer o branch: git fetch CORRIDA/arvore BRANCH.

Cenas: mostrar o produto (Stageshow)

Taste limpa o aplicativo real; para mostrá-lo (hero de landing, cartão de funcionalidade, demo animada) usa-se a skill stageshow de Benji Taylor como está, com as regras do Taste por cima. Não é outro comando.

  • Moldura padrão: o gold finder-glass (cenário 860 x 440, janela em 40/40/780/480 que sangra por baixo; compacto 400 x 340, janela em 20/20/460/400 que sangra à direita e abaixo; raio 14; fundo de três camadas recolorido para a marca). Geometria e capturas: biblioteca/externa/golds/moldura-finder-glass.md.
  • Antes de construir, capturar o aplicativo real com sessão de teste (apenas leitura) e colher seus tokens do CSS.
  • Cenas aprovadas = gold próprio por mundo, em biblioteca/<mundo>/cenas/ (ou em TASTE_BIBLIOTECA_SHIFT para um segundo mundo de trabalho).
  • Ensaio: film.mjs --gate do Stageshow é pista, não veredito (em seus próprios golds passa a metade).
  • Após limpar com Taste, a cena é montada sobre a tela já limpa: primeiro o produto, depois como se mostra.

Armadilhas

  • Se uma tela der erro, olhe tela.erro: bloqueada POST /api/... indica uma leitura POST que falta em leituras_permitidas (adicione-a apenas se leu o código e ela não escreve); 500 costuma ser o banco de dados ou um túnel caído: revise a nota de previo em corrida.notas.
  • A árvore vincula node_modules do original: não instale dependências na árvore.

Habilidades Relacionadas