/design-motion-principlesDesignAnimação que comunica, não que decora
Princípios de movimento e interação — duração, curva, propósito. Para animar com intenção em vez de por reflexo.
Para: Designers e devs frontend
O que é
Quase toda animação ruim tem a mesma causa: foi adicionada porque era possível, não porque comunicava algo. Movimento na interface tem função — dizer de onde um elemento veio, indicar que algo mudou, dar retorno de que o clique foi registrado.
A skill trabalha os parâmetros que definem se a animação ajuda ou irrita: duração (quase sempre mais curta do que você imagina — entre 150 e 300 ms), curva (acelerar e desacelerar como objeto físico, nunca linear) e propósito (o que essa animação está dizendo?).
Quando usar
- A interface tem animação e as pessoas dizem que parece lenta
- Ao construir transição entre telas ou estados
- Para padronizar durações no projeto inteiro — inconsistência de velocidade é percebida mesmo sem ser identificada
Quando não usar
- Em interface de uso intenso e repetitivo: painel administrativo que o usuário abre cinquenta vezes por dia quer velocidade, não elegância
- Quando o problema é performance — animação travando é questão de qual propriedade está sendo animada, não de princípio de design
O erro mais comum
Esquecer a preferência de movimento reduzido. Existe gente que sente desconforto físico com animação, e o sistema operacional já expõe essa preferência — respeitá-la custa uma media query. Ignorar não é decisão estética, é deixar parte do público de fora.
O outro erro é animar a entrada de tudo. Página em que cada bloco aparece deslizando ao rolar atrasa a leitura de quem só queria o texto.
Instalação
$ npx skills add anthropics/skillsOutras skills de Design
- /frontend-designInterface com hierarquia, espaçamento e contraste corretosVai além de 'fazer funcionar': cobra hierarquia visual, escala de espaçamento consistente e contraste que passa em acessibilidade.
- /brand-guidelinesManter consistência de marca no que a IA produzAplica paleta, tipografia e regras da marca a qualquer artefato gerado — para o material não sair com cara de template.
- /canvas-designPeças visuais em PNG e PDF com critério editorialGera arte para documento e apresentação seguindo composição, grade e tipografia — em vez de encher de efeito.