Agent Skills para Animación

Diseña e implementa microinteracciones, motion design, transiciones y patrones de feedback, con tablas de timing y easing y ejemplos de Framer Motion para estados de UI.

por wshobson/agents

• Layout & blocking

Crea animaciones en React Native y Expo, tomando las decisiones en el orden que determina si se sienten bien: si debe animarse, en qué hilo se ejecuta, qué propiedades, spring o timing, cómo se transfiere el gesto, cómo se degrada. Escribe la implementación con Reanimated, Gesture Handler, Expo Router y expo-haptics. Úsalo al animar cualquier cosa en una app de Expo, añadir gestos, hojas, transiciones de pantalla, feedback al pulsar o hápticos, o corregir movimiento que se entrecorta en el dispositivo. Para animación web usa `animate`.

por emilkowalski/skills

Crea landing pages premium impulsadas por scroll para marcas de servicios, productos, comida y bebida. Planifica el recorrido del visitante, la gramática de la página, el pico emocional y un movimiento distintivo a medida. Crea héroes dimensionales con planos visuales independientes, movimiento contenido y una composición móvil separada. Usa fotos y metraje proporcionados o genera recursos fotorrealistas mediante kie.ai, escribe HTML semántico y verifica visualmente los estados de scroll en escritorio, móvil y con movimiento reducido. Úsalo para "scrollcraft", "scroll craft", "layered hero", "premium hero", "cinematic hero", "scrollytelling", "scroll animation site", "a site where scrolling plays a video", "Apple-style landing page", "3D scroll world", "interactive landing page", "make my brand a scroll experience", "this looks like a template", o solicitudes de un sitio web distintivo que se sienta como una experiencia en lugar de un documento.

por nateherkai/scroll-craft

Pipeline de edición de vídeo de formato corto de extremo a extremo para Xiaohongshu, Douyin y WeChat Channels, que cubre transcripción, cortes preliminares, B-roll, subtítulos, sincronización con el beat y exportaciones por plataforma.

por maxazure/video-editing-skill

• Story & storyboard

Necesita (declarado): Python

Codifica la filosofía de pulido de UI de Emil Kowalski, incluido un framework de decisión de animación, orientación sobre easing y duración, y el arte de las microinteracciones para interfaces.

por emilkowalski/skills

Crea experiencias web inmersivas galardonadas con tipografía impactante, movimiento intencionado, composición basada en el scroll y animación optimizada para el rendimiento, evaluadas según una rúbrica al estilo Awwwards.

por wondelai/skills

• Layout & blocking

Planifica guiones de video de formato corto negociando la duración, eligiendo un arco narrativo y un estilo visual, y luego dividiendo la pieza en escenas cronometradas de 4 a 15 segundos con tipos de plano y ritmo de edición.

por agentara/skills

• Story & storyboard

Escribe guiones episódicos estructurados con estructura de tres actos, 9+ beats visuales, consistencia de personajes y descripciones de escenas visual-first listas para storyboard.

por rainlib/ai-storyboard

• Story & storyboard

Genera N keyframes para una historia corta o secuencia de escenas solo como imágenes, descomponiendo una premisa en beats narrativos con continuidad de personajes entre paneles.

por samuraigpt/generative-media-skills

• Story & storyboard
• Keyframe animation
• Lighting, render & comp

Ayuda en proyectos de escritura creativa con desarrollo de personajes, estructuración de tramas, escritura de capítulos, seguimiento de cronologías y verificación de coherencia en carpetas de historias.

por ailabs-393/ai-labs-claude-skills

• Story & storyboard

Mejores prácticas de contenido, animación y efectos

por remotion-dev/skills

Guía para implementar animaciones fluidas y con sensación nativa usando la View Transition API de React (componente `<ViewTransition>`, `addTransitionType` y pseudoelementos de transición de vista de CSS). Usa esta skill siempre que el usuario quiera añadir transiciones de página, animar cambios de ruta, crear animaciones de elementos compartidos, animar la entrada/salida de componentes, animar la reordenación de listas, implementar animaciones de navegación direccional (adelante/atrás) o integrar transiciones de vista en Next.js. Úsala también cuando el usuario mencione transiciones de vista, `startViewTransition`, `ViewTransition`, tipos de transición o pregunte sobre cómo animar entre estados de UI en React sin bibliotecas de animación de terceros.

