specweave 1.0.32 → 1.0.33

package/plugins/specweave-mobile/skills/performance-optimization/SKILL.md

@@ -1,14 +1,95 @@
 ---
 name: performance-optimization
-description: Expert in React Native performance optimization including bundle size reduction, memory management, rendering optimization, image optimization, list performance, navigation optimization, startup time, FlatList, memoization, React.memo, useMemo, useCallback, lazy loading, code splitting. Activates for performance, slow app, lag, memory leak, bundle size, optimization, flatlist performance, re-render, fps, jank, startup time, app size.
+description: Expert in React Native 0.83+ performance optimization including Hermes V1, React 19.2 concurrent features, Intersection Observer, Web Performance APIs, bundle size reduction, memory management, rendering optimization, FlashList, expo-image v2, memoization, lazy loading, code splitting. Activates for performance, slow app, lag, memory leak, bundle size, optimization, flatlist performance, re-render, fps, jank, startup time, app size, hermes, concurrent rendering.
 ---
 
-# Performance Optimization Expert
+# Performance Optimization Expert (RN 0.83+)
 
-Specialized in optimizing React Native and Expo applications for production. Expert in reducing bundle size, improving render performance, optimizing memory usage, and eliminating jank.
+Specialized in optimizing React Native 0.83+ and Expo SDK 54+ applications for production. Expert in Hermes V1, React 19.2 concurrent features, Intersection Observer API, Web Performance APIs, and modern optimization strategies.
 
 ## What I Know
 
+### React Native 0.83 Performance Features
+
+**Hermes V1 (Experimental)**
+- Next-generation JavaScript engine
+- Improved garbage collection
+- Better startup performance
+- Enhanced debugging with DevTools
+- Enable in metro.config.js:
+
+```javascript
+// metro.config.js
+module.exports = {
+  transformer: {
+    hermesParser: true, // Enable Hermes V1 parser
+  },
+};
+```
+
+**React 19.2 Concurrent Features**
+- Activity component for state preservation
+- useEffectEvent for stable event handlers
+- Improved concurrent rendering
+- Better memory management during transitions
+
+```typescript
+// Preserve state while hidden (React 19.2)
+import { Activity } from 'react';
+
+function TabContent({ isActive, children }) {
+  return (
+    <Activity mode={isActive ? 'visible' : 'hidden'}>
+      {children}
+    </Activity>
+  );
+}
+```
+
+**Intersection Observer API (Canary)**
+- Web-like lazy loading for React Native
+- Visibility detection without scroll events
+- More efficient than manual scroll tracking
+
+```typescript
+import { IntersectionObserver } from 'react-native';
+
+// Lazy load when element enters viewport
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      loadContent();
+    }
+  });
+});
+```
+
+**Web Performance APIs (Stable)**
+- performance.now() for precise timing
+- User Timing API for custom marks
+- PerformanceObserver for monitoring
+
+```typescript
+// Performance measurement
+const start = performance.now();
+await heavyOperation();
+const duration = performance.now() - start;
+
+// User Timing API
+performance.mark('loadStart');
+await loadData();
+performance.mark('loadEnd');
+performance.measure('dataLoad', 'loadStart', 'loadEnd');
+
+// PerformanceObserver
+const observer = new PerformanceObserver((list) => {
+  list.getEntries().forEach((entry) => {
+    console.log(`${entry.name}: ${entry.duration}ms`);
+  });
+});
+observer.observe({ entryTypes: ['measure'] });
+```
+
 ### Bundle Size Optimization
 
 **Analyzing Bundle Size**
@@ -28,19 +109,20 @@ npx react-native-bundle-visualizer
 ```
 
 **Reducing Bundle Size**
-- Remove unused dependencies
-- Use Hermes engine (Android)
+- Remove unused dependencies with depcheck
+- Use Hermes V1 for smaller bytecode
 - Enable code minification and obfuscation
 - Tree shaking for unused code elimination
 - Lazy load heavy screens and components
 - Optimize asset sizes (images, fonts)
+- Use expo-image instead of react-native-fast-image
 
-**Hermes Configuration**
+**Hermes Configuration (RN 0.83)**
 ```javascript
