Web Animation Design
Design and implement web animations—easing, springs, stagger, and reduced-motion—that feel intentional for modals, pages, and microinteractions in React or CSS stacks.
Overview
web-animation-design is an agent skill for the Build phase that helps you choose easing, timing, and implementation patterns so web animations feel smooth, purposeful, and accessible.
Install
npx skills add https://github.com/connorads/dotfiles --skill web-animation-designWhat is this skill?
- Grounded in Emil Kowalski’s Animations on the Web (animations.dev) guidance for natural motion
- Triggers on easing, cubic-bezier, spring physics, keyframes, stagger, and GPU-friendly transform/opacity patterns
- Covers library paths: Framer Motion, React Spring, GSAP, and CSS transitions
- Addresses accessibility with prefers-reduced-motion and purposeful entrance/exit patterns
- Animation reviews MUST use markdown tables comparing before/after—not bullet lists
- Animation reviews require markdown table format—not Before/After list lines
- Initial invoke without a user question returns only a single readiness line
Adoption & trust: 513 installs on skills.sh; 14 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI animations feel abrupt, slow, or janky and you are unsure which easing, duration, or library API fits modals, lists, and page transitions.
Who is it for?
Frontend-focused solo builders shipping React or CSS-heavy SaaS, marketing sites, or extensions who want course-backed motion guidance on demand.
Skip if: Native iOS/Android animation systems, game engine tween pipelines, or teams that only need static design tokens with zero motion.
When should I use this skill?
User asks about animations, motion, easing, timing, springs, Framer Motion, GSAP, CSS transitions, stagger, prefers-reduced-motion, or says the UI feels janky or needs to be smoother.
What do I get? / Deliverables
You get concrete motion recommendations—and table-formatted reviews—that you can implement with CSS or Framer Motion, React Spring, or GSAP while honoring reduced-motion preferences.
- Easing, duration, and spring recommendations for the requested UI pattern
- Table-formatted before/after animation review when critiquing existing motion
- Implementation notes for transform/opacity-first, stagger, and reduced-motion variants
Recommended Skills
Journey fit
Build / frontend is the canonical shelf because the skill covers motion design and implementation for UI surfaces in the browser. Frontend matches triggers on transitions, transforms, Framer Motion, GSAP, CSS transitions, and component-level microinteractions.
How it compares
Motion design mentor aligned to animations.dev, not a generic component library install or a Lighthouse performance-only audit.
Common Questions / FAQ
Who is web-animation-design for?
Solo builders implementing web UI who want proactive help on easing, springs, transitions, and performance-friendly animation patterns.
When should I use web-animation-design?
During Build frontend work when designing modal, dropdown, tooltip, drawer, or page transitions, tuning hover microinteractions, or fixing animations users describe as janky.
Is web-animation-design safe to install?
It is advisory content about motion and code patterns; review the Security Audits panel on this Prism page before adding the skill to your agent.
SKILL.md
READMESKILL.md - Web Animation Design
# Web Animation Design A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course. ## Initial Response When this skill is first invoked without a specific question, respond only with: > I'm ready to help you with animations based on Emil Kowalski's animations.dev course. Do not provide any other information until the user asks a question. ## Review Format (Required) When reviewing animations, you MUST use a markdown table. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this: | Before | After | | ------------------------------------- | ----------------------------------------------- | | `transform: scale(0)` | `transform: scale(0.95)` | | `animation: fadeIn 400ms ease-in` | `animation: fadeIn 200ms ease-out` | | No reduced motion support | `@media (prefers-reduced-motion: reduce) {...}` | Wrong format (never do this): ``` Before: transform: scale(0) After: transform: scale(0.95) ──────────────────────────── Before: 400ms duration After: 200ms ``` Correct format: A single markdown table with | Before | After | columns, one row per issue. ## Quick Start Every animation decision starts with these questions: 1. **Is this element entering or exiting?** → Use `ease-out` 2. **Is an on-screen element moving?** → Use `ease-in-out` 3. **Is this a hover/color transition?** → Use `ease` 4. **Will users see this 100+ times daily?** → Don't animate it ## The Easing Blueprint ### ease-out (Most Common) Use for **user-initiated interactions**: dropdowns, modals, tooltips, any element entering or exiting the screen. ```css /* Sorted weak to strong */ --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); ``` Why it works: Acceleration at the start creates an instant, responsive feeling. The element "jumps" toward its destination then settles in. ### ease-in-out (For Movement) Use when **elements already on screen need to move or morph**. Mimics natural motion like a car accelerating then braking. ```css /* Sorted weak to strong */ --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); ``` ### ease (For Hover Effects) Use for **hover states and color transitions**. The asymmetrical curve (faster start, slower end) feels elegant for gentle animations. ```css transition: background-color 150ms ease; ``` ### linear (Avoid in UI) Only us