83.3K+Baixar
Ir para o guia de uso
emil-design-engpor Emil Kowalski

Emil Design Eng Skill.

Uma skill do Claude Code e Codex para pesquisa UX: a filosofia de Emil Kowalski sobre refinamento de UI, design de componentes e decisões de animação.

  • UX & Research
Baixar OpenDesignVer guia de uso
emilkowalski/skills · skills/emil-design-eng/SKILL.mdSKILL.md
--- name: emil-design-eng description: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. --- ## Initial Response ## Core Philosophy ## Review Format (Required) ## The Animation Decision Framework ## Spring Animations ## Component Building Principles
Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 27.130 caracteres no total

01 O que faz

O que a Skill emil-design-eng 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

Essa skill dá aos agentes de código o julgamento de engenharia de design de Emil Kowalski para trabalho de interface: como decidir se algo deve animar, qual easing e duração usar, e como construir componentes que pareçam responsivos. Ela define padrões rígidos — animações de UI abaixo de 300ms, curvas cubic-bezier personalizadas em vez das curvas de easing nativas do CSS, nunca ease-in, nunca entradas com scale(0), popovers escalando a partir do seu gatilho.

Também cobre springs, técnicas de clip-path, manipulação de arrastar e gestos, regras de desempenho de GPU, movimento reduzido e uma tabela obrigatória em markdown de Antes/Depois para revisões de código. É voltada para designers e desenvolvedores que querem decisões de interface guiadas por bom gosto, em vez de conselhos genéricos sobre animação.

O que ele produz

  • Uma tabela de revisão em markdown com colunas Antes, Depois e Por quê, uma linha para cada problema encontrado
  • Variáveis CSS prontas para colar contendo as curvas de easing personalizadas recomendadas
  • Objetos de configuração de spring, com parâmetros de física no estilo Apple ou tradicionais
  • Uma lista de correções priorizada, extraída das categorias da Checklist de Revisão
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Condicione a Animação à Frequência

    Antes de escrever qualquer código de animação, decida com que frequência os usuários vão encontrar a interação.

  2. 02
    Nomeie o Propósito

    Toda animação deve responder por que ela anima, a partir da lista válida: consistência espacial, indicação de estado, explicação, feedback ou prevenção de mudanças abruptas.

  3. 03
    Escolha uma Curva Personalizada

    Escolha o easing de acordo com se o elemento entra, sai, se move ou apenas muda de cor, e então substitua as curvas nativas por cubic-beziers personalizadas mais marcantes.

  4. 04
    Defina a Duração

    Combine a duração com o tipo de elemento da tabela — pressionar botão 100-160ms, dropdowns 150-250ms, modais 200-500ms — e mantenha a UI abaixo do teto de 300ms.

  5. 05
    Aplique os Padrões de Componente

    Botões escalam para 0.97 em :active, entradas começam de 0.95 com opacidade em vez de scale(0), e popovers escalam a partir do gatilho enquanto modais permanecem centralizados.

  6. 06
    Use Springs Onde Elas Se Justificam

    Springs são adequadas para arrastar com momentum, gestos que podem ser interrompidos e interações deliberadamente decorativas.

02 Encontre o ideal para você

Quando Usar a Skill emil-design-eng

Use a skill emil-design-eng em Claude Code ou Codex quando o trabalho for pesquisa de UX deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

  • Revisar código de UI existente e obter uma tabela concreta de correções em vez de feedback vago
  • Construir componentes onde pequenos detalhes se acumulam em uma interface que parece certa
  • Trabalho de arrastar e deslizar em que o descarte deve responder à velocidade do gesto, não apenas à distância arrastada
  • Interfaces sensíveis a desempenho em que a animação via JS perde quadros enquanto a thread principal está ocupada

Conheça os Limites

  • Springs saltitantes em todo lugar: o efeito de rebote é evitado na maioria dos contextos de UI e reservado para arrastar-para-descartar e interações lúdicas
  • Movimento decorativo em visuais de dados funcionais, onde nenhuma animação seria melhor
  • Qualquer pessoa que queira uma fórmula para a combinação de opacidade e altura; o arquivo diz que é tentativa e erro
  • Tratar movimento reduzido como zero animação, o que o arquivo rejeita explicitamente

O Que Fornecer

  • A animação que você está prestes a escreverO framework espera que as quatro perguntas sejam respondidas em ordem antes que qualquer código de animação exista: se deve animar, por quê, qual easing, quão rápido.
  • Com que frequência os usuários a verãoFrequência é a primeira pergunta e orienta toda a decisão, desde nenhuma animação até permissão para adicionar encantamento.
  • Sua meta de suporte de navegadorAnimações de entrada usam @starting-style onde o suporte permite, caso contrário recorrem ao padrão de atributo data-mounted.

03 Dentro da skill