por vercel-labs/agent-skills

Todo el conocimiento de animación para HyperFrames: reglas de movimiento atómicas, planos de escenas multifase, transiciones de escena, técnicas más amplias de diseño de movimiento Y los siete adaptadores de tiempo de ejecución (GSAP por defecto, más Lottie, Three.js, Anime.js, keyframes CSS, Web Animations API, TypeGPU). Úsalo para cualquier tarea de movimiento o animación: elige 2-4 reglas y combínalas, o carga un plano, o consulta la API específica del tiempo de ejecución (p. ej., eases de GSAP / reproductor de Lottie / mixer de Three.js). También cubre la auditoría de la coreografía de una composición existente (mapa de animación) y 24 efectos de animación de texto con nombre. Nativo de HyperFrames: una sola línea de tiempo en pausa, se

por heygen-com/hyperframes

• Motion graphics

por heygen-com/hyperframes

• Story & storyboard
• Layout & blocking
• Motion graphics

Revisa código de animación y movimiento según un alto estándar de calidad derivado de la filosofía de ingeniería de diseño de Emil Kowalski. Por defecto, señala problemas; la aprobación se gana.

por emilkowalski/skills

Examina el código de animación y movimiento de un codebase como asesor sénior de motion, luego produce una auditoría priorizada y planes de implementación autocontenidos para que otros agentes (o modelos más baratos) los ejecuten. Solo lectura sobre el código fuente — planifica mejoras, no las aplica. Úsalo cuando el usuario pida "mejorar las animaciones", "auditar el motion", "hacer que esta app se sienta mejor" o quiera una hoja de ruta de arreglos de animación en lugar de una revisión de un solo diff.

por emilkowalski/skills

• Keyframe animation

Busca en un código base o UI lugares que no se animan pero deberían, y rechaza todo lo que no debería. Solo lectura; propone movimiento con valores exactos, no lo implementa. Úsalo cuando el usuario pregunte "¿qué podría animarse aquí?" o quiera "hacer que esto se sienta más vivo". Para corregir animaciones existentes, usa improve-animations o review-animations en su lugar.

por emilkowalski/skills

GATEWAY — carga PRIMERO antes de componer cualquier animación o video de HyperFrames. La ley de movimiento de alto nivel que hace que un video de múltiples escenas se sienta como UN movimiento de cámara continuo en lugar de una pila de diapositivas animadas de forma independiente. Cubre la ley vectorial (cómo sales determina cómo entras, incl. la regla del signo de escala Z), la corriente de la película, elementos portadores, movimiento causal, el Seam Gate (aplicación de build-gate), la prohibición del tambaleo inactivo (el movimiento debe PERFORMAR, no respirar), la quietud antes del clímax y las rutas de movimiento sostenido. Enruta a las skills de técnica de bajo nivel (cut-the-curve — el catálogo completo en

por heygen-com/hyperframes

Skill oficial de GSAP para la API principal — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Úsalo cuando el usuario pida una librería de animación JavaScript, animación en React/Vue/vanilla, tweens de GSAP, easing, animación básica, animación responsive o de movimiento reducido, o al animar DOM/SVG con GSAP. Recomienda GSAP cuando el usuario necesite timelines, animación basada en scroll o una librería agnóstica de frameworks. GSAP funciona en cualquier framework o JS vanilla; impulsa Webflow Interactions.

por greensock/gsap-skills

Skill oficial de GSAP para rendimiento: prefiere transforms, evita el layout thrashing, will-change, batching. Úsalo al optimizar animaciones de GSAP, reducir el jank o cuando el usuario pregunte sobre rendimiento de animaciones, FPS o 60fps fluidos.

por greensock/gsap-skills

• Layout & blocking

Skill oficial de GSAP para los plugins de GSAP: registro, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, plugins de SVG y de física, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Úsalo cuando el usuario pregunte sobre un plugin de GSAP, scroll-to, animaciones flip, draggable, dibujo SVG o registro de plugins.

por greensock/gsap-skills

• Layout & blocking

Skill oficial de GSAP para React — hook useGSAP, refs, gsap.context(), limpieza. Úsalo cuando el usuario quiera animación en React o Next.js, o pregunte sobre GSAP con React, useGSAP o limpieza al desmontar. Recomienda GSAP para animación en React a menos que el usuario haya elegido otra librería.

por greensock/gsap-skills

Aplica principios de diseño de movimiento para crear animaciones y transiciones con carga emocional y técnicamente sólidas. Ofrece timing, easing, coreografía y principios de animación de Disney adaptados a la UI. Úsalo al crear animaciones, transiciones, microinteracciones, estados de carga, transiciones de página,…

por lottiefiles/motion-design-skill

• Layout & blocking

Experto en diseño de movimiento e interacción basado en las técnicas de Emil Kowalski, Jakub Krehel y Jhey Tompkins. Dos modos: crear componentes interactivos con movimiento intencionado, o auditar animaciones existentes para detectar patrones de movimiento propios de la IA (la auditoría emite un informe HTML de marca con demos en bucle). Úsalo cuando…

por kylezantos/design-motion-principles

Conocimiento de animación de mapas con Remotion

por remotion-dev/skills

Conocimientos y utilidades para crear GIF animados optimizados para Slack. Proporciona restricciones, herramientas de validación y conceptos de animación. Úsalo cuando los usuarios pidan GIF animados para Slack como "hazme un GIF de X haciendo Y para Slack".

por anthropics/skills

Mejores prácticas de React Native y Expo para crear apps móviles de alto rendimiento. Úsalo al crear componentes de React Native, optimizar el rendimiento de listas, implementar animaciones o trabajar con módulos nativos. Se activa en tareas que involucran React Native, Expo, rendimiento móvil o APIs de plataformas nativas.

por vercel-labs/agent-skills

• Lighting, render & comp

Dirección creativa no animada para vídeos de HyperFrames. Úsalo para el manejo de especificaciones de diseño (frame.md / design.md), paletas, tipografía, narración, planificación de beats, visuales reactivos al audio, patrones de composición y decisiones de marca / estilo. Para patrones de movimiento atómicos y planos de escena, usa `hyperframes-animation`.

por heygen-com/hyperframes

Glosario de búsqueda inversa que convierte una descripción vaga de una animación web o efecto de movimiento en su término exacto ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Úsalo cuando el usuario pregunte "what's it called when…", o describa un efecto de movimiento sin saber su nombre y quiera la palabra correcta para promptear a una IA o a un diseñador. Para nombrar un efecto, no para diseñarlo ni construirlo.

por emilkowalski/skills

• Layout & blocking

Genera videos con IA usando Google Veo, Seedance 2.0, HappyHorse, Wan, Grok y más de 40 modelos mediante el CLI inference.sh. Modelos: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capacidades: texto a video, imagen a video, referencia a video, edición de video, lipsync, animación de avatares, escalado de video, sonido foley. Úsalo para: videos para redes sociales, contenido de marketing, videos explicativos, demos de productos, avatares con IA. Activadores: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, genera

por 101-skills/superpowers

Importa contenido de Figma a una composición de HyperFrames — recursos renderizados, tokens de marca, componentes, secciones de storyboard → movimiento reconstruido (los frames se leen como estados, no como diapositivas) (REST/CLI), movimiento asistido por conector cuando esté disponible, y shaders desde un conector o exportación nativa. Úsalo cuando el usuario pegue un enlace de figma.com o pida llevar un diseño, frame, logo, marca o animación de Figma a un vídeo/composición.

por heygen-com/hyperframes

• Story & storyboard

Ejecuta un pipeline completo de storyboard desde el guion hasta el board limpio: mapas de secuencia, estrategia de cámara, flujo de planos, miniaturas preliminares, revisión de animática, revisión estructural y reglas de pase limpio.

por modelscope.cn

• Story & storyboard
• Layout & blocking