make-interfaces-feel-betterpor Jakub Krehel

Make Interfaces Feel Better Skill.

Um skill para Claude Code e Codex voltado à pesquisa de UX: princípios de design-engenharia para polimento de hover, sombra, borda, ícone, tipografia e microinteração.

UX & Research

Baixar OpenDesign Ver guia de uso

jakubkrehel/make-interfaces-feel-better · skills/make-interfaces-feel-better/SKILL.mdSKILL.md

--- name: make-interfaces-feel-better description: - Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border … --- ## Core Principles ## Common Mistakes ## Review Output Format

Cabeçalho e títulos de seção lidos do arquivo upstream em 2026-09-14 · 11.798 caracteres no total

01 O que faz

O que o Skill make-interfaces-feel-better Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Princípios de design-engenharia para dar polimento a interfaces, escritos para quem constrói componentes de UI ou revisa código de frontend: estados de hover, sombras, bordas, tipografia, ícones, microinterações e animações de entrada/saída.

Ele traz dezenove princípios centrais numerados com padrões rígidos — raio de borda concêntrico, alinhamento óptico, box-shadows em camadas em vez de bordas de falsa elevação, transições CSS interrompíveis, escalonamento (stagger) em torno de 100ms, texto com antialiasing, números tabulares, contornos de imagem em preto ou branco puro, scale(0.96) ao pressionar, áreas de toque de 44×44px e espessura de traço de ícone compatível com o texto. Dois modos de revisão, rápido e completo, geram uma tabela de Gravidade/Localização/Antes/Depois/Por quê agrupada por princípio, limitada a 5 ou 15 constatações, encerrando em Bloquear, Precisa de ajustes ou Aprovar.

O que ele produz

Um relatório de revisão que declara desde o início o que foi inspecionado e nunca dá a entender que uma superfície não inspecionada foi coberta.
Constatações agrupadas por princípio dentro de uma tabela de Gravidade, Localização, Antes, Depois, Por quê, que lista todas as mudanças feitas ou propostas em vez de apenas um subconjunto.
Uma tabela de Consideradas mas Rejeitadas com 1–3 candidatas reais no modo rápido e 2–5 no modo completo, cada uma com o motivo pelo qual foi descartada.
Uma seção de verificação listando os comandos ou interações exatos executados e seus resultados observados, seguida do veredito.

Veja o exemplo de prompt ↗

Como funciona

01
Expresse Correções no Próprio Sistema de Estilo do Projeto
Antes de propor ou escrever qualquer correção, identifique como o projeto já estiliza os elementos e formule a alteração nesse mesmo sistema — Tailwind em um projeto Tailwind, CSS puro em um projeto CSS, ou a abordagem de CSS-in-JS já estabelecida.
02
Desacelere a Interface
Ao revisar, reproduza o movimento a 10% da velocidade no painel Animations do navegador, porque o que parece estranho a 10% da velocidade é o que está sutilmente errado na velocidade total.
03
Assuma o Modo Completo por Padrão
O modo completo é usado sempre que nenhum modo de revisão é informado; o modo rápido precisa ser solicitado explicitamente.
04
Registre os Achados em um Formato de Tabela Fixo
Agrupe os achados por princípio em uma tabela markdown com as colunas Severity, Location, Before, After e Why; a location cita path/to/file:line.
05
Considere as Cinco Categorias
A tabela de escopo deve conter todas as cinco categorias do Quick Reference, e uma superfície não inspecionada nunca deve ser sugerida como revisada.
06
Encerre com Verificação e um Veredito
O veredito é Block quando resta um achado HIGH, Needs changes quando restam apenas achados MEDIUM ou LOW, e Approve apenas quando não resta nada acionável.

02 Encontre o ideal para você

Quando Usar a Skill make-interfaces-feel-better

