Guia de leitura localizado
emil-design-engFinalidade, utilização e fonte
Essa habilidade incorpora a filosofia de Emil Kowalski sobre refinamento da interface do usuário, design de componentes, decisões de animação e os detalhes invisíveis que tornam o software excelente.
Fonte recuperada:
- Repositório de origem
- vercel-labs/open-agents
- SKILL.md
.agents/skills/emil-design-eng/SKILL.md- Estrelas do repositório
- 5,871
- Atualização do repositório
- 2026-08-29
- Classificação de Habilidades
- Fluxo de trabalho do agente
- Última coleta
Licença: MIT
Os trechos do fluxo de trabalho são auxiliares de leitura e não instruções executáveis do Codez. Nenhuma Skill de terceiros foi executada para gerar esta página.
Os trechos abaixo, que descrevem o propósito e o fluxo de trabalho, são material original, organizado e traduzido para facilitar a leitura. Eles são distintos da análise editorial da Codez, que possui uma etiqueta separada.
O que esta habilidade faz
Essa habilidade incorpora a filosofia de Emil Kowalski sobre refinamento da interface do usuário, design de componentes, decisões de animação e os detalhes invisíveis que tornam o software excelente.
Como funciona o fluxo de trabalho upstream
Quando usar molas
Interações de arrastar com inércia; Elementos que devem parecer "vivos" (como a Ilha Dinâmica da Apple); Gestos que podem ser interrompidos no meio da animação; Interações decorativas de rastreamento do mouse.
Passagem a montante · L143 ↗Engenharia de projeto
Você é um engenheiro de design com sensibilidade artesanal. Você cria interfaces onde cada detalhe se combina para criar algo que parece perfeito. Você entende que, em um mundo onde o software de todos é bom o suficiente, o bom gosto é o diferencial.
Passagem a montante · L6 ↗O paladar é algo que se aprende, não é inato.
Bom gosto não é uma questão de preferência pessoal. É um instinto treinado: a capacidade de enxergar além do óbvio e reconhecer o que eleva. Você o desenvolve cercando-se de trabalhos excelentes, refletindo profundamente sobre o porquê de algo parecer bom e praticando incansavelmente. Ao criar interfaces de usuário, não se limite a fazê-las funcionar. Estude por que as melhores interfaces proporcionam a sensação que proporcionam. Faça engenharia reversa de animações. Inspecione as interações. Seja curioso.
Passagem a montante · L12 ↗Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)Requisitos e configuração
Nenhuma passagem de requisitos resumida foi selecionada deste arquivo. Isso não significa que a Skill não tenha dependências. Verifique as instruções de configuração do repositório e os arquivos referenciados.
Limites e verificações de qualidade
Nunca anime a partir da escala (0)
Nada no mundo real desaparece e reaparece completamente. Elementos animados a partir descale(0)Parecem surgir do nada. Comece porscale(0.9)ou superior, combinada com opacidade. Mesmo uma escala inicial quase invisível faz com que a entrada pareça mais natural, como um balão que mantém uma forma visível mesmo quando murcho.
Comece com um teste seguro.
- Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
- Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
- Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis antes de permiti-las.
- Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.
Leia mais na fonte.
- Engenharia de projeto
- O paladar é algo que se aprende, não é inato.
- Detalhes invisíveis compostos
- A beleza é alavancagem.
- Formato de revisão (obrigatório)
- O Quadro de Decisão para Animação
- 1Isso deveria ser animado?
- 2Qual é o objetivo?
- 3Que tipo de suavização deve ser usada?
- 4Qual deve ser a velocidade?
- Desempenho percebido
- Animações de Primavera
- Quando usar molas
- interações de ratos baseadas em molas
- Configuração de mola
- Vantagem de interrupção
- Os botões devem ser responsivos.
- Nunca anime a partir da escala (0)
- Faça com que os popovers levem em consideração a origem.
- Dicas de ferramentas: ignorar atraso em visões subsequentes ao passar o cursor.
- Use transições CSS em vez de keyframes para interfaces de usuário interrompíveis.
- Use o desfoque para disfarçar transições imperfeitas.
- Animar estados de entrada com @starting-style
- traduzirY com porcentagens
- scale() também dimensiona os filhos.
- 3Transformações D para profundidade
- origem-da-transformação
- caminho de recorte para animação
- A forma embutida
- Abas com transições de cores perfeitas
Habilidades relacionadas
Tradução e escopo
Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.
Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.
- Fonte fixada
- Leia o original ↗
- Fonte recuperada
- Commit de origem
cf865e94de7729751c747171785b6ce57e7b178c- Fonte SHA-256
9d261c73de2c2c4dc5662ab20117b8e045c7b71958f8042acf037325444ebe6b