Astro Animations Skill

Purpose

Provides animation patterns that enhance UX without harming performance or accessibility. All animations must serve a functional purpose and respect user motion preferences.

Core Rules

1. Purpose over polish — Every animation should serve UX
2. Performance first — Use CSS, avoid JS where possible
3. Respect preferences — Honor prefers-reduced-motion
4. Subtle over flashy — Enhance, don't distract
5. Fast — Animations under 300ms for interactions
6. No layout shift — Animations must not cause cumulative layout shift
7. Progressive enhancement — UI must work without animations
8. Intersection Observer — Use for scroll-based reveals
9. View Transitions API — Leverage for page transitions in Astro
10. Loading feedback — Always show loading states with skeletons or spinners