mobile-frontendlisted

# Mobile Frontend Skill ## Core Principles 1. **Every Text Must Be Styled** - React Native doesn't cascade styles; every Text component needs direct className 2. **Event-Driven Hooks** - Subscribe to specific events only, not all events 3. **Shared Service Instances** - Use ActivityRecorderProvider for single service instance across components 4. **Semantic Colors** - Always use design tokens (text-foreground, bg-background, etc.) 5. **Consume-Once Navigation** - Use activitySelectionStore for complex object navigation instead of URL params 6. **Platform-Specific Code** - Use NativeWind classes (ios:pt-12 android:pt-6) for platform differences ## Patterns to Follow ### Pattern 1: Text Styling (CRITICAL) **When to use**: Every single Text component in the app **Why**: React Native has no style inheritance ```tsx // ❌ BAD - Text inherits nothing <View className="text-foreground"> <Text>This text has no color!</Text> </View> // ✅ GOOD - Direct styling on every Text <View className="bg-background"> <Text className="text-foreground font-semibold">Title</Text> <Text className="text-muted-foreground text-sm">Subtitle</Text> </View> // ✅ GOOD - Semantic color variants <Text variant="h1" className="text-foreground">Heading</Text> <Text variant="p" className="text-foreground">Paragraph</Text> <Text variant="muted" className="text-muted-foreground">Secondary</Text> ``` **Key Points**: - Style every Text element explicitly - Use semantic color classes: `text-foreground`,