Motion.dev Animations Skill MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Se activa automáticamente en las indicaciones de animación/Motion.dev
Patrones de animación de entrada, desplazamiento, gestos, micro y diseño.
Honores prefiere el movimiento reducido por defecto
Objetivos 60 fps+, paquete <50 KB, cambio de diseño cero
Transformaciones aceleradas por GPU; sin interferencias de los accesorios de diseño

Demo en vivo

Cómo se ve en la práctica

motion-dev-animations-skill.replay ▶ listo

0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "motion-dev-animations-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "motion-dev-animations-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
          "~/.claude/skills/motion-dev-animations"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Motion.dev Animations Skill

Agregue una entrada de héroe que se desvanece con escalonamiento

👤 Desarrolladores frontend ajustando páginas de destino ⏱ ~15 min beginner

Cuándo usarlo: Tu héroe se siente estático y quieres una animación de carga pulida.

Requisitos previos

Reaccionar + Movimiento.dev — npm i movimiento
Habilidad instalada — git clonar en ~/.claude/skills/

Flujo

Describe el efecto

Agregue una entrada gradual escalonada al H1, al subtítulo y al CTA del héroe. Escalonamiento de 60 ms.✓ Copiado

→ Código Motion.dev con motion.div, resorte de transición, retraso mediante escalonamiento
Retroceso de movimiento reducido

Asegúrese de que prefiere el movimiento reducido omita la animación limpiamente.✓ Copiado

→ useReducedMotion gancho o consulta de medios CSS aplicada

Resultado: Un héroe que se siente vivo sin sacrificar la accesibilidad.

Errores comunes

Animar propiedades que activan el diseño (ancho, superior) — Utilice transformar (traducir/escalar) en su lugar: acelerado por GPU, sin CLS

Combinar con: magic-ui-mcp

Cree revelaciones y paralaje activados por desplazamiento

👤 Desarrolladores frontend de diseño avanzado ⏱ ~25 min intermediate

Cuándo usarlo: Su página de destino de formato largo necesita secciones que se desplieguen al desplazarse.

Flujo

Revelar en desplazamiento

Anime cada sección a medida que ingresa a la ventana gráfica (una vez, umbral del 30%).✓ Copiado

→ useInView con una vez + cantidad
Primer plano de paralaje

Agregue un sutil desplazamiento de paralaje para el SVG decorativo de primer plano.✓ Copiado

→ useScroll + useTransform mapeo scrollYProgreso a y

Resultado: Experiencia de desplazamiento que agrega profundidad sin distracciones.

Errores comunes

Paralaje que provoca mareos — Mantenga las compensaciones pequeñas y omítalas por completo en "prefiere movimiento reducido".

Construya una tarjeta magnética arrastrable con elevación flotante

👤 Diseñadores de interacción / desarrolladores frontend ⏱ ~20 min intermediate

Cuándo usarlo: La tarjeta del producto necesita un pulido de microinteracción.

Flujo

elevación flotante

Al pasar el mouse: levante 4 px, escala de sombra sutil; volver de vacaciones.✓ Copiado

→ mientras flota con primavera; Transformaciones compatibles con GPU
Arrastre magnético

Hazlo arrastrable con límites elásticos, arrastra Elastic 0.15.✓ Copiado

→ arrastrar + arrastrarConstraints + arrastrarElastic configurado correctamente

Resultado: Una interacción de tarjeta encantadora sin el costo de rendimiento.

Animar el reordenamiento de la lista con diseño.

👤 Desarrolladores frontend creando tableros/galerías de tareas ⏱ ~25 min intermediate

Cuándo usarlo: Los reordenamientos de su lista resultan discordantes; Quieres transiciones suaves.

Flujo

Habilitar diseño en elementos

Agregue animaciones de diseño a los elementos de la lista; animar la entrada/salida también.✓ Copiado

→ <diseño de motion.li> + AnimatePresence
movimiento reducido

Deshabilite las animaciones de diseño en Prefiere movimiento reducido.✓ Copiado

→ Condicional aplicado; reorden instantáneo para los usuarios que lo solicitaron

Resultado: Reordenes que se sienten físicos pero que respetan las preferencias del usuario.

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

motion-dev-animations-skill + magic-ui-mcp

Magic UI para componentes prediseñados, motion.dev para bits personalizados

Utilice el marco de Magic UI para logotipos; motion.dev para ver un paralaje de desplazamiento personalizado a continuación.✓ Copiado

motion-dev-animations-skill + claude-design-auditor-skill

Auditar el movimiento para soporte de movimiento reducido

Después de agregar animaciones, realice una auditoría con alcance=movimiento para detectar regresiones de movimiento reducido.✓ Copiado

motion-dev-animations-skill + claude-code-design-skills

Figma-to-code + animaciones en un solo flujo

Convierta el marco Figma; luego agregue las animaciones de entrada y de desplazamiento especificadas.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
motion-dev (SKILL)	describe the animation (element + intent + constraints)	Cada vez que desee un código de animación, especialmente. con limitaciones de accesibilidad y rendimiento	0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguna
Tokens por llamada: Pequeño para código; grande sólo si descarta componentes complejos
Monetario: Gratis
Consejo: Describe claramente la intención de la animación: "desvanecimiento con un escalonamiento de 60 ms, duración de 200 ms" supera a "hazlo agradable".

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguna

Salida de datos: Ninguno de la habilidad; red no involucrada

El código de animación generado es tan seguro como su revisión: verifique las opciones de movimiento reducido y accesorios de diseño antes de enviarlo.

Resolución de problemas

Errores comunes y soluciones

Jank en desplazamiento

Comprueba que estás animando transformaciones, no accesorios de diseño (ancho/superior). Utilice will-change con moderación.

Verificar: Chrome DevTools → Performance → layout shift count

Animación ignorada en movimiento reducido.

Envuelva con useReducedMotion y cortocircuite las variantes de animación.

Verificar: System → Motion preferences → reduce motion; reload

Paquete grande después de agregar movimiento

Importa sólo lo que necesitas de 'motion/react'; Evite reexportar todo.

Verificar: Bundle analyzer on the chunks

Alternativas

Motion.dev Animations Skill vs otros

Alternativa	Cuándo usarla	Contrapartida
magic-ui-mcp	Quiere componentes animados prediseñados, no movimientos personalizados	Menos personalizado, más rápido de adoptar
cc-frontend-skill	Desea orientación general sobre el frontend, no específicamente sobre Motion.dev	No centrada en la animación
excalidraw-skill	Quieres diagramas, no animaciones web	Problema diferente

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills