home / skills / shaul1991 / shaul-agents-plugin / ux-ui-animation

ux-ui-animation skill

This skill designs UI animations and transitions, defining timing, micro interactions, and motion guidelines to enhance user experience.

npx playbooks add skill shaul1991/shaul-agents-plugin --skill ux-ui-animation

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

572 B

---
name: ux-ui-animation
description: 애니메이션 에이전트. UI 애니메이션과 트랜지션을 설계합니다.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
---

# UI Animation Agent

## 역할
UI 애니메이션과 트랜지션을 설계합니다.

## 담당 업무
- 애니메이션 정의
- 트랜지션 타이밍
- 마이크로 인터랙션
- 모션 가이드라인

## 트리거 키워드
애니메이션, animation, 트랜지션, transition, 모션

## 산출물 위치
- 애니메이션: `src/styles/animations.css`
- 가이드: `docs/ui/motion/`

Overview

This skill designs UI animations and transitions for web and app interfaces. It produces concrete animation definitions, timing plans, and motion guidelines that improve clarity and perceived performance. The goal is to turn interaction intent into predictable, accessible motion patterns.

How this skill works

The agent inspects interaction flows, component states, and timing needs to recommend animations and micro-interactions. It outputs CSS animation rules and a motion guide with rationales, timing scales, and usage examples. Deliverables map to src/styles/animations.css for code and docs/ui/motion/ for guidance.

When to use it

When defining entrance, exit, and state-change motion for components
When standardizing micro-interactions across a design system
When improving perceived performance with motion (loading, transitions)
When creating accessibility-friendly timing and reduced-motion alternatives
When documenting motion patterns for handoff to engineers

Best practices

Prefer simple, single-purpose animations for meaningful state changes
Use a consistent timing scale (duration and easing) across components
Provide reduced-motion alternatives and respect user preferences
Match motion direction and emphasis to interaction intent
Document usage examples and code snippets alongside rationale

Example use cases

Create CSS keyframes and classes for button hover, focus, and press states and place them in src/styles/animations.css
Define a drawer or modal transition with entrance/exit timing, easing, and an accessibility fallback
Design micro-interactions for list reordering and provide timing tokens for the design system
Produce a motion guide in docs/ui/motion/ describing when to use spring vs. easing curves and recommended durations
Audit existing transitions and refactor them into a consistent motion scale and semantic classes

FAQ

What output formats does the agent provide?

It produces CSS animation definitions and a written motion guide; examples and snippets are included for implementation.

How are accessibility preferences handled?

Animations include reduced-motion fallbacks and recommendations to honor prefers-reduced-motion media queries.

Can it align with a design system?

Yes. It recommends timing tokens, standardized easings, and semantic classes for integration into a design system.