AI agent skill · by @MRCalderon3D

Ui Animation Pipeline

Define transition, feedback, and state-driven animation rules for UI elements.

Archived 2026-10-23 · Source updated 2026-08-20 · License: MIT. Check the original repository for the latest version.

SKILL.md instructions

# UI Animation Pipeline

## Purpose
Define transition, feedback, and state-driven animation rules for UI elements so interactions feel responsive, screens transition smoothly, and animations stay within performance budgets.

## Use When
- UI elements need hover, press, focus, or disabled state feedback
- screen transitions need standardization (fade, slide, scale)
- UI animations are inconsistent in timing, easing, or direction across screens
- new UI screens are being added and need animation behavior that follows project conventions

## Inputs
- UI flow map (screens, transitions, popups)
- interaction states per element type (normal, hover, pressed, focused, disabled)
- target frame rate and animation budget
- accessibility requirements (reduced motion preference)

## Process
1. define animation categories: state feedback (hover, press), screen transitions (in/out), attention (pulse, bounce), progress (fill, count)
2. set duration, easing curve, and delay rules per category
3. establish a reduced-motion fallback for each animation (instant cut or opacity-only)
4. configure animation via code (tweens, coroutines, or animation system) — not baked sprite sheets
5. validate animation timing, overlap behavior, and cancellation safety

## Outputs
- UI animation convention document (durations, easings, directions per category)
- state feedback specification per element type
- screen transition specification (in/out pairs)
- reduced-motion fallback map
- validation checklist for new UI animations

## Quality Bar
- every UI animation has a defined duration and easing — no magic numbers in code
- state feedback is immediate (under 100ms response time)
- screen transitions do not block input for more than 300ms
- reduced-motion fallback exists for every animation
- animations cancel cleanly when interrupted (no stuck states)

## Common Failure Modes
- inconsistent easing curves that make the UI feel disjointed
- animations that block input, making the UI feel sluggish
- missing cancellation logic that leaves elements in mid-animation state
- no reduced-motion fallback, failing accessibility requirements
- overlapping animations that compete for the same element

## Related Agents
- 2d-artist
- ui-programmer
- ui-ux-designer
- accessibility-reviewer

## Related Commands
- ui-asset-pass
- ui-flow-review
- verify

## Related Skills
- ui-hud-patterns

## Notes
- Keep this skill aligned with the relevant rules layer and current project documentation.
- If engine-specific constraints materially change the workflow, hand off to the matching engine skill or engine-specific reviewer.
- Prefer code-driven animations (tween systems, animation state machine triggers, scripted easing) over baked sprite sheet animations for UI. Code-driven animations are resolution-independent and easier to tune. Pick the concrete tween library or animation system from the active engine layer.
- Boundary: this skill owns UI motion authoring and tuning conventions; `ui-hud-patterns` owns runtime HUD architecture and data binding.