Astro Animations Skill Skill

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

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

Animation Timing

| Type | Duration | Easing | |------|----------|--------| | Micro-interaction | 100-200ms | ease-out | | Reveal/Fade | 200-400ms | ease-out | | Slide | 300-500ms | ease-in-out | | Page transition | 200-300ms | ease-out |

References

CSS Utilities — Base animation classes and keyframes
Scroll Animations — Intersection Observer-based reveals
Micro-Interactions — Button hovers, form focus, success/error animations
Loading States — Skeleton loaders and shimmer effects
Page Transitions — View Transitions API implementation
Stagger Animations — Sequential reveal patterns
Reduced Motion — Accessibility best practices

Forbidden

❌ Animations without prefers-reduced-motion handling
❌ Animations over 500ms for UI feedback
❌ Animations that block interaction
❌ Gratuitous/decorative-only animations
❌ JS animations when CSS works
❌ Animations that cause layout shift
❌ Auto-playing animations without user control
❌ Animations that flash more than 3 times per second

Definition of Done

[ ] All animations respect reduced motion
[ ] Interaction animations under 300ms
[ ] Reveal animations under 500ms
[ ] No layout shift from animations
[ ] Loading states have skeleton/spinner
[ ] Page transitions smooth
[ ] Focus states animated
[ ] All animations tested with prefers-reduced-motion: reduce
[ ] Scroll animations use Intersection Observer
[ ] No animation blocks user interaction

Agent Skills: Astro Animations Skill

Install this agent skill to your local