skills.rest
coreyone
coreyoneCOMMUNITY
Explore all skills by this author →
GitHub

design-animation

Design interface motion, spring easing, micro-interactions, and reduced-motion fallbacks for web UIs.

1|Updated Jun 29, 2026
Search Tags:#animation#sveltekit#micro-interactions#motion design#reduced motion#css transitions#spring easing
One-click install
npx skills add https://github.com/coreyone/software-maestro --skill design-animation-coreyone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-animation
Source: https://github.com/coreyone/software-maestro/tree/main/design/interaction-and-layout/design-animation
Command: npx skills add https://github.com/coreyone/software-maestro --skill design-animation-coreyone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Interface animation often ships without purpose, consistency, or accessibility support, causing jank, distraction, and unusable experiences for reduced-motion users. This Skill provides a rule system for designing functional, performant UI motion. ## Core Features & Use Cases - Motion System Standards: Duration tiers, easing palettes, and motion tokens (CSS custom properties) for consistent transitions across a product. - Anti-Pattern Detection: Rejects bounce easing, pulsing dots, marquees, layout-property animation, hover image transforms, and decorative blinking cursors. - Accessibility & Performance Gates: Enforces prefers-reduced-motion fallbacks, transform/opacity-only animation, and an eight-pass motion audit protocol. - Use Case: When building a notification drawer in SvelteKit with Motion, use this Skill to specify spring physics, staggered entry, and an instant opacity fade under reduced-motion settings. ## Quick Start Use the design-animation skill to specify entrance and exit transitions with spring easing and reduced-motion fallbacks for my modal dialog component.

Frequently Asked Questions about design-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design UI animations with spring physics and reduced-motion support?▼

Define duration and easing from a small token palette, animate only transform and opacity, and provide an instant opacity fade under prefers-reduced-motion. For example, a dialog entrance uses a 200ms spring transform with a reduced-motion fade fallback.

What CSS properties should I animate for 60fps performance?▼

Animate only compositor properties: transform and opacity. Avoid animating width, height, margin, padding, or large box-shadows, which trigger layout thrashing and dropped frames. Use grid-template-rows 0fr to 1fr for smooth height accordions.

When should I use Motion.dev versus CSS transitions?▼

Use CSS transitions for hover, focus, and small state changes, and Svelte transitions for mount/unmount. Reserve Motion for choreography, gestures, drag, and layout transitions. The UI must still work if Motion is removed.

Which animation patterns are considered anti-patterns in UI design?▼

Avoid bounce or elastic easing, decorative pulsing dots, auto-scrolling marquees, layout-property animation, image hover scaling, and blinking cursor gimmicks. Replace them with exponential ease-out curves and static, labeled indicators.

How do I audit an existing codebase for animation problems?▼

Run the eight-pass audit covering purpose, easing, physicality, interruptibility, performance, accessibility, cohesion, and missed opportunities. Every finding must cite file:line, impact, frequency, severity, and a fix direction, verified with slow-motion playback.

Related Skills

Explore More Design & Creative Skills→
CinderZhangCinderZhang
3

represent-datamodel

Define core system entities and their plain-language relationships.

Community
Basic
AgentientAgentient
2

framer-motion-interactive-animation

Create and animate React UI elements with Framer Motion motion components.

Official
Intermediate
Lin-0096Lin-0096

animate

Analyze user interfaces and implement animation plans with timing, easing, and reduced-motion fallbacks.

Community
Advanced
mahg-esmahg-es
3

animation

Animate UI transitions and state changes with transform and opacity.

Official
Intermediate