make-interfaces-feel-better: confrontar uma lista de detalhes antes de mudar o tato

Para quem

Este guia destina-se a quem já tem uma interface utilizável mas sente que «falta tato» e quer que um agente confronte uma skill centrada em pequenos detalhes. Oficialmente está escrita como atenção aos detalhes que tornam a interface mais agradável. Repositório:

https://github.com/jakubkrehel/make-interfaces-feel-better

Corpo da skill:

https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md

O material diz cobrir animação, tipografia, ícones, estados hover, alinhamento ótico, raios concêntricos, sombras, áreas de toque e pontos próximos. Serve quando já há uma interface pré-visualizável e só se quer polir estes pontos. Não serve sem interface, se se quiser que o agente invente um sistema visual inteiro. O material atual não nomeia um cliente obrigatório; não inferir que só um produto instala.

O repositório é publicado sob licença MIT; notas em

https://github.com/jakubkrehel/make-interfaces-feel-better#MIT-1-ov-file

Concluir uma primeira tentativa em 3 minutos

Seguir só o caminho oficial recomendado.

Pré-condição: esta máquina consegue executar npx e o espaço de trabalho tem código de interface ou uma pré-visualização que se pode abrir. Antes de executar, confirmar que o projeto atual é onde a skill deve ser escrita.

Local de instalação: tratado por npx skills add. O material não escreve uma pasta destino; não inventar um caminho que não apareceu. A localização oficial do ficheiro da skill é o SKILL.md acima.

Copiar e executar:

npx skills add jakubkrehel/make-interfaces-feel-better

Sucesso: o comando termina normalmente e o agente consegue citar itens como animação, estados hover ou áreas de toque. Primeiro um confronto só de leitura: indicar uma página existente e pedir só possíveis problemas de tato; proibir alterações de ficheiro. Se apontar problemas pelas categorias da skill (não um vago «está feio»), está carregada.

Mudar estilos mexe no repositório. Não autorizar escrita até confirmar ficheiros e âmbito.

Casos de uso

Caso 1: ver primeiro estados hover e áreas de toque. Corresponde a hover states e hit areas cobertos pela skill. Serve quando botões ou ligações já clicam mas parecem difíceis de acertar ou sem feedback. Pedir primeiro só uma lista de problemas. Sucesso: os comentários caem no hover e no alcance clicável, não numa página refeita. O material não dá tamanho mínimo de área nem CSS concreto.

Caso 2: confrontar tipografia, alinhamento ótico e raios concêntricos. Corresponde a typography, optical alignment, concentric border radius. Serve quando o layout já está fixo e só se quer corrigir tracking, alinhamento e se os raios são concêntricos. Mostrar uma captura atual ou um componente e pedir avaliação só destes três. Sucesso: as sugestões batem nestas classes, sem abrir outro design. O material não dá norma numérica; parar onde faltam números.

Limites de uso

O material atual só prova este comando de instalação npx e o conjunto de temas acima. Não inventar outros nomes de skills, comandos ou token de design. O «and more» do título não está desenvolvido; não tratar temas não escritos como uma lista já existente.

O material não exige linguagem nem framework. Não inferir uma única stack a partir de exemplos. Alterações de animação, sombras e raios podem afetar o visual existente; confrontar primeiro, depois alterar. Para mais, seguir o repositório oficial:

https://github.com/jakubkrehel/make-interfaces-feel-better