What is universal-elements?

This Claude skill provides a comprehensive framework for universal UI element animation, applying Disney's 12 classic motion principles to modern web interfaces. It helps developers and designers create consistent, professional, and engaging user experiences by offering specific guidelines on timing, easing, and spatial transitions, along with ready-to-use CSS foundations to bridge the gap between design theory and front-end implementation.

When should I use universal-elements?

universal-elements is useful in the following scenarios: • Enhancing user interaction feedback by applying 'Squash & Stretch' and 'Anticipation' principles to custom UI components like buttons and inputs. • Standardizing motion design across a web application using a unified set of CSS custom properties for consistent timing and easing functions. • Improving visual hierarchy and directing user attention through 'Staging' and 'Secondary Action' animation techniques during state changes. • Optimizing perceived performance and responsiveness by implementing professional 'Ease In' and 'Ease Out' curves for page transitions, modals, and navigation menus.

name	universal-elements
description	Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types

Universal Element Animation Principles

Apply Disney's 12 principles to any UI element for consistent, professional motion design.

Universal Application of Principles

1. Squash & Stretch

Any element that responds to interaction can squash (compress on impact/press) and stretch (extend on release). Keep it subtle: 2-5% maximum for UI.

2. Anticipation

Before any significant action, a brief preparatory motion signals what's coming. Scale down before scale up, pull back before push forward. 50-100ms duration.

3. Staging

Direct attention to the most important element. Use contrast in motion, size, color, z-index, and blur to create clear visual hierarchy.

4. Straight Ahead & Pose to Pose

Pose-to-pose for most UI: define start and end states clearly. Straight-ahead for organic, flowing animations like particles or organic shapes.

5. Follow Through & Overlapping Action

Nothing stops all at once. Child elements lag behind parents. Shadows settle after objects. Stagger related elements 20-50ms apart.

6. Ease In & Ease Out

The golden rule: never use linear for UI motion. Enter with ease-out, exit with ease-in, transition with ease-in-out.

7. Arcs

Natural motion follows curved paths. Add subtle vertical movement to horizontal transitions. Rotate while translating. Avoid robotic straight lines.

8. Secondary Action

Every primary action deserves supporting animation. Shadow changes, color shifts, icon rotations, glow effects reinforce without competing.

9. Timing

Element Type	Fast	Normal	Slow
Micro (icons, buttons)	50-100ms	100-200ms	200-300ms
Small (cards, inputs)	150-200ms	200-300ms	300-400ms
Medium (modals, menus)	200-250ms	250-350ms	350-500ms
Large (pages, overlays)	300-400ms	400-600ms	600-800ms

10. Exaggeration

Match animation intensity to context. Celebratory moments allow 20-30% exaggeration. Professional contexts keep it under 10%. Error states can be more dramatic.

11. Solid Drawing

Maintain visual consistency: border-radius ratios, shadow directions, spacing rhythms, typography scale. Nothing should distort or break during animation.

12. Appeal

The goal is delight without distraction. Smooth animations build trust. Snappy feedback feels responsive. The best animation is felt, not noticed.

CSS Foundation

/* Universal transition base */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Standard durations as custom properties */
:root {
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Apply to any interactive element */
.interactive {
  transition: transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}

Key Properties (Any Element)

transform: universal positioning and scaling
opacity: visibility transitions
transition: state changes
animation: complex sequences
box-shadow: depth and emphasis

universal-elements

When & Why to Use This Skill

Use Cases