# Ui Animation Pipeline

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

- **Type:** Skill
- **Install:** `agentstack add skill-mrcalderon3d-everything-game-dev-code-ui-animation-pipeline`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [MRCalderon3D](https://agentstack.voostack.com/s/mrcalderon3d)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [MRCalderon3D](https://github.com/MRCalderon3D)
- **Source:** https://github.com/MRCalderon3D/everything-game-dev-code/tree/main/skills/art-audio-content/ui-animation-pipeline

## Install

```sh
agentstack add skill-mrcalderon3d-everything-game-dev-code-ui-animation-pipeline
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [MRCalderon3D](https://github.com/MRCalderon3D)
- **Source:** [MRCalderon3D/everything-game-dev-code](https://github.com/MRCalderon3D/everything-game-dev-code)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mrcalderon3d-everything-game-dev-code-ui-animation-pipeline
- Seller: https://agentstack.voostack.com/s/mrcalderon3d
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.