-// app.json (Expo)
+// app.json (Expo SDK 54+)
 {
   "expo": {
-    "jsEngine": "hermes", // Faster startup, smaller bundle
+    "jsEngine": "hermes", // Default in SDK 54
     "ios": {
       "jsEngine": "hermes"
     },
@@ -49,6 +131,14 @@ npx react-native-bundle-visualizer
     }
   }
 }
+
+// For Hermes V1 experimental
+// metro.config.js
+module.exports = {
+  transformer: {
+    hermesParser: true,
+  },
+};
 ```
 
 ### Rendering Performance
@@ -189,10 +279,85 @@ function SuperFastList({ data }) {
 }
 ```
 
+**Intersection Observer for Lazy Loading (RN 0.83 Canary)**
+```typescript
+import { useRef, useEffect, useState } from 'react';
+import { View } from 'react-native';
+
+function LazyLoadItem({ onVisible, children }) {
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !isVisible) {
+          setIsVisible(true);
+          onVisible?.();
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <View ref={ref}>
+      {isVisible ? children : <Placeholder />}
+    </View>
+  );
+}
+```
+
 ### Image Optimization
 
-**Fast Image for Better Performance**
+**expo-image v2 (Recommended for Expo SDK 54+)**
+```typescript
+// expo-image is the recommended solution for Expo projects
+import { Image, useImage } from 'expo-image';
+
+// Basic usage with blurhash placeholder
+function OptimizedImage({ uri, blurhash }) {
+  return (
+    <Image
+      source={{ uri }}
+      placeholder={{ blurhash }}
+      contentFit="cover"
+      transition={200}
+      style={{ width: 100, height: 100 }}
+      cachePolicy="memory-disk" // Aggressive caching
+    />
+  );
+}
+
+// Imperative loading with useImage hook (v2)
+function PreloadedImage({ uri }) {
+  const image = useImage(uri, {
+    onError: (error) => console.error('Image load failed:', error),
+  });
+
+  if (!image) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <Image
+      source={image}
+      style={{ width: image.width / 2, height: image.height / 2 }}
+      contentFit="cover"
+    />
+  );
+}
+```
+
+**Fast Image for Bare RN Projects**
 ```javascript
+// For bare React Native projects without Expo
 // Install: npm install react-native-fast-image
 import FastImage from 'react-native-fast-image';
 
@@ -202,8 +367,8 @@ function ProfilePicture({ uri }) {
       style={{ width: 100, height: 100 }}
       source={{
         uri: uri,
-        priority: FastImage.priority.normal,  // high, normal, low
-        cache: FastImage.cacheControl.immutable  // Aggressive caching
+        priority: FastImage.priority.normal,
+        cache: FastImage.cacheControl.immutable
       }}
       resizeMode={FastImage.resizeMode.cover}
     />
@@ -222,12 +387,14 @@ function ProfilePicture({ uri }) {
 // Use local images when possible (bundled)
 <Image source={require('./assets/logo.png')} />
 
-// Progressive loading
-import { Image } from 'react-native';
+// Progressive loading with blurhash
+import { Image } from 'expo-image';
 
 <Image
   source={{ uri: imageUrl }}
-  defaultSource={require('./placeholder.png')}  // iOS only
+  placeholder={{ blurhash: 'LGF5]+Yk^6#M@-5c,1J5@[or[Q6.' }}
+  contentFit="cover"
+  transition={300}
   style={{ width: 200, height: 200 }}
 />
 ```
@@ -429,6 +596,11 @@ Ask me when you need help with:
 - Analyzing performance bottlenecks
 - Using React.memo, useMemo, useCallback effectively
 - Implementing 60fps animations
+- **Configuring Hermes V1 for better performance**
+- **Using React 19.2 Activity component for state preservation**
+- **Implementing Intersection Observer for lazy loading**
+- **Using Web Performance APIs for profiling**
+- **Migrating to expo-image v2**
 
 ## Performance Monitoring
 

package/plugins/specweave-mobile/skills/react-native-setup/SKILL.md

@@ -1,99 +1,121 @@
 ---
 name: react-native-setup
