/common-mobile-animation

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,

hoangnguyen0403@hoangnguyen0403

GitHub

From plugin

agent-skills-standard

538200 skills1 MCP

Install

$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill common-mobile-animation --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/common-mobile-animation

Context preview

The summary Claude sees to decide when to auto-load this skill.

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,

SKILL.md

common-mobile-animation.SKILL.md

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.
metadata:
  triggers:
    files:
    - '**/*_page.dart'
    - '**/*_screen.dart'
    - '**/*.swift'
    - '**/*Activity.kt'
    - '**/*Screen.tsx'
    keywords:
    - Animation
    - AnimationController
    - Animated
    - MotionLayout
    - transition
    - gesture

Mobile Animation

Priority: P1 (HIGH)

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.

Use **250-350ms** for medium navigation/modals and **400-600ms** for long shared-element or complex-state transitions; state the selected range in quick-start examples.
A quick-start example must demonstrate the **Long** `400-600ms` shared-element or complex-state pattern; do not substitute the Medium range.

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](references/implementation.md) for Flutter and iOS animation patterns.

References

[Animation Patterns](references/animation-patterns.md)

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.