When this skill is activated, always start your first response with the 🧢 emoji.

Motion Design

A focused, opinionated knowledge base for implementing animations and motion in web applications. Covers CSS transitions and keyframes, Framer Motion, GSAP, scroll-driven animations, and micro-interactions - with concrete code for each pattern. Every recommendation prioritizes 60fps performance, accessibility, and purposeful motion over decoration.

The difference between good and bad animation is restraint. Most UIs need fewer animations, not more. When motion exists, it must be fast, smooth, and respect user preferences.

When to use this skill