-description: Expert in React Native environment setup and configuration. Helps with Node.js, Xcode, Android Studio, watchman installation, CocoaPods, simulators, emulators, and troubleshooting setup issues. Activates for environment setup, installation issues, xcode setup, android studio, simulators, emulators, react-native init, expo init, development environment, SDK configuration.
+description: Expert in React Native 0.83+ and Expo SDK 54+ environment setup. Helps with Node.js 20+, Xcode 16.1+, Android Studio, watchman, CocoaPods, EAS Build, simulators, emulators, and troubleshooting. Activates for environment setup, installation issues, xcode setup, android studio, simulators, emulators, react-native init, expo init, development environment, SDK configuration, EAS Build, development builds.
 ---
 
-# React Native Setup Expert
+# React Native Setup Expert (2025)
 
-Expert in React Native and Expo environment configuration across macOS, Windows, and Linux. Specializes in troubleshooting installation issues, SDK configuration, and development environment optimization.
+Expert in React Native 0.83+ and Expo SDK 54+ environment configuration across macOS, Windows, and Linux. Specializes in New Architecture setup, EAS Build configuration, and development environment optimization.
 
 ## What I Know
 
-### Prerequisites & Installation
+### Prerequisites & Installation (2025 Requirements)
 
 **Node.js & npm**
-- Node.js 18.x or later required
+- **Node.js 20.x or later required** (Node 18 EOL April 2025)
+- Node.js 22 LTS recommended for best performance
 - Version verification: `node --version && npm --version`
-- Troubleshooting Node.js installation issues
-- npm vs yarn vs pnpm for React Native projects
+- Package managers: npm, yarn, pnpm, bun all supported
+- Corepack for yarn: `corepack enable && corepack prepare yarn@stable --activate`
 
 **Xcode (macOS - iOS Development)**
-- Xcode 15.x or later required
-- Command line tools installation: `xcode-select --install`
+- **Xcode 16.1 or later required** (minimum for RN 0.83)
+- **Xcode 26 recommended** for iOS Liquid Glass support
+- Command line tools: `xcode-select --install`
 - License acceptance: `sudo xcodebuild -license accept`
-- Platform installation verification
-- Common Xcode errors and fixes
+- iOS 15.1+ deployment target (minimum supported)
+- iOS 18+ for latest features, iOS 26 for Liquid Glass
 
 **Android Studio (Android Development)**
-- Android Studio Hedgehog or later
+- **Android Studio Ladybug or later** (2024.2.1+)
 - Required SDK components:
-  - Android SDK Platform 34 or later
-  - Android SDK Build-Tools
+  - **Android SDK Platform 35** (API level 35)
+  - Android SDK Build-Tools 35.0.0
   - Android Emulator
   - Android SDK Platform-Tools
+  - **NDK 27.1.12297006** (for native modules)
+  - CMake 3.22.1+ (for Turbo Modules)
+- **compileSdkVersion 35, targetSdkVersion 35, minSdkVersion 24**
 - ANDROID_HOME environment variable setup
-- SDK Manager configuration
-- Common Android Studio issues
+- Edge-to-edge display support (Android 15+)
 
 **Watchman**
 - Installation via Homebrew (macOS): `brew install watchman`
-- Purpose: File watching for fast refresh
-- Troubleshooting watchman errors
-- Cache clearing strategies
+- Purpose: File watching for fast refresh with Metro
+- Critical for large codebases
+- Cache clearing: `watchman watch-del-all`
 
 ### Environment Configuration
 
 **iOS Setup**
-- CocoaPods installation and troubleshooting
-- Pod install issues and resolutions
-- Xcode project configuration
+- CocoaPods 1.15+ installation: `sudo gem install cocoapods`
+- Pod install with New Architecture: `RCT_NEW_ARCH_ENABLED=1 pod install`
+- Xcode project configuration for Fabric
 - Provisioning profiles and certificates
 - iOS Simulator management
 - Device selection: `xcrun simctl list devices`
+- Liquid Glass testing requires iOS 26 simulator
 
 **Android Setup**
-- Gradle configuration
+- Gradle 8.10+ (bundled with Android Studio Ladybug)
 - Android SDK path configuration
 - Environment variables (ANDROID_HOME, PATH)
-- AVD (Android Virtual Device) creation
-- Emulator performance optimization
+- AVD creation with API 35 images
+- Emulator with edge-to-edge support
 - ADB troubleshooting
+- New Architecture: `newArchEnabled=true` in gradle.properties
 
 **Metro Bundler**
 - Port 8081 configuration
 - Cache clearing: `npx react-native start --reset-cache`
-- Custom Metro config
-- Asset resolution issues
+- Metro config for New Architecture
+- Symlink support for monorepos
+- Custom resolver configuration
+
+**EAS Build Setup (Expo)**
+- Install EAS CLI: `npm install -g eas-cli`
+- Login: `eas login`
+- Configure: `eas build:configure`
+- Development builds for custom native code
+- EAS Update for OTA updates
 
 ### Common Setup Issues
 
 **"Command not found" Errors**
-- PATH configuration
+- PATH configuration for Node, Android SDK, Xcode tools
 - Shell profile updates (.zshrc, .bash_profile)
-- Symlink issues
+- Symlink issues with nvm/fnm
 
 **SDK Not Found**
-- SDK path verification
+- SDK path verification: `echo $ANDROID_HOME`
 - Environment variable troubleshooting
 - SDK Manager reinstallation
+- NDK path for native modules
 
 **Pod Install Failures**
-- CocoaPods version issues
-- Ffi gem compilation errors
-- Ruby version compatibility
+- CocoaPods version issues (requires 1.15+)
+- Ffi gem compilation errors on Apple Silicon
+- Ruby version compatibility (use system Ruby or rbenv)
+- New Architecture pod failures: clean and rebuild
 - `pod deintegrate && pod install` strategy
 
 **Build Failures**
-- Clean build strategies
-- Dependency conflicts
+- Clean build strategies (see Pro Tips)
+- Dependency conflicts with New Architecture
 - Native module compilation errors
 - Xcode derived data clearing
+- Gradle cache corruption
+
+**New Architecture Issues**
+- Turbo Module not found: check codegen ran
+- Fabric component not rendering: verify native setup
+- Bridge module compatibility: use interop layer
 
 ## When to Use This Skill
 
 Ask me when you need help with:
-- Initial React Native environment setup
-- Installing and configuring Xcode or Android Studio
+- Initial React Native 0.83+ environment setup
+- Installing and configuring Xcode 16.1+ or Android Studio Ladybug
 - Setting up iOS simulators or Android emulators
 - Troubleshooting "Command not found" errors
 - Resolving SDK path or ANDROID_HOME issues
@@ -103,6 +125,10 @@ Ask me when you need help with:
 - Troubleshooting build failures
 - Setting up watchman for file watching
 - Verifying development environment prerequisites
+- **EAS Build configuration and troubleshooting**
+- **New Architecture setup and migration**
+- **Development build creation for custom native code**
+- **Hermes V1 experimental setup**
 
 ## Quick Setup Commands
 
@@ -114,15 +140,15 @@ xcode-select --install
 # Accept Xcode license
 sudo xcodebuild -license accept
 
-# Install CocoaPods
+# Install CocoaPods (1.15+ required)
 sudo gem install cocoapods
 
 # Install watchman
 brew install watchman
 
 # Verify setup
-xcodebuild -version
-pod --version
+xcodebuild -version  # Should be 16.1+
+pod --version        # Should be 1.15+
 watchman version
 ```
 
@@ -133,6 +159,9 @@ echo $ANDROID_HOME
 adb --version
 emulator -version
 
+# Verify SDK version
+$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --list | grep "platforms;android-35"
+
 # List available emulators
 emulator -list-avds
 
@@ -140,16 +169,16 @@ emulator -list-avds
 adb devices
 ```
 
-### React Native Project
+### React Native CLI Project
 ```bash
-# Create new React Native project
-npx react-native init MyProject
+# Create new React Native project (New Architecture enabled by default)
+npx @react-native-community/cli init MyProject
 
 # Navigate to project
 cd MyProject
 
-# Install iOS dependencies
-cd ios && pod install && cd ..
+# Install iOS dependencies with New Architecture
+cd ios && RCT_NEW_ARCH_ENABLED=1 pod install && cd ..
 
 # Start Metro bundler
 npm start
@@ -161,18 +190,39 @@ npm run ios
 npm run android
 ```
 
