Communitygithub.com

mblode/ui-animation

Crea, revisa y depura implementaciones de animación y movimiento en UI. Cubre resortes, gestos, interacciones de arrastre, revelaciones con clip-path, curvas de suavizado, temporización, recetas de transición CSS y revisión de animaciones.

¿Qué es ui-animation?

Esta habilidad está diseñada para desarrolladores e ingenieros de UI que necesitan asistencia especializada en la creación, revisión y depuración de animaciones y movimientos en interfaces de usuario. Soporta un amplio espectro de técnicas y herramientas: desde animaciones nativas con resortes (springs), gestos, interacciones de arrastre y revelaciones con clip-path, hasta curvas de suavizado, temporización y recetas de transición CSS. También es útil para revisar animaciones existentes y optimizar la fluidez de una interfaz. Compatible con plataformas como Claude Code, funciona con tecnologías como CSS transitions, keyframes, framer-motion y animaciones con resortes. Se activa con frases como 'agregar animaciones a', 'hacer que esto se sienta suave', 'revisar mis animaciones', 'debería animar esto', 'agregar un gesto de deslizamiento' o 'agregar una transición'. Para recrear movimiento a partir de una grabación de pantalla, se recomienda usar la habilidad reverse-engineer-animation; para dirección visual general, use ui-design; y para efectos de texto específicos como máquina de escribir, revelación de líneas o construcciones cinéticas, use animate-text.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace ui-animation?

Crea, revisa y depura implementaciones de animación y movimiento en UI. Cubre resortes, gestos, interacciones de arrastre, revelaciones con clip-path, curvas de suavizado, temporización, recetas de transición CSS y revisión de animaciones. Úsalo al diseñar, implementar o revisar movimiento, transiciones CSS, keyframes, framer-motion, animaciones con resortes, o al preguntar "agregar animaciones a", "hacer que esto se sienta suave", "revisar mis animaciones", "debería animar esto", "agregar un gesto de deslizamiento" o "agregar una transición". Para recrear movimiento a partir de una grabación de pantalla o video, usa reverse-engineer-animation; para dirección visual y estilo general, usa ui-design; para especificaciones de efectos de texto con nombre (máquina de escribir, revelación de líneas, construcciones cinéticas), usa animate-text.

Skills relacionados