@ivannxbt/ai-config 0.1.0

package/.gemini/antigravity/skills/expo-react-native-performance/references/list-use-flashlist.md

@@ -0,0 +1,56 @@
+---
+title: Use FlashList Instead of FlatList
+impact: CRITICAL
+impactDescription: 5-10× better FPS on Android
+tags: list, flashlist, flatlist, virtualization
+---
+
+## Use FlashList Instead of FlatList
+
+FlashList uses view recycling instead of creating new views for each item. This dramatically reduces memory allocation and improves scroll performance, especially on low-end Android devices where FlatList struggles.
+
+**Incorrect (FlatList recreates views on scroll):**
+
+```typescript
+// screens/ProductList.tsx
+import { FlatList } from 'react-native';
+
+export function ProductList({ products }: Props) {
+  return (
+    <FlatList
+      data={products}
+      renderItem={({ item }) => <ProductCard product={item} />}
+      keyExtractor={(item) => item.id}
+    />
+    // Each scroll creates/destroys views, causing jank on Android
+  );
+}
+```
+
+**Correct (FlashList recycles views):**
+
+```typescript
+// screens/ProductList.tsx
+import { FlashList } from '@shopify/flash-list';
+
+export function ProductList({ products }: Props) {
+  return (
+    <FlashList
+      data={products}
+      renderItem={({ item }) => <ProductCard product={item} />}
+      keyExtractor={(item) => item.id}
+      estimatedItemSize={120}
+    />
+    // Same views recycled, smooth 60 FPS scrolling
+  );
+}
+```
+
+**Migration:** FlashList is API-compatible with FlatList. Change the import and add `estimatedItemSize`.
+
+**Performance gains:**
+- 5× faster UI thread FPS on low-end Android
+- 10× faster JS thread FPS
+- 32% less CPU usage
+
+Reference: [FlashList](https://shopify.github.io/flash-list/)

package/.gemini/antigravity/skills/expo-react-native-performance/references/mem-abort-fetch.md

@@ -0,0 +1,78 @@
+---
+title: Abort Fetch Requests on Unmount
+impact: MEDIUM
+impactDescription: prevents memory leaks from pending requests
+tags: mem, abort-controller, fetch, cleanup
+---
+
+## Abort Fetch Requests on Unmount
+
+Pending fetch requests continue even after unmount. When they resolve, attempting to update state on an unmounted component causes memory leaks. Use AbortController to cancel requests.
+
+**Incorrect (fetch continues after unmount):**
+
+```typescript
+// screens/UserProfile.tsx
+export function UserProfile({ userId }: Props) {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    fetch(`/api/users/${userId}`)
+      .then((res) => res.json())
+      .then(setUser);  // May run after unmount
+  }, [userId]);
+
+  return user ? <ProfileView user={user} /> : <Loading />;
+}
+// If user navigates away during fetch, response still processed
+```
+
+**Correct (abort request on unmount):**
+
+```typescript
+// screens/UserProfile.tsx
+export function UserProfile({ userId }: Props) {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    fetch(`/api/users/${userId}`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then(setUser)
+      .catch((err) => {
+        if (err.name !== 'AbortError') throw err;
+      });
+
+    return () => {
+      controller.abort();
+    };
+  }, [userId]);
+
+  return user ? <ProfileView user={user} /> : <Loading />;
+}
+// Request cancelled when component unmounts or userId changes
+```
+
+**With async/await:**
+
+```typescript
+useEffect(() => {
+  const controller = new AbortController();
+
+  async function loadUser() {
+    try {
+      const res = await fetch(`/api/users/${userId}`, { signal: controller.signal });
+      const data = await res.json();
+      setUser(data);
+    } catch (err) {
+      if (err.name !== 'AbortError') throw err;
+    }
+  }
+
+  loadUser();
+  return () => controller.abort();
+}, [userId]);
+```
+
+Reference: [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)

package/.gemini/antigravity/skills/expo-react-native-performance/references/mem-avoid-inline-objects.md

@@ -0,0 +1,61 @@
+---
+title: Avoid Inline Objects and Arrays in Props
+impact: MEDIUM
+impactDescription: prevents unnecessary re-renders from new references
+tags: mem, inline, objects, memoization
+---
+
+## Avoid Inline Objects and Arrays in Props
+
+Inline objects and arrays create new references on every render. When passed as props to memoized components, this defeats memoization and causes unnecessary re-renders.
+
+**Incorrect (new object reference every render):**
+
+```typescript
+// screens/SettingsScreen.tsx
+export function SettingsScreen() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  return (
+    <View>
+      <Toggle value={darkMode} onChange={setDarkMode} />
+      <UserAvatar
+        style={{ width: 50, height: 50 }}  // New object every render
+        source={{ uri: user.avatarUrl }}   // New object every render
+      />
+    </View>
+  );
+}
+// UserAvatar re-renders on every darkMode toggle
+```
+
+**Correct (stable object references):**
+
+```typescript
+// screens/SettingsScreen.tsx
+const avatarStyle = { width: 50, height: 50 };
+
+export function SettingsScreen() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  const avatarSource = useMemo(
+    () => ({ uri: user.avatarUrl }),
+    [user.avatarUrl]
+  );
+
+  return (
+    <View>
+      <Toggle value={darkMode} onChange={setDarkMode} />
+      <UserAvatar style={avatarStyle} source={avatarSource} />
+    </View>
+  );
+}
+// UserAvatar only re-renders when avatarUrl changes
+```
+
+**Patterns for stable references:**
+- Static styles: Define outside component
+- Dynamic values: Use `useMemo`
+- Empty arrays: Use module-level `const EMPTY_ARRAY = []`
+
+Reference: [Avoiding Recreating Objects](https://react.dev/reference/react/useMemo#skipping-re-rendering-of-components)

package/.gemini/antigravity/skills/expo-react-native-performance/references/mem-cleanup-subscriptions.md

@@ -0,0 +1,63 @@
+---
+title: Clean Up Subscriptions in useEffect
+impact: MEDIUM
+impactDescription: prevents memory leaks from orphaned listeners
+tags: mem, cleanup, useEffect, subscriptions
+---
+
+## Clean Up Subscriptions in useEffect
+
+Subscriptions to events, WebSockets, or external services must be cleaned up when the component unmounts. Without cleanup, the subscription continues running and accumulates memory.
+
+**Incorrect (subscription never cleaned up):**
+
+```typescript
+// hooks/useNotifications.ts
+export function useNotifications() {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  useEffect(() => {
+    const subscription = Notifications.addNotificationReceivedListener(
+      (notification) => {
+        setNotifications((prev) => [...prev, notification]);
+      }
+    );
+    // No cleanup - listener keeps running after unmount
+  }, []);
+
+  return notifications;
+}
+// Each mount adds a new listener, none removed
+```
+
+**Correct (cleanup on unmount):**
+
+```typescript
+// hooks/useNotifications.ts
+export function useNotifications() {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  useEffect(() => {
+    const subscription = Notifications.addNotificationReceivedListener(
+      (notification) => {
+        setNotifications((prev) => [...prev, notification]);
+      }
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return notifications;
+}
+// Listener properly removed when component unmounts
+```
+
+**Common subscriptions needing cleanup:**
+- Event listeners (keyboard, app state, linking)
+- WebSocket connections
+- Firebase/Supabase real-time subscriptions
+- Notification listeners
+
+Reference: [useEffect cleanup](https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)

package/.gemini/antigravity/skills/expo-react-native-performance/references/mem-clear-timers.md

@@ -0,0 +1,63 @@
+---
+title: Clear Timers on Unmount
+impact: MEDIUM
+impactDescription: prevents memory leaks and setState errors
+tags: mem, timers, cleanup, setTimeout
+---
+
+## Clear Timers on Unmount
+
+Timers (setTimeout, setInterval) continue running after unmount. If the callback updates state, it causes "Can't perform state update on unmounted component" errors and memory leaks.
+
+**Incorrect (timer not cleared):**
+
+```typescript
+// components/Toast.tsx
+export function Toast({ message, duration = 3000 }: Props) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setVisible(false);  // Runs even if component unmounted
+    }, duration);
+  }, [duration]);
+
+  if (!visible) return null;
+  return <View style={styles.toast}><Text>{message}</Text></View>;
+}
+// If user navigates away quickly, setState called on unmounted component
+```
+
+**Correct (timer cleared on unmount):**
+
+```typescript
+// components/Toast.tsx
+export function Toast({ message, duration = 3000 }: Props) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setVisible(false);
+    }, duration);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [duration]);
+
+  if (!visible) return null;
+  return <View style={styles.toast}><Text>{message}</Text></View>;
+}
+// Timer cancelled if component unmounts early
+```
+
+**For setInterval:**
+
+```typescript
+useEffect(() => {
+  const intervalId = setInterval(pollForUpdates, 5000);
+  return () => clearInterval(intervalId);
+}, []);
+```
+
+Reference: [React Native Memory Leak Prevention](https://instamobile.io/blog/react-native-memory-leak-fixes/)

package/.gemini/antigravity/skills/expo-react-native-performance/references/mem-limit-list-data.md

@@ -0,0 +1,69 @@
+---
+title: Limit List Data in Memory
+impact: MEDIUM
+impactDescription: prevents out-of-memory crashes
+tags: mem, lists, pagination, windowing
+---
+
+## Limit List Data in Memory
+
+Storing thousands of items in state consumes significant memory. Implement pagination or windowing to keep only visible data plus a buffer in memory.
+
+**Incorrect (loading all data into memory):**
+
+```typescript
+// screens/MessageHistory.tsx
+export function MessageHistory({ conversationId }: Props) {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    // Loads ALL messages - could be 10,000+ items
+    fetchAllMessages(conversationId).then(setMessages);
+  }, [conversationId]);
+
+  return (
+    <FlashList
+      data={messages}  // 10,000 items in memory
+      renderItem={({ item }) => <MessageBubble message={item} />}
+      estimatedItemSize={80}
+    />
+  );
+}
+// Memory grows unbounded, crashes on low-end devices
+```
+
+**Correct (paginated with cleanup):**
+
+```typescript
+// screens/MessageHistory.tsx
+const PAGE_SIZE = 50;
+
+export function MessageHistory({ conversationId }: Props) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [cursor, setCursor] = useState<string | null>(null);
+
+  const loadMore = useCallback(async () => {
+    const newMessages = await fetchMessages(conversationId, cursor, PAGE_SIZE);
+    setMessages((prev) => {
+      const combined = [...prev, ...newMessages];
+      // Keep max 200 messages in memory
+      return combined.slice(-200);
+    });
+    setCursor(newMessages[newMessages.length - 1]?.id ?? null);
+  }, [conversationId, cursor]);
+
+  return (
+    <FlashList
+      data={messages}
+      renderItem={({ item }) => <MessageBubble message={item} />}
+      onEndReached={loadMore}
+      estimatedItemSize={80}
+    />
+  );
+}
+// Memory capped at ~200 items, older items garbage collected
+```
+
+**For infinite lists:** Consider using a library like `react-query` with `useInfiniteQuery` that handles pagination automatically.
+
+Reference: [FlatList Performance](https://reactnative.dev/docs/optimizing-flatlist-configuration)

package/.gemini/antigravity/skills/expo-react-native-performance/references/platform-android-overdraw.md

@@ -0,0 +1,63 @@
+---
+title: Reduce Android Overdraw
+impact: LOW-MEDIUM
+impactDescription: 20-30% rendering improvement on Android
+tags: platform, android, overdraw, rendering
+---
+
+## Reduce Android Overdraw
+
+Overdraw occurs when the same pixel is drawn multiple times per frame. On Android, excessive overdraw significantly impacts performance. Remove unnecessary backgrounds and flatten view hierarchies.
+
+**Incorrect (multiple overlapping backgrounds):**
+
+```typescript
+// components/ProductCard.tsx
+export function ProductCard({ product }: Props) {
+  return (
+    <View style={{ backgroundColor: 'white' }}>
+      <View style={{ backgroundColor: 'white', padding: 16 }}>
+        <View style={{ backgroundColor: '#f5f5f5', borderRadius: 8 }}>
+          <Image source={{ uri: product.image }} style={styles.image} />
+        </View>
+        <View style={{ backgroundColor: 'white' }}>
+          <Text>{product.name}</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+// Same pixels painted 3-4 times per frame
+```
+
+**Correct (single background, flat hierarchy):**
+
+```typescript
+// components/ProductCard.tsx
+export function ProductCard({ product }: Props) {
+  return (
+    <View style={styles.card}>
+      <Image source={{ uri: product.image }} style={styles.image} />
+      <Text style={styles.name}>{product.name}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: 'white',
+    padding: 16,
+    borderRadius: 8,
+  },
+  image: { /* ... */ },
+  name: { /* ... */ },
+});
+// Each pixel painted only once
+```
+
+**Debug overdraw on Android:**
+1. Developer Options > Debug GPU Overdraw
+2. Blue = 1× overdraw, Green = 2×, Pink = 3×, Red = 4×
+3. Target: mostly blue with minimal green
+
+Reference: [Android Overdraw](https://developer.android.com/topic/performance/rendering/overdraw)

package/.gemini/antigravity/skills/expo-react-native-performance/references/platform-android-proguard.md

@@ -0,0 +1,63 @@
+---
+title: Enable ProGuard for Android Release
+impact: LOW-MEDIUM
+impactDescription: 10-20% smaller APK size
+tags: platform, android, proguard, bundle-size
+---
+
+## Enable ProGuard for Android Release
+
+ProGuard shrinks, obfuscates, and optimizes Android code. It removes unused Java/Kotlin code from your APK, reducing size and improving load time.
+
+**Incorrect (ProGuard disabled):**
+
+```groovy
+// android/app/build.gradle
+android {
+    buildTypes {
+        release {
+            minifyEnabled false
+            shrinkResources false
+        }
+    }
+}
+// Full APK includes all library code, even unused
+```
+
+**Correct (ProGuard enabled):**
+
+```groovy
+// android/app/build.gradle
+android {
+    buildTypes {
+        release {
+            minifyEnabled true
+            shrinkResources true
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+```
+
+```proguard
+# android/app/proguard-rules.pro
+# Keep React Native
+-keep class com.facebook.react.** { *; }
+-keep class com.facebook.hermes.** { *; }
+
+# Keep your app's models
+-keep class com.yourapp.models.** { *; }
+
+# Common rules for libraries
+-dontwarn okio.**
+-dontwarn javax.annotation.**
+```
+
+**Benefits:**
+- 10-20% smaller APK
+- Code obfuscation for security
+- Dead code elimination
+
+**Note:** Test thoroughly after enabling—ProGuard can break reflection-based code.
+
+Reference: [Enable Proguard](https://reactnative.dev/docs/signed-apk-android#enabling-proguard-to-reduce-the-size-of-the-apk-optional)

package/.gemini/antigravity/skills/expo-react-native-performance/references/platform-conditional-render.md

@@ -0,0 +1,81 @@
+---
+title: Use Platform-Specific Optimizations Conditionally
+impact: LOW-MEDIUM
+impactDescription: 2-3× better performance on target platform
+tags: platform, conditional, ios, android
+---
+
+## Use Platform-Specific Optimizations Conditionally
+
+iOS and Android have different performance characteristics. Apply platform-specific optimizations where they matter most.
+
+**Incorrect (same approach for both platforms):**
+
+```typescript
+// components/AnimatedCard.tsx
+import { Animated } from 'react-native';
+
+export function AnimatedCard({ children, visible }: Props) {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 300,
+      // Can't use native driver with shadow on Android
+      useNativeDriver: true,
+    }).start();
+  }, [visible]);
+
+  return (
+    <Animated.View style={[styles.card, { opacity }]}>
+      {children}
+    </Animated.View>
+  );
+}
+```
+
+**Correct (platform-optimized):**
+
+```typescript
+// components/AnimatedCard.tsx
+import { Platform, Animated } from 'react-native';
+import Reanimated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+
+export function AnimatedCard({ children, visible }: Props) {
+  // iOS: Use Animated API (lightweight for simple opacity)
+  // Android: Use Reanimated (better performance with shadows)
+  const AnimatedContainer = Platform.select({
+    ios: AnimatedContainerIOS,
+    android: AnimatedContainerAndroid,
+  })!;
+
+  return <AnimatedContainer visible={visible}>{children}</AnimatedContainer>;
+}
+
+function AnimatedContainerIOS({ children, visible }: Props) {
+  const opacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  }, [visible]);
+  return <Animated.View style={{ opacity }}>{children}</Animated.View>;
+}
+
+function AnimatedContainerAndroid({ children, visible }: Props) {
+  const style = useAnimatedStyle(() => ({
+    opacity: withTiming(visible ? 1 : 0, { duration: 300 }),
+  }));
+  return <Reanimated.View style={style}>{children}</Reanimated.View>;
+}
+```
+
+**Common platform differences:**
+- Shadow rendering (expensive on Android)
+- List scrolling (FlashList critical on Android)
+- Font rendering (iOS more efficient)
+
+Reference: [Platform Module](https://reactnative.dev/docs/platform-specific-code)

package/.gemini/antigravity/skills/expo-react-native-performance/references/platform-ios-text-rendering.md

@@ -0,0 +1,57 @@
+---
+title: Optimize iOS Text Rendering
+impact: LOW-MEDIUM
+impactDescription: faster text layout on iOS
+tags: platform, ios, text, rendering
+---
+
+## Optimize iOS Text Rendering
+
+iOS Text components can be expensive to render, especially with custom fonts or complex layouts. Use `allowFontScaling={false}` for fixed-size text and avoid unnecessary text nesting.
+
+**Incorrect (nested Text, slow layout):**
+
+```typescript
+// components/PriceDisplay.tsx
+export function PriceDisplay({ price, currency }: Props) {
+  return (
+    <View>
+      <Text style={styles.price}>
+        <Text style={styles.currency}>{currency}</Text>
+        <Text style={styles.amount}>{price.toFixed(2)}</Text>
+        <Text style={styles.decimal}>.{(price % 1).toFixed(2).slice(2)}</Text>
+      </Text>
+    </View>
+  );
+}
+// Nested Text requires multiple layout passes
+```
+
+**Correct (flat structure, optimized):**
+
+```typescript
+// components/PriceDisplay.tsx
+export function PriceDisplay({ price, currency }: Props) {
+  const formattedPrice = `${currency}${price.toFixed(2)}`;
+
+  return (
+    <Text
+      style={styles.price}
+      allowFontScaling={false}  // Skip accessibility scaling calculation
+      numberOfLines={1}         // Single line, skip line break calculation
+    >
+      {formattedPrice}
+    </Text>
+  );
+}
+// Single Text node, minimal layout calculation
+```
+
+**When to use `allowFontScaling={false}`:**
+- Icons and logos
+- Fixed-size UI elements
+- Performance-critical list items
+
+**Note:** Don't disable font scaling for body text—accessibility matters.
+
+Reference: [Text Component](https://reactnative.dev/docs/text)