Agent-Skills.md

Agent Skills: Mobile Animation

Motion design principles for mobile apps. Covers timing curves, transitions, gestures, and performance-conscious animations. (triggers: **/*_page.dart, **/*_screen.dart, **/*.swift, **/*Activity.kt, **/*Screen.tsx, Animation, AnimationController, Animated, MotionLayout, transition, gesture)

UncategorizedID: hoangnguyen0403/agent-skills-standard/common-mobile-animation

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/common/common-mobile-animation

Skill Files

Browse the full folder contents for common-mobile-animation.

Download Skill

Loading file tree…

skills/common/common-mobile-animation/SKILL.md

Skill Metadata

Name
common-mobile-animation
Description
Apply motion design principles for mobile apps covering timing curves, transitions, gestures, and performance-conscious animations. Use when implementing screen transitions, gesture-driven interactions, shared-element animations, or optimizing animation frame rates on iOS, Android, or Flutter.

Mobile Animation

Priority: P1 (OPERATIONAL)

Timing Standards

| Duration | Range | Use Case | |----------|-------|----------| | Short | 100-150ms | Toggles, cell press | | Medium | 250-350ms | Navigation, modals | | Long | 400-600ms | Shared element, complex state |

Hard limit: Never exceed 600ms for any animation.

Workflow

  1. Choose duration from timing table based on interaction type.
  2. Select easing curve per platform — Curves.fastOutSlowIn (Material) or easeInOut (iOS). Never use linear.
  3. Animate GPU-friendly properties (transform, opacity). Avoid width/height which trigger layout.
  4. Wire gestures using onPan / interactivePopGesture for fluid, interruptible UX.
  5. Verify frame rate in profiler — target 60fps with no jank frames.

See implementation examples for Flutter and iOS animation patterns.

References

Anti-Patterns

  • No linear easing: Feels robotic; always use platform-standard curves.
  • No layout thrashing: Avoid animating properties that trigger layout (width, padding).
  • No memory leaks: Always dispose() AnimationControllers in Flutter; invalidate timers in iOS.
  • No blocking UI: Run heavy calculations outside animation frames.

Related Topics