Regras que o Skill emil-design-eng Dá ao Claude Code e Codex

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

  1. Nunca Use ease-in

    ease-in atrasa o movimento inicial, exatamente o momento que o usuário observa mais atentamente, então um dropdown com ease-in de 300ms parece mais lento que ease-out na mesma duração.

  2. Nunca Entre a Partir de Scale(0)

    Nada no mundo real desaparece e reaparece completamente. Entradas começam em scale(0.9) ou mais, combinadas com opacidade, e a escala de pressão permanece sutil entre 0.95-0.98.

  3. Modais Mantêm Origem Central

    Popovers devem definir transform-origin para o seu gatilho, usando o var(--transform-origin) do Base UI, mas modais são a exceção explícita porque não estão ancorados a um gatilho.

  4. As Análises Usam uma Tabela Real

    Uma análise de UI deve gerar uma tabela markdown real com as colunas Before, After e Why, uma linha por problema. Uma lista com Before: e After: em linhas separadas é o formato errado.

  5. Restrinja o Hover a uma Media Query

    Animações de hover ficam dentro de @media (hover: hover) and (pointer: fine), porque dispositivos touch disparam hover ao tocar e geram falsos positivos.

  6. Mantenha o Stagger Curto e não Bloqueante

    Os delays de stagger variam entre 30-80ms entre itens; delays mais longos deixam a interface parecendo lenta, e o stagger é decorativo, então nunca deve bloquear a interação enquanto é reproduzido.

04 Coloque em prática

Instalar emil-design-eng em Claude Code ou Codex

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

Adicionar emil-design-eng a 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/emilkowalski/skills --skill emil-design-eng

Formato genérico da CLI skills para skills/emil-design-eng/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 the code for [the dropdown and the popover] in [component file]. The dropdown opens with ease-in over 300ms, the popover scales from center, and the entering panel animates from scale(0). Use the Before/After format and tell me what to change and why.

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:

  • Revise o trabalho no dia seguinte com um olhar renovado, já que imperfeições são mais fáceis de notar após uma noite de distância
  • Reduza temporariamente a duração para 2-5x do normal, ou use o inspetor de animação do navegador, para identificar problemas de timing
  • Percorra a animação quadro a quadro no Chrome DevTools para ver problemas de coordenação invisíveis na velocidade normal
  • Teste gavetas (drawers) e gestos de swipe em dispositivos físicos, conectando um celular via USB ao servidor de desenvolvimento local
  • Em câmera lenta, confirme que as propriedades animadas permanecem sincronizadas e que a origem e o easing parecem corretos

No OpenDesign emil-design-eng já vem incluso: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer 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
Emil Kowalski
Repository
github.com/emilkowalski/skills Branch main
Arquivo da skill
skills/emil-design-eng/SKILL.md Checksum de conteúdo registrado na verificação; commit d23d7f8
License
MIT De LICENSE.
Estrelas do repositório
37.516 Snapshot do GitHub tirado em 2026-09-14 para todo o repositório emilkowalski/skills, que contém 9 skills neste catálogo. Não é uma avaliação ou contagem de uso para emil-design-eng.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. Filosofia CentralO bom gosto é treinado, detalhes imperceptíveis se acumulam, e a beleza é um diferencial real.
  2. Formato de Análise (Obrigatório)Exige uma tabela markdown Before/After/Why e mostra o formato de lista proibido.
  3. O Framework de Decisão de AnimaçãoQuatro perguntas ordenadas: frequência, propósito, easing, duração, além da performance percebida.
  4. Animações com SpringQuando springs se encaixam, rastreamento de mouse com useSpring, e dois estilos de configuração.
  5. Princípios de Construção de ComponentesFeedback de pressão, evitar scale(0), origem de popover, delays de tooltip, transitions em vez de keyframes, blur.
  6. Domínio de CSS TransformTranslates em porcentagem, escalonamento de filhos, profundidade 3D, e âncoras de transform-origin.
  7. clip-path para AnimaçãoRevelações com inset para overlays, tabs, hold-to-delete, revelações no scroll, sliders de comparação.
  8. Interações de Gesto e ArrastoDismissal por velocidade, amortecimento de limites, captura de pointer, proteção multi-touch, fricção.
  9. Regras de PerformanceAnime apenas transform e opacity, evite recálculo de variáveis CSS, prefira CSS sob carga.
  10. AcessibilidadeMovimento reduzido mantém opacity e color, remove o movimento; hover restrito por media query.
  11. Os Princípios do Sonner (Construindo Componentes Amados)Seis princípios do Sonner sobre DX, padrões, nomenclatura, casos extremos, transições, documentação.
  12. Checklist de RevisãoTabela de problemas comuns e suas correções prescritas, de transition-all a stagger ausente.
A Descrição da Própria Skill
"Esta skill 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 excelente."

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

Emil Design Eng

Execute emil-design-eng em uma Tarefa Real de Pesquisa de UX.

A skill emil-design-eng é integrada ao OpenDesign. Baixe o app, escolha a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng