animationslisted

Authors performant web animations CSS-first AND brainstorms the right feedback for an interaction via a verb-to-motion catalog. Covers GPU-safe properties, modern primitives (@starting-style, interpolate-size), View Transitions, scroll-driven timelines, state-choreography morphs, React state (Motion, AnimatePresence), advanced effects (Liquid Glass, glow, 3D tilt), external engines (Lottie, Rive), React Three Fiber, prefers-reduced-motion, AND perceived performance (skeleton loaders, optimistic UI, loader floor, predictive prefetch, stale-while-revalidate). Use when building transitions, hover effects, route changes, when an animation feels janky, when deciding what feedback an interaction should have, or when the app needs to feel snappier. Triggers on "animate this", "fade in", "hover effect", "liquid glass", "lottie", "rive", "ideal feedback", "how should X feel", "skeleton loader", "perceived performance", "feel faster", "optimistic UI", "/animations".
mthines/agent-skills · ★ 4 · Web & Frontend · score 80

Install: claude install-skill mthines/agent-skills

# Animations Produces or reviews web animations that hit 60 fps (or 120 fps on high-refresh displays), respect user motion preferences, and use the cheapest tool for the job — CSS first, the Web Animations API for runtime control, Motion when you need spring physics, gestures, or shared-layout animations, React Three Fiber when the rendering model itself needs to be three-dimensional. > **This `SKILL.md` is a thin index.** Detailed rules live in > [`rules/*.md`](./rules) and load on demand. Worked recipes live in > [`references/recipes.md`](./references/recipes.md). Drop-in HTML/CSS > snippets live in [`templates/`](./templates). --- ## Core Bet **Animate `transform`, `opacity`, and `filter` only.** Those are the three properties the browser composites on the GPU without triggering layout or paint on the main thread. Anything else (`width`, `height`, `top`, `left`, `margin`, `padding`, `box-shadow`, …) goes through layout or paint and will jank. Full table in [`rules/safe-properties.md`](./rules/safe-properties.md). For properties that *seem* unanimatable — `height: auto`, `display: none`, list reorders, route changes — modern CSS has native primitives that re-express them as GPU work. See [`rules/modern-css.md`](./rules/modern-css.md). --- ## Brainstorm Mode — interaction → feedback Use this entry point when the user asks **what** the animation should be, not **how** to build it. Examples that route here, not to the technical decision flow below: - *"What's the ide