Skills de Emilkowalski

skills/skills/animate

Construa uma animação do zero, tomando as decisões na ordem que determina se ela parece certa — se ela deve animar de fato, qual propósito, qual ferramenta, quais propriedades, qual curva e duração, como ela interrompe, como ela sai. Escreve a implementação. Use quando for pedido para animar algo, adicionar movimento, fazer um componente parecer vivo ou construir uma transição. Para criticar movimentos existentes, use review-animations; para auditar uma base de código inteira, use improve-animations.

skills/skills/animation-vocabulary

Glossário de consulta reversa que transforma uma descrição vaga de uma animação web ou efeito de movimento em seu termo exato ("aquela coisa saltitante quando um popover abre" → Pop in; "o scroll elástico do iOS" → Rubber-banding). Use quando o usuário pergunta "como se chama quando…", ou descreve um efeito de movimento sem saber seu nome e quer a palavra certa para usar com uma IA ou designer. Serve para nomear um efeito, não para projetá-lo ou construí-lo.

skills/skills/apple-design

Abordagem da Apple para design de interface e movimento físico e fluido, traduzida para a web. Use ao construir ou revisar interfaces orientadas por gestos, animações com mola, interações de arrastar/deslizar/folha, momentum e transições interrompíveis, materiais translúcidos e profundidade, tipografia (dimensionamento óptico, tracking, entrelinha), movimento reduzido ou os fundamentos de design (feedback, consistência espacial, contenção) por trás das interfaces no estilo Apple.

skills/skills/ask-sonner

Guia para Sonner, a biblioteca de toasts do React — instale e configure o Toaster, escolha a chamada toast() certa, toasts de promise e loading, atualização, dispensa e persistência de toasts, estilização, temas e ícones, posicionamento e múltiplos toasters. Use ao trabalhar com Sonner ou ao solucionar problemas — toasts que não aparecem, aparecem duas vezes, perdem os estilos, ignoram classes do Tailwind, ficam atrás de um modal ou não seguem o modo escuro.

skills/skills/emil-design-eng

Esta habilidade codifica a filosofia de Emil Kowalski sobre polimento de UI, design de componentes, decisões de animação e os detalhes invisíveis que fazem o software parecer ótimo.

skills/skills/find-animation-opportunities

Pesquise em um codebase ou UI por lugares que não animam mas deveriam, e rejeite tudo o que não deveria. Somente leitura; propõe movimento com valores exatos, não o implementa. Use quando o usuário perguntar "o que poderia ser animado aqui?" ou quiser "deixar isso mais vivo". Para corrigir animações existentes, use improve-animations ou review-animations.

skills/skills/improve-animations

Analisar o código de animação e movimento de uma base de código como um consultor sênior de motion, e então produzir uma auditoria priorizada e planos de implementação autocontidos para outros agentes (ou modelos mais baratos) executarem. Apenas leitura do código-fonte — planeja melhorias, não as aplica. Use quando o usuário pedir para "melhorar as animações", "auditar o movimento", "deixar este aplicativo com uma sensação melhor", ou quiser um roteiro de correções de animação em vez de uma revisão de uma única alteração.

skills/skills/pick-ui-library

Escolha a biblioteca certa para uma determinada tarefa de frontend a partir de uma lista selecionada e opinativa — números, entradas OTP, gráficos, menus de comando, virtualização, arrastar e soltar, toasts, estado, estilização e mais. Só é executado quando invocado explicitamente; não é acionado por conta própria.

skills/skills/prototype

Crie múltiplas versões genuinamente diferentes de uma peça de UI que você descrever, renderizadas atrás de um seletor visual para que você possa alternar entre elas ao vivo e promover a que parecer mais adequada. Só é executado quando invocado explicitamente; não é acionado por conta própria.

skills/skills/review-animations

Revisa o código de animação e movimento contra um alto padrão de qualidade derivado