hoangnguyen0403/common-mobile-animation
skills/common/common-mobile-animation/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add hoangnguyen0403/agent-skills-standard common-mobile-animationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 15, 2026, 3:27 AM329.7s4 files scanned
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.
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
- 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-600msshared-element or complex-state pattern; do not substitute the Medium range.
- Select easing curve per platform —
Curves.fastOutSlowIn(Material) oreaseInOut(iOS). Never uselinear. - Animate GPU-friendly properties (
transform,opacity). Avoidwidth/heightwhich trigger layout. - Wire gestures using
onPan/interactivePopGesturefor fluid, interruptible UX. - Verify frame rate in profiler — target 60fps with no jank frames.
See implementation examples for Flutter and iOS animation patterns.
References
- Animation Patterns
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
- common-mobile-ux-core
- flutter-performance
- common-performance-engineering
Canonical response anchors
When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- interactivePopGesture
Related Skills
hoangnguyen0403/common-operator-profile
testing
VerifiedTrustedCommunity
Infer the requesting operator's technical fluency from message content (never ask directly) and adapt register — business, hybrid, or technical — across SDLC workflow output. Use when starting sdlc, brainstorm-feature, plan-feature, verify-work, publish-notes, or session-report, or whenever a request's phrasing signals a non-technical or cross-stack operator.
524SKILL.mdUpdated Jul 12, 2026
hoangnguyen0403/database-transactions
documentation
VerifiedTrustedCommunity
Define transaction boundaries, locking, and consistency guarantees for multi-step writes. Use when designing atomic operations, retries, idempotency, or concurrent write behavior.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-schema-design
development
VerifiedTrustedCommunity
Design relational or document schemas from access patterns, cardinality, and lifecycle. Use when modeling entities, choosing embed vs normalize, or shaping schema boundaries before implementation.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-query-performance
data-ai
VerifiedTrustedCommunity
Diagnose database latency with explain plans, index ownership, and query-shape review. Use when a query is slow, an index is missing, or scans and N+1 patterns appear.
524SKILL.mdUpdated Jun 19, 2026