Animations Skill

Skill de animacao para Claude Code baseada nos principios de Emil Kowalski. Sites com IA que nao parecem genericos.

O que é

Animations Skill

Sites gerados por IA tendem a ter uma qualidade que os torna imediatamente reconheciveis como genericos — animacoes que ignoram fisica, transicoes com easing errado, elementos que aparecem sem inercao. A Animations Skill de Emil Kowalski resolve isso codificando anos de experiencia em Vercel e Linear diretamente no comportamento do Claude.

O skill implementa um framework de decisao antes de qualquer linha de codigo: a animacao precisa existir? Qual o proposito funcional? Qual easing serve o contexto? Quanto tempo? Essa cadeia de perguntas elimina animacoes desnecessarias e garante que cada movimento tenha intencao — o mesmo processo mental de um design engineer experiente.

Com foco em performance real (transform e opacity sobre tudo), acessibilidade nativa (prefers-reduced-motion respeitado por padrao) e padroes de interacao gestual com fisica convincente, o resultado sao interfaces onde nada parece fora do lugar. As animacoes ficam invisiveis individualmente — e o que o usuario sente e que o produto simplesmente funciona bem.

Como funciona

Principais recursos

Decision Framework

Guia o Claude a perguntar: esta animacao precisa existir? Qual o proposito? Qual easing? Qual duracao? Elimina animacoes desnecessarias antes de codificar.

Easing e Duracao

Enforce animacoes de UI abaixo de 300ms com curvas de easing customizadas em vez de defaults do CSS. Nada de linear ou ease-in em interacoes.

Performance GPU

Prioriza transform e opacity para animacoes com aceleracao por hardware. Evita propriedades que disparam layout ou paint, mantendo 60fps garantidos.

Interacoes Gestuais

Implementa momentum-based dismissal, boundary damping e friction animations. Touch interactions que se comportam como objetos fisicos reais.

Acessibilidade

Respeita prefers-reduced-motion automaticamente. Remove hover states em touch devices. Nenhuma animacao prejudica usuarios com sensibilidade a movimento.

Componentes com Taste

Patterns de press feedback com scale(0.97), popovers origin-aware, tooltip delays que pulam na repeticao. Detalhes invisiveis que criam a experiencia.

Tutorial

Instalando a Animations Skill no Claude Code

1. Instalar via skills.sh (recomendado)

# Instala o skill emil-design-eng direto no projeto
npx skills add emilkowalski/skills/emil-design-eng

# Ou instala o skill de review de animacoes
npx skills add emilkowalski/skills/review-animations

2. Instalacao manual (alternativa)

# Cria a pasta de skills no projeto
mkdir -p .claude/skills/emil-design-eng

# Baixa o SKILL.md do repositorio oficial
curl -o .claude/skills/emil-design-eng/SKILL.md \
  https://raw.githubusercontent.com/emilkowalski/skills/main/skills/emil-design-eng/SKILL.md

3. Ativar no Claude Code

# No terminal do Claude Code, use o skill assim:
/emil-design-eng

# Ou referencie no prompt:
# "Use the emil-design-eng skill to audit the animations in this component"
# "Apply Emil's animation principles to improve this transition"
# "Review my CSS animations using the review-animations skill"

4. Auditoria de animacoes existentes

# Pede ao Claude para revisar animacoes de um componente
/review-animations

# Exemplos de prompts eficazes:
# "Audit all animations in src/components/ using Emil's rules"
# "This modal animation feels wrong — apply the review-animations skill"
# "Check if my transitions respect prefers-reduced-motion"

5. Criar novos componentes com o skill ativo

# O Claude aplica os principios automaticamente quando o skill esta ativo:
# - Duracao maxima de 300ms para UI animations
# - Easing customizado (nunca linear/ease-in em interacoes)
# - transform/opacity prioritarios para GPU acceleration
# - scale(0.97) em press feedback de botoes
# - Tooltip delay que pula na segunda abertura rapida
# - prefers-reduced-motion respeitado por padrao

6. Verificar a instalacao

# Listar skills instalados
ls .claude/skills/

# Ver o conteudo do skill
cat .claude/skills/emil-design-eng/SKILL.md

# Testar no Claude Code
/skills  # lista todos os skills disponiveis no projeto

Comece agora

Explore o repositório, contribua ou integre na sua operação.

Ver no GitHub