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/.agent/skills/common/common-mobile-animation

Skill Files

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

Download Skill

Loading file tree…

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

Skill Metadata

Name
common-mobile-animation
Description
"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)"

Mobile Animation

Priority: P1 (OPERATIONAL)

Native-feeling motion design. Optimize for 60fps and platform conventions.

Timing Standards

  • Short: 100-150ms (Toggles, cell press)
  • Medium: 250-350ms (Nav, modals)
  • Long: 400-600ms (Shared element, complex state)
  • Limit: Never >600ms.

Guidelines

  • Easing: Use Curves.fastOutSlowIn (Material) or easeInOut (iOS). Avoid linear.
  • Performance: Animate transform (Scale/Translation) and opacity. Avoid width/height.
  • Gestures: Implement onPan / interactivePopGesture for fluid UX.
  • Optimization: Use FadeTransition / SlideTransition over AnimatedBuilder for simple cases.

Animation Patterns

Anti-Patterns

  • No Linear Easing: Feels robotic.
  • No Layout Trashing: Avoid animating properties that trigger layout (width, padding).
  • No Memory Leaks: Always dispose() AnimationControllers.
  • No Blocking UI: Run heavy calculations outside animation frames.

Related Topics

mobile-ux-core | mobile-performance | flutter/animations