>_SkillsHub▋

> common-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)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/common-mobile-animation?format=md"
SKILL.md•common-mobile-animation

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

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#animation#design#mobile#performance#swift
└────────────