Claude Code Plugins

Community-maintained marketplace

Feedback

navigation-latency

@calube/mobile-observability
24
0

Measure time from navigation tap to screen fully loaded and interactive. Use when tracking screen transitions, deep links, or tab switches.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name navigation-latency
description Measure time from navigation tap to screen fully loaded and interactive. Use when tracking screen transitions, deep links, or tab switches.
triggers deep link performance, measure TTI, screen load time, slow screen navigation, tab switch latency, track screen transitions
priority 2

Navigation Latency

Time from tap to destination screen interactive (TTI).

Phases

TAP → TRANSITION → VIEW_INIT → DATA_LOAD → INTERACTIVE
     |_____________________________________________|
                   Navigation Latency

When to Use

  • Tab bar taps
  • List item → detail screen
  • Deep link → target screen
  • Any screen-to-screen transition

Key Thresholds

Rating Duration
Good <400ms
Acceptable <1s
Poor >1s

Measurement Points

  1. onNavigationStart - user taps (source screen)
  2. onViewAppear - destination view visible
  3. onContentReady - data loaded, interactive

Implementation

See references/ui-performance.md (Navigation Latency section) for:

  • iOS: NavigationLatencyTracker with os_signpost
  • Android: Fragment/Activity lifecycle hooks
  • React Native: React Navigation listeners

Common Mistakes

  • Measuring only view appear (missing data load)
  • Not correlating source → destination
  • Ignoring warm vs cold screen loads

Related Skills

  • See skills/interaction-latency for button/tap response times (vs full screen loads)
  • Combine with skills/user-journey-tracking to correlate navigation with user intent