Polimento de Interface
Use esta skill quando o usuário deseja que uma interface existente pareça mais acabada, ou quando estiver implementando um componente onde pequenos detalhes visuais importam. Melhore clareza, consistência e feedback sem alterar a identidade visual do produto, a arquitetura da informação ou o modelo de interação, a menos que solicitado.
Estabeleça a linguagem visual local
Antes de editar, identifique o framework, a abordagem de estilização, a biblioteca de componentes, os tokens de design e as convenções de componentes próximos. Siga o sistema existente e reutilize componentes e valores compartilhados. Prefira um reparo na fonte compartilhada a muitos patches locais. Não adicione uma dependência ou sistema de estilização para um detalhe de polimento.
Consistência visual é evidência, mas gosto pessoal não é um defeito. Preserve convenções deliberadas do projeto, como superfícies planas ou movimento contido, quando aplicadas consistentemente.
Escolha o modo certo
Implementação. Faça apenas as alterações que resolvem um problema observado ou completam um tratamento explicitamente solicitado. Mantenha o comportamento acessível e a implementação idiomática para o projeto.
Revisão. Permaneça somente leitura, a menos que a implementação também seja solicitada. Declare o escopo inspecionado, avalie os estados relevantes e relate apenas descobertas suportadas pela interface renderizada ou evidências do código-fonte. Não apresente comportamento visual não observado como fato.
Para qualquer modo, leia references/polish-checklist.md para o guia de decisão, cobertura de estado e formato de relatório. Para implementação, leia references/implementation-recipes.md apenas para a stack real do projeto: CSS, Tailwind, React Motion, GSAP ou Three.js. Para trabalho com cor, foco, movimento, controle ou tamanho de alvo, leia references/wcag-accessibility.md; execute scripts/check_contrast.py quando as cores de primeiro plano e fundo puderem ser resolvidas para valores hexadecimais.
Aplique refinamentos de alto valor
- Texto: Escolha a quebra de linha com base no comprimento do conteúdo e no viewport; estabilize valores numéricos ao vivo quando sua largura variável perturba o conteúdo próximo.
- Superfícies: Trate raio aninhado, profundidade, bordas de imagem e posicionamento de ícones como relações visuais. Corrija-os quando parecerem errados em seu contexto renderizado.
- Feedback: Torne os estados de repouso, hover, foco, pressionado, selecionado, carregando e desabilitado fáceis de distinguir. Não torne o movimento o único sinal de que algo mudou.
- Movimento: Use transições reversíveis para mudanças de estado impulsionadas pelo usuário. Reserve movimento em etapas para momentos pouco frequentes em que explica hierarquia ou direção. Respeite
prefers-reduced-motion. - Contextos de entrada: Não permita que dispositivos de toque herdem um tratamento de hover persistente. Mantenha o comportamento de foco visível, a operação por teclado e os tamanhos de alvo práticos intactos ao polir controles.
Evite alterações decorativas sem benefício perceptível para o usuário. Não use transições amplas, dicas de desempenho permanentes ou movimento que torne as ações rotineiras mais lentas ou difíceis de interpretar.