/impeccable

Cria o PRODUCT.md (público, tom, marca, o que evitar). Sem ele a skill para e roda o teach antes. Uma vez por projeto.

Gera o DESIGN.md a partir do código: cores, fontes, componentes. As próximas telas saem com a cara do projeto.

Diga se é vitrine (brand: o design é o produto) ou ferramenta (product: o design serve). Landing page é brand; painel é product.

Planeja a UX e pede sua aprovação antes de codar. Mudar o plano é barato; mudar o código, não.

Shape + implementação de ponta a ponta. Para features novas inteiras.

Puxa padrões repetidos para tokens e componentes reutilizáveis.

Revisão de UX com nota por heurística. Só aponta, não mexe no código. Use para decidir onde investir.

Checagem técnica: acessibilidade, performance e responsivo.

Passada final antes de publicar: alinhamento, espaçamento, estados de hover e foco.

Amplifica telas sem graça. Escolha pelo sintoma: sem graça → bolder; barulhento → quieter.

Acalma telas barulhentas: um efeito só, no lugar que importa.

Corta até a essência. Remove o que não ajuda quem está lendo a decidir.

Pronto para produção: textos longos, listas vazias, erros, idiomas.

Primeiro acesso e estados vazios. Numa landing: os primeiros 5 segundos de quem chega.

Movimento com propósito. Ease-out exponencial, sem bounce. Nunca anima width, height ou top.

Cor estratégica em telas monocromáticas: destaque só no que importa.

Hierarquia com razão ≥ 1.25 entre níveis e linha de 65 a 75 caracteres.

Espaçamento, ritmo e hierarquia. Menos caixas: card dentro de card é sempre errado.

delight dá personalidade; overdrive é efeito fora do comum. Landing pede overdrive, mas em uma seção só.

Melhora textos: títulos, botões, chamadas. Concreto ganha de genérico.

Ajusta para celular, tablet e telas grandes.

Diagnostica e corrige lentidão: bundle, imagens, renderização.

Você clica num elemento no navegador e ela gera variações para escolher.

Cria um atalho direto para o comando. Desfaz com unpin.

Borda lateral colorida, texto em degradê, vidro fosco decorativo, grade de cards idênticos, modal como primeira opção.

Nada de preto ou branco puro: neutros levemente tingidos pela cor da marca.

Claro ou escuro nunca é padrão. Descreva a cena real de uso e deixe ela decidir.

Se alguém bate o olho e diz "foi IA que fez", reprovou.