Use a skill make-interfaces-feel-better no Claude Code ou Codex quando o trabalho for pesquisa de UX desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Construir ou revisar componentes de UI em que o trabalho de detalhe visual importa: animações, estados de hover, sombras, bordas, tipografia, ícones, microinterações e transições de entrada/saída.
Uma passagem rápida pelo fluxo principal do usuário e pelos estados de maior tráfego, reportando apenas problemas HIGH e MEDIUM.
Uma auditoria completa de todo o escopo solicitado, abrangendo tipografia, superfícies, animações, ícones e desempenho.
Projetos que já têm uma convenção de estilização, de modo que as correções de polimento sejam aplicadas em Tailwind, CSS puro ou CSS-in-JS, conforme apropriado.

Conheça os Limites

Ele não adicionará um segundo sistema de estilização a um projeto apenas para entregar uma correção de polimento.
Ele recusa animação personalizada em interações de alta frequência, já que o custo de atenção se repete a cada acionamento.
Ele não escalona interações rotineiras, apenas entradas em estágios pouco frequentes.
Bordas mantidas apenas para simular elevação devem ser substituídas por valores de box-shadow transparentes em camadas; bordas estruturais e de estado permanecem.

O Que Fornecer

package.jsonNecessário para decidir o caminho de animação do ícone: verifique se motion ou framer-motion está instalado e siga o caminho de importação já estabelecido.
Arquivos de origem ou telas exatasOs achados citam path/to/file:line; quando o artefato não tem arquivos de origem, a tela e o componente exatos são citados em vez disso.
Modo, escopo e contexto do frameworkInforme o modo, o escopo exato, o framework, as convenções de estilização e qualquer limite de revisão para que o relatório mostre o que foi realmente inspecionado.

03 Dentro da skill

Regras que a Skill make-interfaces-feel-better Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Calcule Raios Concêntricos
Cantos aninhados devem ser concêntricos: o raio externo é igual ao raio interno mais o padding.
Sempre pressione em 0.96
A escala de clique é fixada em scale(0.96) e nunca abaixo de 0.95; qualquer valor menor parece exagerado. Uma prop estática desativa isso quando o movimento distrairia.
Contornos de imagem permanecem em neutro puro
O contorno de imagem de 1px com baixa opacidade deve ser preto puro no modo claro e branco puro no modo escuro — nunca um neutro com tonalidade como slate ou zinc, que absorve a cor da superfície e parece sujeira.
Nunca faça transition de tudo
Liste propriedades exatas, como transition-property: scale, opacity. O transition-transform do Tailwind cobre transform, translate, scale e rotate.
Combine a espessura do traço do ícone com o peso do texto
Traço de 1.5px acompanha texto regular 400, 2px acompanha semibold 600. Mantenha uma única espessura de traço por conjunto de ícones e nunca misture bibliotecas de ícones em uma mesma superfície.
Use os valores exatos de animação de ícone
Trocas contextuais de ícone animam em scale, opacity e blur — não em visibility — e esses valores são fixos, não improvisados.
Escalone apenas entradas pouco frequentes
Divida uma entrada em estágios em blocos semânticos e escalone-os em cerca de 100ms, em vez de animar um único contêiner. Interações rotineiras e frequentes não devem ser escalonadas.
Dimensione áreas de toque deliberadamente
Prefira uma área de toque de 44×44px para toque ou dispositivos móveis, no mínimo 40×40px em interfaces desktop densas, estendendo elementos visíveis menores com um pseudo-elemento.

04 Coloque em prática

Instalar make-interfaces-feel-better no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar make-interfaces-feel-better ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

Formato genérico da CLI skills para skills/make-interfaces-feel-better/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Pesquisa de UX

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Review [src/components/] in full mode. The card and its inner button both use rounded-xl, the counter shifts when the value changes, and the outline-to-fill icon swap exits with a jarring fade. Express every fix in [our existing styling system] and give me a Severity/Location/Before/After/Why table.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Percorra todos os estados da interface — hover, focus, active, loading e vazio — como parte da revisão.
Liste toda verificação não realizada ao lado do veredito como Não verificado, indicando o que falta.
Quando initial={false} é aplicado, confirme que isso não interrompe animações de entrada intencionais.
Não preencha o relatório artificialmente para atingir o limite de achados, e omita princípios sem achados.

