Repolode
Enviar
199-biotechnologies

199-biotechnologies/motion-dev-animations-skill

Una skill de Claude Code que genera animaciones web con Motion.dev para React, Next.js, Svelte y Astro, con pautas integradas de accesibilidad y rendimiento.

Ver en GitHub
Estrellas
194
Forks
34
Issues abiertos
0
Último commit
hace 7 meses

¿Qué es?

Este proyecto es una skill de Claude Code que enseña al asistente patrones de animación de Motion.dev para que pueda generar código de animación en TypeScript a partir de instrucciones en lenguaje natural, como añadir una animación de entrada para el hero, desplazamiento parallax o una lista que se pueda arrastrar. Está dirigido a React 19+, Next.js 15+, Svelte 5+ y Astro 4+, y también admite Vue mediante el paquete motion-v.

El código generado prioriza propiedades aceleradas por GPU (transform, opacity, filter), respeta prefers-reduced-motion e incluye gestión del foco mediante teclado. La skill abarca animaciones de entrada, efectos de desplazamiento, interacciones con gestos, microinteracciones y animaciones de layout, como reordenamientos FLIP, acordeones con AnimatePresence y transiciones entre pestañas con layoutId.

El repositorio está organizado para cargar el contenido progresivamente: primero se carga un archivo de instrucciones principal, y los ejemplos, la referencia de la API, las configuraciones predefinidas de spring, las plantillas iniciales y un validador de configuración se incorporan solo cuando hacen falta. Se instala clonándolo en el directorio de skills de Claude Code o añadiéndolo como submódulo de git.

Funciones clave

  • 01Genera código de animación de Motion.dev a partir de instrucciones en lenguaje natural dentro de Claude Code
  • 02Es compatible con React, Next.js App Router, Svelte, Astro y Vue mediante motion-v
  • 03Incluye animaciones de entrada, desplazamiento, gestos, microinteracciones y layout
  • 04Usa propiedades transform y opacity compatibles con la aceleración por GPU y respeta prefers-reduced-motion
  • 05Incluye patrones de ejemplo, configuraciones predefinidas de spring, plantillas iniciales y un validador de configuración

Casos de uso

  • Añadir una animación de entrada a la sección hero de una landing page en Next.js
  • Crear efectos parallax o de progreso vinculados al desplazamiento para un sitio de marketing
  • Crear listas que se puedan reordenar mediante arrastre o interacciones de botones al pasar el cursor y con efecto magnético
  • Añadir animaciones coherentes y accesibles a un proyecto de Svelte o Astro sin tener que consultar toda la API

Inicio rápido

  1. 1

    Clona la skill en la carpeta de skills de Claude Code

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

    Pídele a Claude Code que cree una animación usando lenguaje natural

Antes de usarlo

  • Es una skill de Claude Code, así que solo funciona dentro de Claude Code y no se ejecuta como una biblioteca independiente.
  • El README solo indica compatibilidad con React, Next.js, Svelte, Astro y Vue mediante un paquete independiente, por lo que no incluye otros frameworks.

Temas

#animation#motion-dev#claude-code#react#nextjs#svelte#scroll-animations#typescript#accessibility#animation-library

Preguntas frecuentes

¿Qué es motion-dev-animations-skill?
Una skill de Claude Code que genera animaciones web con Motion.dev para React, Next.js, Svelte y Astro, con pautas integradas de accesibilidad y rendimiento. Este proyecto es una skill de Claude Code que enseña al asistente patrones de animación de Motion.dev para que pueda generar código de animación en TypeScript a partir de instrucciones en lenguaje natural, como añadir una animación de entrada para el hero, desplazamiento parallax o una lista que se pueda arrastrar. Está dirigido a React 19+, Next.js 15+, Svelte 5+ y Astro 4+, y también admite Vue mediante el paquete motion-v.
¿motion-dev-animations-skill es gratuito? ¿Qué licencia tiene?
motion-dev-animations-skill es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿motion-dev-animations-skill sigue mantenido?
Sin commits en más de 6 meses. El último commit de motion-dev-animations-skill fue el 30 mar 2026.
¿Para qué puedo usar motion-dev-animations-skill?
Añadir una animación de entrada a la sección hero de una landing page en Next.js Crear efectos parallax o de progreso vinculados al desplazamiento para un sitio de marketing Crear listas que se puedan reordenar mediante arrastre o interacciones de botones al pasar el cursor y con efecto magnético Añadir animaciones coherentes y accesibles a un proyecto de Svelte o Astro sin tener que consultar toda la API
¿Cómo se instala motion-dev-animations-skill?
Clona la skill en la carpeta de skills de Claude Code: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations Pídele a Claude Code que cree una animación usando lenguaje natural
¿Dónde consigo motion-dev-animations-skill?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/199-biotechnologies/motion-dev-animations-skill

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados