·motion-framer
*

motion-framer

Biblioteca de animación moderna para React y JavaScript. Cree animaciones fluidas y listas para producción con componentes de movimiento, variantes, gestos (desplazar/tocar/arrastrar), animaciones de diseño, animaciones de salida de AnimatePresence, física de resorte y efectos basados ​​en desplazamiento. Úselo al crear componentes de interfaz de usuario interactivos, microinteracciones, transiciones de páginas o secuencias de animación complejas.

16Instalaciones·2Tendencia·@freshtechbro

Instalación

$npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer

Cómo instalar motion-framer

Instala rápidamente el skill de IA motion-framer en tu entorno de desarrollo mediante línea de comandos

  1. Abrir Terminal: Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.)
  2. Ejecutar comando de instalación: Copia y ejecuta este comando: npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer
  3. Verificar instalación: Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

Fuente: freshtechbro/claudedesignskills.

SKILL.md

Ver original

Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript that enables declarative, performant animations with minimal code. It provides motion components that wrap HTML elements with animation superpowers, supports gesture recognition (hover, tap, drag, focus), and includes advanced features like layout animations, exit animations, and spring physics.

Convert any HTML/SVG element into an animatable component by prefixing with motion.:

Every motion component accepts animation props like animate, initial, transition, and gesture props like whileHover, whileTap, etc.

Biblioteca de animación moderna para React y JavaScript. Cree animaciones fluidas y listas para producción con componentes de movimiento, variantes, gestos (desplazar/tocar/arrastrar), animaciones de diseño, animaciones de salida de AnimatePresence, física de resorte y efectos basados ​​en desplazamiento. Úselo al crear componentes de interfaz de usuario interactivos, microinteracciones, transiciones de páginas o secuencias de animación complejas. Fuente: freshtechbro/claudedesignskills.

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer
Categoría
*Creatividad
Verificado
Primera vez visto
2026-03-01
Actualizado
2026-03-10

Browse more skills from freshtechbro/claudedesignskills

Respuestas rápidas

¿Qué es motion-framer?

Biblioteca de animación moderna para React y JavaScript. Cree animaciones fluidas y listas para producción con componentes de movimiento, variantes, gestos (desplazar/tocar/arrastrar), animaciones de diseño, animaciones de salida de AnimatePresence, física de resorte y efectos basados ​​en desplazamiento. Úselo al crear componentes de interfaz de usuario interactivos, microinteracciones, transiciones de páginas o secuencias de animación complejas. Fuente: freshtechbro/claudedesignskills.

¿Cómo instalo motion-framer?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

¿Dónde está el repositorio de origen?

https://github.com/freshtechbro/claudedesignskills