Communitygithub.com

mblode/ui-animação

Cria, revisa e depura implementações de movimento e animação de UI. Cobre molas, gestos, interações de arrasto, revelações por clip-path, curvas de suavização, temporização, receitas de transição CSS e revisão de animações.

O que é ui-animação?

Esta habilidade é uma ferramenta especializada para desenvolvedores e agentes de IA trabalhando com animações em interfaces de usuário. Ela auxilia no design, implementação e revisão de movimentos suaves e animações, abrangendo conceitos como molas (springs), gestos, interações de arrasto, revelações por clip-path, curvas de suavização (easing) e temporização. A habilidade é útil para melhorar a fluidez de interfaces, revisar animações existentes e sugerir transições adequadas. Suporta tecnologias como CSS Transitions, Keyframes, Framer Motion e animações spring, sendo ativada por comandos como "adicionar animações a", "tornar isso suave", "revisar minhas animações" ou "adicionar um gesto de deslizar". Para recriar movimentos a partir de vídeos ou gravações de tela, recomenda-se usar a habilidade `reverse-engineer-animation`; para direção visual geral, `ui-design`; e para efeitos de texto nomeados, `animate-text`.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mblode/agent-skills/tree/main/skills/ui-animation

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que ui-animação faz?

Cria, revisa e depura implementações de movimento e animação de UI. Abrange molas, gestos, interações de arrasto, revelações por clip-path, curvas de suavização, temporização, receitas de transição CSS e revisão de animações. Use ao projetar, implementar ou revisar movimentos, transições CSS, keyframes, framer-motion, animações spring, ou ao perguntar "adicione animações a", "torne isso suave", "revise minhas animações", "isso deveria animar?", "adicione um gesto de deslizar" ou "adicione uma transição". Para recriar movimentos a partir de uma gravação de tela ou vídeo, use reverse-engineer-animation; para direção visual geral e estilo, use ui-design; para especificações de efeitos de texto nomeados (máquina de escrever, revelação de linha, builds cinéticos), use animate-text.

Habilidades Relacionadas