No OpenDesign importe o make-interfaces-feel-better a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Jakub Krehel
Repository: github.com/jakubkrehel/make-interfaces-feel-better Branch main
Arquivo da skill: skills/make-interfaces-feel-better/SKILL.md Checksum de conteúdo registrado na verificação; commit 35545ea
License: MIT De LICENSE.
Estrelas do repositório: 3.433 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório jakubkrehel/make-interfaces-feel-better. Não é uma classificação ou contagem de uso para make-interfaces-feel-better.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Referência RápidaCinco categorias — tipografia, superfícies, animações, ícones, performance — cada uma mapeada para quando usá-la.
Princípios FundamentaisDezenove regras numeradas, do raio de borda concêntrico à contenção de movimento, com valores padrão exatos.
Erros ComunsTabela que combina cada erro frequente com sua correção, como transition: all e áreas de toque minúsculas.
Formato de Saída da RevisãoModos, cobertura, limites de achados, definições de severidade e a estrutura de relatório exigida.
Escopo e CoberturaDeclare modo, escopo, framework e convenções; liste as cinco categorias com as evidências inspecionadas e o resultado.
AchadosAgrupe por princípio em uma tabela de Severidade, Localização, Antes, Depois e Motivo cobrindo cada alteração.
ExemploTabelas resolvidas para raio de borda concêntrico, números tabulares e escala ao pressionar.
Considerado mas RejeitadoTabela de candidatos limítrofes reais que foram rejeitados, com o motivo apresentado.
Verificação e VereditoListe comandos ou interações executados, sinalize verificações não confirmadas e depois classifique como Bloquear, Precisa de ajustes ou Aprovar.

A Descrição da Própria Skill

"- Princípios de engenharia de design para fazer interfaces parecerem polidas. Use ao construir componentes de UI, revisar código frontend, implementar animações, estados de hover, sombras, bordas, tipografia, ícones, micro-interações, animações de entrada/saída ou qualquer trabalho de detalhes visuais. Suporta modos de revisão rápida e completa. Ativa em polimento de UI, detalhes de design, "faça isso parecer melhor", "parece estranho", animações escalonadas, raio de borda, alinhamento óptico, suavização de fonte, números tabulares, contornos de imagem, sombras de caixa, ícones, espessura de traço de ícone, estados de ícone, moderação de movimento."

Descrição do front-matter de SKILL.md. O arquivo completo tem cerca de 11.798 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill make-interfaces-feel-better

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Preciso de uma biblioteca de animação para as animações de ícone contextuais?

Não. Se nenhuma biblioteca de animação estiver instalada, o arquivo mantém os dois ícones no DOM com um posicionado de forma absoluta e faz um cross-fade entre eles com transições CSS, o que garante animações de entrada e saída sem qualquer dependência.

Uma animação de entrada é reproduzida ao carregar a página — como isso é tratado?

O arquivo evita isso com initial={false} no AnimatePresence, o que impede animações de entrada na primeira renderização, e então pede que você confirme que isso não quebra animações de entrada intencionais.

Uma revisão também cobre performance além da parte visual?

Sim, performance é uma das cinco categorias do Quick Reference, com foco na especificidade das transições e no uso de will-change. will-change é limitado a transform, opacity e filter — as propriedades que a GPU pode compor — e will-change: all nunca é usado.

Make Interfaces Feel Better

Execute make-interfaces-feel-better em uma Tarefa Real de Pesquisa de UX.

Baixe OpenDesign, importe make-interfaces-feel-better do seu link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills