specweave 1.0.32 → 1.0.33

package/plugins/specweave-mobile/skills/expo-workflow/SKILL.md

@@ -1,20 +1,36 @@
 ---
 name: expo-workflow
-description: Expert in Expo development workflows, EAS Build, EAS Update, Expo Go, dev clients, expo-cli commands, app configuration, and deployment strategies. Activates for expo, expo go, eas build, eas update, expo config, app.json, eas.json, expo dev client, expo prebuild, expo eject, over-the-air updates, expo doctor, expo install, managed workflow, bare workflow.
+description: Expert in Expo SDK 54+ development workflows, EAS Build, EAS Update, native tabs, Expo Router v6, expo-video, expo-audio, dev clients, expo-cli commands, app configuration, and deployment strategies. Activates for expo, expo go, eas build, eas update, expo config, app.json, eas.json, expo dev client, expo prebuild, expo eject, over-the-air updates, expo doctor, expo install, managed workflow, bare workflow, expo router, native tabs, liquid glass.
 ---
 
-# Expo Workflow Expert
+# Expo Workflow Expert (SDK 54+)
 
-Comprehensive expertise in Expo development workflows, EAS (Expo Application Services), and optimization strategies for rapid mobile development. Specializes in modern Expo SDK features, development builds, and deployment pipelines.
+Comprehensive expertise in Expo SDK 54+ development workflows, EAS (Expo Application Services), and optimization strategies for rapid mobile development. Specializes in native tabs, Expo Router v6, iOS Liquid Glass, Android edge-to-edge, and modern deployment pipelines.
 
 ## What I Know
 
+### Expo SDK 54 Features (August 2025)
+
+**What's New in SDK 54**
+- **Native Tab Bar Navigation**: True native tabs via React Navigation 7
+- **iOS Liquid Glass Support**: Translucent glass effects (iOS 26+)
+- **Android Edge-to-Edge**: Default immersive display
+- **expo-video & expo-audio**: New media APIs replacing expo-av
+- **expo-image v2**: useImage hook for imperative loading
+- **React Native 0.81**: Foundation with New Architecture
+- **Improved Developer Experience**: Faster builds, better error messages
+
+**Breaking Changes from SDK 53**
+- `expo-av` deprecated → use `expo-video` and `expo-audio`
+- Tab navigation API changes for native tabs
+- Android edge-to-edge now default (adjust padding)
+
 ### Expo Fundamentals
 
 **Managed vs Bare Workflow**
 - Managed workflow: Full Expo SDK, minimal native code
 - Bare workflow: Full native code access with Expo modules
-- When to use each approach
+- **CNG (Continuous Native Generation)**: Best of both worlds
 - Migration strategies between workflows
 
 **Expo Go vs Development Builds**
@@ -24,10 +40,10 @@ Comprehensive expertise in Expo development workflows, EAS (Expo Application Ser
 - Creating custom dev clients with EAS Build
 
 **Expo SDK & Modules**
-- Core Expo modules (expo-camera, expo-location, etc.)
+- Core Expo modules (expo-camera, expo-location, expo-video, expo-audio)
 - Third-party native module compatibility
-- Module installation best practices
-- Autolinking and manual linking
+- Module installation: `npx expo install <package>`
+- Autolinking handles native setup automatically
 
 ### EAS Build (Cloud Builds)
 
@@ -134,7 +150,7 @@ Comprehensive expertise in Expo development workflows, EAS (Expo Application Ser
 ## When to Use This Skill
 
 Ask me when you need help with:
-- Setting up Expo development workflow
+- Setting up Expo SDK 54+ development workflow
 - Creating development builds with EAS Build
 - Configuring app.json or eas.json
 - Setting up over-the-air updates with EAS Update
@@ -144,9 +160,14 @@ Ask me when you need help with:
 - Configuring deep linking and URL schemes
 - Setting up CI/CD pipelines for Expo apps
 - Deploying to App Store or Play Store
-- Understanding Expo SDK capabilities
+- Understanding Expo SDK 54 capabilities
 - Migrating from Expo Go to dev client
 - Handling native modules in Expo projects
+- **Implementing native tab navigation**
+- **Setting up iOS Liquid Glass effects**
+- **Configuring Android edge-to-edge display**
+- **Migrating from expo-av to expo-video/expo-audio**
+- **Using Expo Router v6 file-based routing**
 
 ## Essential Expo Commands
 
@@ -417,6 +438,202 @@ eas build --profile development --platform all
 eas update --branch development
 ```
 
+### 9. Native Tab Navigation (SDK 54+)
+
+Enable true native tab bars with Expo Router v6:
+
+```typescript
+// app/(tabs)/_layout.tsx
+import { Tabs } from 'expo-router';
+import { Platform } from 'react-native';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        // Enable native tabs (iOS has translucent effect by default)
+        tabBarStyle: Platform.select({
+          ios: { position: 'absolute' }, // For Liquid Glass
+          default: {},
+        }),
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{ title: 'Home', tabBarIcon: ({ color }) => <HomeIcon color={color} /> }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{ title: 'Profile', tabBarIcon: ({ color }) => <ProfileIcon color={color} /> }}
+      />
+    </Tabs>
+  );
+}
+```
+
+### 10. iOS Liquid Glass (SDK 54+ / iOS 26+)
+
+Create beautiful translucent effects:
+
+```typescript
+// components/GlassCard.tsx
+import { View, StyleSheet, Platform } from 'react-native';
+import { BlurView } from 'expo-blur';
+
+export function GlassCard({ children }) {
+  if (Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 26) {
+    return (
+      <BlurView
+        style={styles.card}
+        intensity={60}
+        tint="systemMaterial" // Liquid Glass tint
+      >
+        {children}
+      </BlurView>
+    );
+  }
+
+  return <View style={[styles.card, styles.fallback]}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  fallback: {
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  },
+});
+```
+
+### 11. Android Edge-to-Edge (SDK 54+)
+
+Handle immersive display properly:
+
+```typescript
+// app/_layout.tsx
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { View, StyleSheet, Platform } from 'react-native';
+
+export default function RootLayout() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          // Account for edge-to-edge on Android 15+
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+        },
+      ]}
+    >
+      <Slot />
+    </View>
+  );
+}
+```
+
+```javascript
+// app.json - enable edge-to-edge
+{
+  "expo": {
+    "android": {
+      "edgeToEdge": true  // SDK 54 default
+    }
+  }
+}
+```
+
+### 12. expo-video (Replacing expo-av)
+
+Modern video playback:
+
+```typescript
+// components/VideoPlayer.tsx
+import { useVideoPlayer, VideoView } from 'expo-video';
+import { useEvent } from 'expo';
+import { StyleSheet, View } from 'react-native';
+
+export function VideoPlayer({ source }: { source: string }) {
+  const player = useVideoPlayer(source, (player) => {
+    player.loop = true;
+    player.play();
+  });
+
+  useEvent(player, 'statusChange', ({ status }) => {
+    console.log('Player status:', status);
+  });
+
+  return (
+    <View style={styles.container}>
+      <VideoView
+        style={styles.video}
+        player={player}
+        allowsFullscreen
+        allowsPictureInPicture
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  video: { width: '100%', aspectRatio: 16 / 9 },
+});
+```
+
+### 13. expo-audio (Replacing expo-av)
+
+Modern audio handling:
+
+```typescript
+// hooks/useAudio.ts
+import { useAudioPlayer, useAudioPlayerStatus } from 'expo-audio';
+
+export function useAudio(source: string) {
+  const player = useAudioPlayer(source);
+  const status = useAudioPlayerStatus(player);
+
+  return {
+    play: () => player.play(),
+    pause: () => player.pause(),
+    seek: (position: number) => player.seekTo(position),
+    isPlaying: status.playing,
+    position: status.currentTime,
+    duration: status.duration,
+  };
+}
+```
+
+### 14. expo-image v2 with useImage
+
+Imperative image loading:
+
+```typescript
+import { useImage, Image } from 'expo-image';
+
+export function PreloadedImage({ uri }: { uri: string }) {
+  const image = useImage(uri, {
+    onError: (error) => console.error('Failed to load image:', error),
+  });
+
+  if (!image) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <Image
+      source={image}
+      style={{ width: image.width, height: image.height }}
+      contentFit="cover"
+    />
+  );
+}
+```
+
 ## Integration with SpecWeave
 
 **Increment Planning**

package/plugins/specweave-mobile/skills/native-modules/SKILL.md

@@ -1,28 +1,34 @@
 ---
 name: native-modules
-description: Expert in React Native native modules, bridging JavaScript and native code, writing custom native modules, using Turbo Modules, Fabric, JSI, autolinking, module configuration, iOS Swift/Objective-C modules, Android Kotlin/Java modules. Activates for native module, native code, bridge, turbo module, JSI, fabric, autolinking, custom native module, ios module, android module, swift, kotlin, objective-c, java native code.
+description: Expert in React Native 0.83+ native modules, Turbo Modules with Codegen, Fabric renderer, JSI (JavaScript Interface), New Architecture migration, bridging JavaScript and native code, iOS Swift modules, Android Kotlin modules, expo config plugins. Activates for native module, native code, bridge, turbo module, JSI, fabric, autolinking, custom native module, ios module, android module, swift, kotlin, objective-c, java native code, codegen, new architecture.
 ---
 
-# Native Modules Expert
+# Native Modules Expert (RN 0.83+ New Architecture)
 
-Specialized in React Native native module integration, including custom native module development, third-party native library integration, and troubleshooting native code issues.
+Specialized in React Native 0.83+ native module integration with New Architecture (enabled by default). Expert in Turbo Modules, JSI, Fabric, Codegen, and modern native development patterns.
 
 ## What I Know
 
 ### Native Module Fundamentals
 
 **What Are Native Modules?**
-- Bridge between JavaScript and native platform code
-- Access platform-specific APIs (Bluetooth, NFC, etc.)
-- Performance-critical operations
+- Direct interface between JavaScript and native platform code
+- Access platform-specific APIs (Bluetooth, NFC, HealthKit, etc.)
+- Performance-critical operations via JSI
 - Integration with existing native SDKs
 
-**Modern Architecture**
-- **Old Architecture**: Bridge-based (React Native < 0.68)
-- **New Architecture** (React Native 0.68+):
-  - **JSI** (JavaScript Interface): Direct JS ↔ Native communication
-  - **Turbo Modules**: Lazy-loaded native modules
-  - **Fabric**: New rendering engine
+**New Architecture (Default in RN 0.76+)**
+- **JSI** (JavaScript Interface): Direct JS ↔ Native communication (no JSON serialization)
+- **Turbo Modules**: Lazy-loaded, type-safe native modules with Codegen
+- **Fabric**: New concurrent rendering engine
+- **Codegen**: TypeScript → Native type generation
+
+**Key Benefits of New Architecture**
+- 10-100x faster than old bridge
+- Synchronous method calls possible
+- Type safety across JS/Native boundary
+- Lazy module loading (better startup)
+- Concurrent rendering with Fabric
 
 ### Using Third-Party Native Modules
 
@@ -241,28 +247,146 @@ function MyComponent() {
 }
 ```
 
-### Turbo Modules (New Architecture)
+### Turbo Modules (New Architecture - Default in RN 0.76+)
+
+**Creating a Turbo Module with Codegen**
 
-**Creating a Turbo Module**
+Step 1: Create the TypeScript spec (source of truth for types):
 
 ```typescript
-// NativeCalendarModule.ts (Codegen spec)
+// specs/NativeCalendarModule.ts
 import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
 
 export interface Spec extends TurboModule {
-  createEvent(name: string, location: string, date: number): void;
+  // Sync method (fast, blocks JS thread)
+  getConstants(): {
+    DEFAULT_REMINDER_MINUTES: number;
+  };
+
+  // Async methods (recommended for most cases)
+  createEvent(name: string, location: string, date: number): Promise<string>;
   findEvents(): Promise<string[]>;
+  deleteEvent(eventId: string): Promise<boolean>;
+
+  // Callback-based (legacy pattern, prefer Promise)
+  getEventsWithCallback(callback: (events: string[]) => void): void;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('CalendarModule');
 ```
 
+Step 2: Configure Codegen in package.json:
+
+```json
+{
+  "codegenConfig": {
+    "name": "CalendarModuleSpec",
+    "type": "modules",
+    "jsSrcsDir": "specs",
+    "android": {
+      "javaPackageName": "com.myapp.calendar"
+    }
+  }
+}
+```
+
+Step 3: Implement the native side (iOS - Swift):
+
+```swift
+// CalendarModule.swift
+import Foundation
+
+@objc(CalendarModule)
+class CalendarModule: NSObject {
+
+  @objc static func moduleName() -> String! {
+    return "CalendarModule"
+  }
+
+  @objc static func requiresMainQueueSetup() -> Bool {
+    return false
+  }
+
+  @objc func getConstants() -> [String: Any] {
+    return ["DEFAULT_REMINDER_MINUTES": 15]
+  }
+
+  @objc func createEvent(_ name: String, location: String, date: Double,
+                         resolve: @escaping RCTPromiseResolveBlock,
+                         reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.global().async {
+      // Native implementation
+      let eventId = UUID().uuidString
+      resolve(eventId)
+    }
+  }
+
+  @objc func findEvents(_ resolve: @escaping RCTPromiseResolveBlock,
+                        reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.global().async {
+      let events = ["Meeting", "Lunch", "Call"]
+      resolve(events)
+    }
+  }
+
+  @objc func deleteEvent(_ eventId: String,
+                         resolve: @escaping RCTPromiseResolveBlock,
+                         reject: @escaping RCTPromiseRejectBlock) {
+    resolve(true)
+  }
+}
+```
+
+Step 4: Implement the native side (Android - Kotlin):
+
+```kotlin
+// CalendarModule.kt
+package com.myapp.calendar
+
+import com.facebook.react.bridge.*
+import com.facebook.react.module.annotations.ReactModule
+
+@ReactModule(name = CalendarModule.NAME)
+class CalendarModule(reactContext: ReactApplicationContext) :
+    NativeCalendarModuleSpec(reactContext) {
+
+    companion object {
+        const val NAME = "CalendarModule"
+    }
+
+    override fun getName(): String = NAME
+
+    override fun getConstants(): MutableMap<String, Any> {
+        return mutableMapOf("DEFAULT_REMINDER_MINUTES" to 15)
+    }
+
+    override fun createEvent(name: String, location: String, date: Double, promise: Promise) {
+        val eventId = java.util.UUID.randomUUID().toString()
+        promise.resolve(eventId)
+    }
+
+    override fun findEvents(promise: Promise) {
+        val events = Arguments.createArray().apply {
+            pushString("Meeting")
+            pushString("Lunch")
+            pushString("Call")
+        }
+        promise.resolve(events)
+    }
+
+    override fun deleteEvent(eventId: String, promise: Promise) {
+        promise.resolve(true)
+    }
+}
+```
+
 **Benefits of Turbo Modules**
-- Lazy loading: Loaded only when used
-- Type safety with TypeScript
-- Faster initialization
-- Better performance via JSI
+- **Lazy loading**: Only loaded when first accessed
+- **Type safety**: Codegen generates native interfaces from TypeScript
+- **10x faster**: Direct JSI calls, no JSON serialization
+- **Synchronous calls**: getConstants() can be sync
+- **Better DX**: TypeScript errors caught at build time
 
 ### Native UI Components
 
@@ -397,6 +521,11 @@ Ask me when you need help with:
 - Creating custom native UI components
 - Handling platform-specific APIs
 - Resolving autolinking issues
+- **Setting up Codegen for type-safe modules**
+- **Creating Fabric components (New Architecture UI)**
+- **JSI bindings for synchronous native calls**
+- **Expo config plugins for native configuration**
+- **Interop layer for legacy Bridge modules**
 
 ## Essential Commands
 
@@ -554,6 +683,78 @@ console.log(deviceId);  // Returns immediately
 
 **Warning**: Synchronous methods block the JS thread. Use only for very fast operations (<5ms).
 
+### 5. Expo Config Plugins (SDK 54+)
+
+For Expo projects, use config plugins to modify native code:
+
+```typescript
+// plugins/withCalendarPermission.ts
+import { ConfigPlugin, withInfoPlist, withAndroidManifest } from '@expo/config-plugins';
+
+const withCalendarPermission: ConfigPlugin = (config) => {
+  // iOS: Modify Info.plist
+  config = withInfoPlist(config, (config) => {
+    config.modResults.NSCalendarsUsageDescription =
+      'This app needs calendar access to schedule events';
+    return config;
+  });
+
+  // Android: Modify AndroidManifest.xml
+  config = withAndroidManifest(config, (config) => {
+    const mainApplication = config.modResults.manifest.application?.[0];
+    if (mainApplication) {
+      // Add permissions
+      config.modResults.manifest['uses-permission'] = [
+        ...(config.modResults.manifest['uses-permission'] || []),
+        { $: { 'android:name': 'android.permission.READ_CALENDAR' } },
+        { $: { 'android:name': 'android.permission.WRITE_CALENDAR' } },
+      ];
+    }
+    return config;
+  });
+
+  return config;
+};
+
+export default withCalendarPermission;
+```
+
+```json
+// app.json
+{
+  "expo": {
+    "plugins": [
+      "./plugins/withCalendarPermission"
+    ]
+  }
+}
+```
+
+### 6. Interop Layer for Legacy Bridge Modules
+
+RN 0.76+ includes an interop layer for Bridge modules in New Architecture:
+
+```typescript
+// For legacy modules that don't support Turbo Modules yet
+import { NativeModules, TurboModuleRegistry } from 'react-native';
+
+// This works in New Architecture via interop layer
+const LegacyModule = NativeModules.LegacyBridgeModule;
+
+// Or use the Turbo Module if available
+const TurboModule = TurboModuleRegistry.get('ModernModule');
+
+// Recommended: Create a wrapper that handles both
+export function getCalendarModule() {
+  // Try Turbo Module first
+  const turbo = TurboModuleRegistry.get('CalendarModule');
+  if (turbo) return turbo;
+
+  // Fall back to Bridge module via interop
+  return NativeModules.CalendarModule;
+}
+```
+
 ## Integration with SpecWeave
 
 **Native Module Planning**