emil-design-eng (emilkowalski/skills)

Avaliação

Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC de teste Windows dedicado, com um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (tratamento), ausente (grupo de controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo do prompt de uma frase), 2 execuções por grupo por tarefa, rede desligada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo). Os mesmos três briefings do teste de frontend-design (uma landing page da Tidepool, um dashboard de qualidade da água e um redesign da homepage de uma academia de escalada), escritos como arquivos HTML autocontidos únicos. Os prompts não mencionam animação nem a skill; o grupo com a skill simplesmente tem a skill instalada.

Comparação entre os braços

Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 26.2 / 30, veredito Recomendado.

Veredito: Recomendado (26.2 / 30). Fonte: emilkowalski/skills, skills/emil-design-eng, fixado no commit a81dbca. Instalação: npx skills@latest add emilkowalski/skills --skill emil-design-eng. Licença: MIT (LICENSE do repositório).

O que é

A skill emil-design-eng de emilkowalski/skills: as regras de engenharia de design de Emil Kowalski para polimento de UI, cerca de 4.000 palavras em um único SKILL.md. Ela cobre quando animar (e quando não animar), curvas ease-out personalizadas em vez dos padrões, durações de 150-300 ms, animar apenas transform e opacity, feedback ao pressionar (scale(0.97) em :active), nunca animar a partir de scale(0), stagger, condicionar o hover com (hover: hover), movimento reduzido e detalhes invisíveis como áreas de toque. Sem scripts.

Como testamos

Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC de testes Windows dedicado, com um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (com a skill), ausente (controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo do prompt de uma frase), 2 execuções por grupo por tarefa, rede desativada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo).

Os mesmos três briefings do teste frontend-design (uma landing page da Tidepool, um painel de qualidade da água e um redesign da página inicial de uma academia de escalada), escritos como arquivos HTML únicos e autossuficientes. Os prompts não mencionam animação nem a skill; o grupo com a skill simplesmente tem a skill instalada.

1. Nova landing page a partir de um briefing — Crie um site de uma página para a Tidepool, uma marca de snacks de algas em pequenos lotes vendida por assinatura (três sabores, $14/caixa, envio mensal). Escreva um único index.html autossuficiente com CSS inline e JS mínimo apenas se necessário. Sem frameworks, sem build st…
2. Interface de painel com muitos dados — Construa uma página de painel para uma equipe municipal de monitoramento da qualidade da água: leituras atuais de 6 estações (pH, turbidez, cloro, temperatura), uma tendência de 7 dias para cada uma e um painel de alertas. Um único dashboard.html autossuficiente com CSS/JS inline e dados fixos no có…
3. Remodelar uma página sem graça existente — old.html é a página inicial atual da Granite Peak Climbing Gym (Boulder, CO). Redesenhe-a em new.html: mantenha todo o conteúdo real (preços, aulas, horários, endereço), mas faça a página parecer pertencer a esta academia específica. HTML/CSS autossuficiente, sem fra…

A pontuação é programática (testes ocultos / recuperação de problemas plantados / verificações de restrições / renderização+OCR quando relevante), 0–5 por execução. Nenhum juiz LLM decidiu qualquer pontuação. Como esta skill trata de movimento e detalhes de interação que uma captura de tela não mostra, a pontuação é uma checklist baseada em regras executada sobre o CSS gerado (10 verificações: feedback ao pressionar em :active, cubic-bezier personalizado, sem ease-in/linear/ease padrão, sem transition: all, apenas transform/opacity/cor animados, durações <= 300 ms, movimento reduzido, stagger, sem scale(0), hover condicionado por (hover: hover)), 0-5 por execução. Isso está muito alinhado às próprias regras da skill, então mede "seguiu a skill", não "a página ficou melhor".

Resultados

A frase única dada ao terceiro grupo: "Polir como um engenheiro de design: curvas de easing personalizadas (ease-out para entradas, nunca o padrão ou ease-in), durações de 150-300 ms, animar apenas transform e opacity, feedback ao pressionar como scale(0.97) em :active, nunca animar a partir de scale(0), escalonar entradas, respeitar prefers-reduced-motion e caprichar nos detalhes invisíveis (estados hover, active e focus, áreas de toque de 44 px)."

Pontuação média: 3.33 sem a skill vs 4.75 com a skill (delta +1.42). Tokens por execução: 133k vs 149k (1.12x); tempo 178s vs 163s. Grupo prompt de uma frase: 4.5 (ganho da skill sobre o prompt de uma frase: +0.25; ganho do próprio prompt de uma frase sobre nenhuma skill: +1.17); tokens do prompt de uma frase: 127k por execução, então a skill custa 1.17x o prompt de uma frase.

O que aconteceu

• O Codex sem skill nunca escreve feedback ao pressionar nem uma curva de easing personalizada: 0/6 páginas de controle têm uma regra de escala em :active ou um cubic-bezier, contra 6/6 do grupo de uma frase e 6/6 (pressão) e 5/6 (curva) com a skill. Pontuação 3.33 no controle, 4.50 em uma frase e 4.75 com a skill.
• A única regra que o prompt de uma frase não trazia, condicionar estilos de hover com @media (hover: hover), foi seguida por 5/6 páginas com a skill e 0/12 das outras páginas. É toda a margem da skill sobre a frase (+0.25).
• Bons hábitos já estavam presentes em toda parte: sem transition: all, apenas transform/opacity/cor animados, suporte a movimento reduzido, sem scale(0). O controle acertou esses pontos 6/6 vezes, então a skill acrescenta as regras específicas de polimento, não o básico.
• Olhando as páginas às cegas (capturas de tela de desktop, embaralhadas), todas as 18 estão polidas e nenhuma está quebrada; a qualidade estática de design dos três grupos é indistinguível. A skill muda o comportamento que você sente, não o que uma captura de tela mostra.
• Custo: 149k tokens por execução, contra 133k (1.12x) e 127k do grupo de uma frase, o menor custo extra de skill que medimos entre skills de design.

Pontuações por dimensão

Limites deste teste

• As regras de movimento são verificadas a partir do texto CSS, não observando a página; uma transição pode existir e ainda assim parecer errada.
• A checklist deriva das próprias regras da skill, e o prompt de uma frase enuncia a maioria delas, então o grupo de uma frase é um limite superior para um prompt curto.
• Apenas três briefings de páginas estáticas; componentes interativos (dropdowns, toasts, drawers), nos quais a skill gasta a maior parte das palavras, não foram solicitados.
• n = 2 por grupo por tarefa: diferenças abaixo de ~1 ponto são ruído.
• A pontuação baseada em regras mede o que as verificações conseguem ver; ela não julga bom gosto nem se o resultado é o melhor possível.

Segurança

Consulte security.md. Varredura: 0 CRITICAL / 0 HIGH / 0 MEDIUM. Veredito: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que uma skill é segura.

Conclusão

Se você quer páginas com feedback ao pressionar, curvas ease-out e hover condicionado sem precisar pedir, a skill entrega isso com quase nenhum custo de tokens. Uma frase que lista as mesmas regras chega a 94% do caminho, então o valor da skill é você não precisar conhecer as regras.