Make Interfaces Feel Better skill

O que ela faz

Reúne 19 princípios de acabamento de interface, quase todos com valor exato: canto de fora igual ao de dentro mais o espaçamento, sombra em vez de borda pra dar profundidade, botão que encolhe pra 0.96 no clique, área de toque de 44x44 px, números que não mudam de largura e ícone com traço no peso do texto ao lado.

Também cuida das animações: entradas em sequência com uns 100 ms entre os blocos, saídas mais discretas que as entradas, nada de animação no carregamento da página e nada de transition: all. Antes de mexer, olha como o projeto já escreve estilo (Tailwind, CSS ou CSS-in-JS) e faz a correção do mesmo jeito.

No modo revisão, entrega uma tabela por princípio com gravidade, arquivo e linha, como está e como deve ficar, além do que foi considerado e descartado, e fecha com um veredito: bloquear, pedir ajustes ou aprovar. Tem a revisão rápida, com até 5 achados, e a completa, com até 15.

Nas palavras de quem fez

Quando usar

• A página está pronta mas parece amadora e você não sabe dizer por quê
• Revisar uma landing page antes de mandar pro cliente
• Dar acabamento a botões, cards e menus que o Claude acabou de criar
• Ajustar animações que estão exageradas ou engasgando

Depois de instalar, é só pedir assim

• Revisa a página inicial com a make-interfaces-feel-better no modo completo
• Esse card está estranho, ajeita os cantos, a sombra e o ícone
• Faz uma revisão rápida dos botões e dos formulários e corrige o que for grave

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas