Animaciones increíbles
para tus páginas o apps

Eres mi asistente de animaciones web. Vamos a hacer 4 cosas en orden.

## PASO 1 — Verificar Framer Motion
Revisa si framer-motion está en package.json.
Si no está, instálalo con: npm install framer-motion
Confirma cuando esté listo y pasa al siguiente paso.

## PASO 2 — Cuéntame sobre tu proyecto
Hazme estas dos preguntas y espera mis respuestas antes de continuar:

"Antes de armar tu demo de animaciones, cuéntame:

1. ¿En qué tipo de proyecto estás trabajando?
   (landing page, portafolio, app, tienda, dashboard...)

2. ¿Hay alguna animación o efecto que te gustaría ver?
   Algunos ejemplos:
   — Botones que rebotan al hacer clic
   — Cards que se levantan al pasar el cursor
   — Texto que aparece al hacer scroll
   — Un menú que reacciona al cursor como el dock de Mac
   — Elementos que entran con rebote al cargar la página

Si no se te ocurre nada, escribe 'sorpréndeme' y yo elijo por ti."

Espera mi respuesta. Si no respondo o digo que quiero continuar, usa ejemplos creativos y variados.

## PASO 3 — Demo interactiva
Crea el archivo framer-demo.html en la raíz del proyecto.

El archivo debe:
- Funcionar sin servidor (abrirse con doble clic en el navegador)
- Usar Framer Motion vía CDN
- Mostrar 5 animaciones adaptadas a lo que te dije (o variadas si dije 'sorpréndeme')
- Diseño oscuro (#1a1a1a de fondo), tipografía limpia, layout de grilla

Cada ejemplo debe tener:
- Título que describe qué hace la animación
- El elemento animado (botón, card, texto, etc.) que se pueda interactuar
- Una nota pequeña con los valores usados: stiffness, damping, mass

Los ejemplos deben cubrir estas técnicas:
1. Spring en hover (escala o movimiento con rebote)
2. Entrada animada al cargar la página (desde abajo o un lado)
3. AnimatePresence (algo que aparece y desaparece suavemente)
4. Un ejemplo relacionado con lo que me dijiste
5. Un ejemplo sorpresa que demuestre algo inesperado de Framer Motion

Cuando termines, dime exactamente la ruta del archivo para abrirlo.

## PASO 4 — Skill global de Framer Motion
Crea el archivo ~/.claude/skills/framer-motion.md con este contenido exacto:

---
Analiza el componente o la página en la que estoy trabajando y mejora sus
animaciones con Framer Motion.

Tu proceso:
1. Lee el componente e identifica CSS transitions o animaciones existentes
2. Identifica los momentos de interacción: hover, clic, scroll, mount/unmount
3. Propón 3-5 mejoras concretas usando springs de Framer Motion
4. Implementa las mejoras manteniendo el diseño visual intacto
   (mismos colores, tamaños, layout — solo cambia la física del movimiento)
5. Explica en 2-3 líneas qué cambió y por qué se siente mejor

Springs de referencia:
- Hover general:        { type: "spring", stiffness: 400, damping: 17 }
- Magnification dock:   { mass: 0.1, stiffness: 150, damping: 12 }
- Tooltips y popovers:  { type: "spring", stiffness: 500, damping: 30 }
- Entradas de página:   { type: "spring", stiffness: 260, damping: 20 }

Técnicas clave según el caso:
- useMotionValue + useTransform → animaciones que responden al cursor en tiempo real
- AnimatePresence            → entradas y salidas de elementos del DOM
- layout prop                → transiciones de layout automáticas sin calcular nada
- whileHover / whileTap      → interacciones simples sin estado extra
---

Cuando todo esté listo, dame un resumen de:
- Qué instalaste o verificaste
- Cómo abrir el demo (ruta exacta)
- Cómo usar la skill en el futuro: escribe /framer-motion en cualquier proyecto