Diseñador de Animaciones Web

Qué hace

Planea e implementa animaciones web con propósito (transiciones, hover, revelado al hacer scroll, microinteracciones) que refuerzan la usabilidad en vez de distraer. Prioriza el rendimiento (sin saltos de layout, soporte para movimiento reducido) y mantiene los cambios en revisión antes de fusionarlos a un sitio en vivo.

Cuándo usarla

• Una landing page o app se siente estática y necesita movimiento para guiar la atención
• Estás construyendo un funnel de GoHighLevel o sitio de cliente y quieres microinteracciones pulidas
• Una animación existente se siente tosca o afecta el rendimiento y necesita rehacerse

Pasos

1. Identifica los momentos específicos que se benefician de movimiento (entrada, hover, scroll, cambio de estado)
2. Elige la técnica más ligera adecuada: transición CSS, animación CSS o Framer Motion
3. Redacta la especificación: duración, curva de easing, disparador y alternativa para movimiento reducido
4. Implementa en una rama/preview, revisando saltos de layout y caídas de cuadros
5. Prueba en distintos tamaños de pantalla y con prefers-reduced-motion activado
6. Presenta el preview para aprobación antes de fusionar al sitio en vivo

La skill

---
name: web-animation-designer
description: Diseña transiciones de página, efectos hover, animaciones de scroll y microinteracciones fluidas usando Framer Motion y CSS.
---

# Diseñador de Animaciones Web

## 1. Resumen
Planea e implementa animaciones web con propósito (transiciones, hover, revelado al hacer scroll, microinteracciones) que refuerzan la usabilidad en vez de distraer. Prioriza el rendimiento (sin saltos de layout, soporte para movimiento reducido) y mantiene los cambios en revisión antes de fusionarlos a un sitio en vivo.

## 2. Cuándo Usarlo
- Una landing page o app se siente estática y necesita movimiento para guiar la atención
- Estás construyendo un funnel de GoHighLevel o sitio de cliente y quieres microinteracciones pulidas
- Una animación existente se siente tosca o afecta el rendimiento y necesita rehacerse

## 3. Pasos
1. Identifica los momentos específicos que se benefician de movimiento (entrada, hover, scroll, cambio de estado)
2. Elige la técnica más ligera adecuada: transición CSS, animación CSS o Framer Motion
3. Redacta la especificación: duración, curva de easing, disparador y alternativa para movimiento reducido
4. Implementa en una rama/preview, revisando saltos de layout y caídas de cuadros
5. Prueba en distintos tamaños de pantalla y con prefers-reduced-motion activado
6. Presenta el preview para aprobación antes de fusionar al sitio en vivo

## 4. Ángulo GoHighLevel
Aplica esto dentro de flujos de GoHighLevel (funnels, automatizaciones o reportes a clientes) donde se repita la misma tarea para una agencia o cuenta de cliente.

## 5. Reglas de Seguridad
- Siempre produce un borrador primero; nunca envíes, publiques o gastes dinero sin aprobación humana explícita.
- Nunca inventes datos, métricas o resultados — usa solo lo confirmado o marca claramente las estimaciones.
- Nunca pegues llaves de API, tokens o contraseñas en el chat; referencia los secretos por nombre desde un almacén seguro.

Para Claude Code, guárdala en ~/.claude/skills/web-animation-designer/SKILL.md. En Cursor, ChatGPT u otro asistente, pégala como instrucciones del proyecto.