+### Expo Project (Recommended)
+```bash
+# Create new Expo project
+npx create-expo-app@latest MyProject
+
+# Navigate to project
+cd MyProject
+
+# Start development server
+npx expo start
+
+# Create development build (for custom native code)
+npx expo install expo-dev-client
+eas build --profile development --platform ios
+eas build --profile development --platform android
+```
+
 ## Pro Tips
 
 1. **Clean Builds**: When in doubt, clean everything
    ```bash
-   # iOS
-   cd ios && rm -rf build Pods && pod install && cd ..
+   # iOS (nuclear option)
+   cd ios && rm -rf build Pods Podfile.lock && pod install && cd ..
 
    # Android
    cd android && ./gradlew clean && cd ..
 
-   # Metro
+   # Metro + Watchman
+   watchman watch-del-all
    npx react-native start --reset-cache
+
+   # Expo
+   npx expo start --clear
    ```
 
 2. **Environment Variables**: Always verify environment variables after changes
@@ -181,6 +231,7 @@ npm run android
    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/emulator
    export PATH=$PATH:$ANDROID_HOME/platform-tools
+   export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
 
    # Reload shell
    source ~/.zshrc
@@ -190,23 +241,68 @@ npm run android
    ```bash
    # iOS
    xcrun simctl list devices
-   xcrun simctl boot "iPhone 15 Pro"
+   xcrun simctl boot "iPhone 16 Pro"
 
-   # Android
+   # Android (API 35 for edge-to-edge)
    emulator -list-avds
-   emulator -avd Pixel_6_API_34
+   emulator -avd Pixel_8_API_35
    ```
 
 4. **Quick Health Check**: Verify entire environment
    ```bash
-   node --version      # Node.js
+   node --version      # Should be 20+
    npm --version       # npm
-   xcodebuild -version # Xcode (macOS)
-   pod --version       # CocoaPods (macOS)
+   xcodebuild -version # Should be 16.1+
+   pod --version       # Should be 1.15+
    adb --version       # Android tools
    watchman version    # Watchman
+   eas --version       # EAS CLI (Expo)
+   ```
+
+5. **EAS Build Configuration**: Essential eas.json
+   ```json
+   {
+     "build": {
+       "development": {
+         "developmentClient": true,
+         "distribution": "internal"
+       },
+       "preview": {
+         "distribution": "internal"
+       },
+       "production": {}
+     }
+   }
+   ```
+
+6. **Hermes V1 (Experimental)**: Enable next-gen engine
+   ```javascript
+   // metro.config.js
+   module.exports = {
+     transformer: {
+       hermesParser: true,
+     },
+   };
    ```
 
+   ```bash
+   # Verify Hermes is running
+   # In app: global.HermesInternal !== undefined
+   ```
+
+## Version Compatibility Matrix (2025)
+
+| Component | Minimum | Recommended | Notes |
+|-----------|---------|-------------|-------|
+| Node.js | 20.x | 22 LTS | Node 18 EOL April 2025 |
+| React Native | 0.76+ | 0.83 | New Arch default since 0.76 |
+| React | 18.3+ | 19.2 | Activity, useEffectEvent |
+| Expo SDK | 52+ | 54 | Native tabs, Liquid Glass |
+| Xcode | 16.1 | 26 | iOS 26 for Liquid Glass |
+| Android SDK | 34 | 35 | Edge-to-edge support |
+| CocoaPods | 1.14 | 1.15+ | New Arch compatibility |
+| Gradle | 8.6 | 8.10+ | K2 compiler support |
+
 ## Integration with SpecWeave
 
 This skill integrates with SpecWeave's increment workflow:
@@ -214,3 +310,4 @@ This skill integrates with SpecWeave's increment workflow:
 - Reference in `tasks.md` for setup-related acceptance criteria
 - Include in `spec.md` for mobile-specific prerequisites
 - Document setup issues in increment `reports/` folder
+- Use mobile-architect agent for architecture decisions