@ivannxbt/ai-config 0.1.0

package/.agents/skills/expo-react-native-performance/references/rerender-derive-state.md

@@ -0,0 +1,58 @@
+---
+title: Derive State Instead of Syncing
+impact: HIGH
+impactDescription: eliminates redundant state and sync bugs
+tags: rerender, derived-state, state-management, computation
+---
+
+## Derive State Instead of Syncing
+
+When one value can be computed from another, derive it during render instead of storing it in separate state. Synced state causes extra renders and can get out of sync.
+
+**Incorrect (synced state, double render):**
+
+```typescript
+// screens/ProductDetails.tsx
+export function ProductDetails({ product }: Props) {
+  const [quantity, setQuantity] = useState(1);
+  const [totalPrice, setTotalPrice] = useState(product.price);
+
+  useEffect(() => {
+    setTotalPrice(product.price * quantity);  // Causes second render
+  }, [product.price, quantity]);
+
+  return (
+    <View>
+      <QuantityPicker value={quantity} onChange={setQuantity} />
+      <Text>Total: ${totalPrice}</Text>
+    </View>
+  );
+}
+```
+
+**Correct (derived value, single render):**
+
+```typescript
+// screens/ProductDetails.tsx
+export function ProductDetails({ product }: Props) {
+  const [quantity, setQuantity] = useState(1);
+  const totalPrice = product.price * quantity;  // Computed during render
+
+  return (
+    <View>
+      <QuantityPicker value={quantity} onChange={setQuantity} />
+      <Text>Total: ${totalPrice}</Text>
+    </View>
+  );
+}
+```
+
+**When to derive:**
+- Filtered/sorted lists from source data
+- Computed totals, averages, counts
+- Boolean flags based on other state
+- Formatted display values
+
+**When to use useMemo:** Wrap in `useMemo` if the derivation is expensive and deps rarely change.
+
+Reference: [Choosing the State Structure](https://react.dev/learn/choosing-the-state-structure#avoid-redundant-state)

package/.agents/skills/expo-react-native-performance/references/rerender-functional-setstate.md

@@ -0,0 +1,54 @@
+---
+title: Use Functional setState Updates
+impact: HIGH
+impactDescription: eliminates state dependency from callbacks
+tags: rerender, useState, functional-update, callbacks
+---
+
+## Use Functional setState Updates
+
+When updating state based on the current value, use the functional form of setState. This eliminates the need to include state in callback dependencies, allowing truly stable callbacks.
+
+**Incorrect (state in dependency array recreates callback):**
+
+```typescript
+// screens/Counter.tsx
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  // Recreated every time count changes
+  const increment = useCallback(() => {
+    setCount(count + 1);
+  }, [count]);
+
+  return (
+    <MemoizedButton onPress={increment} />  // Re-renders on every count change
+  );
+}
+```
+
+**Correct (functional update, empty deps):**
+
+```typescript
+// screens/Counter.tsx
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  // Never recreated - truly stable callback
+  const increment = useCallback(() => {
+    setCount((c) => c + 1);
+  }, []);
+
+  return (
+    <MemoizedButton onPress={increment} />  // Never re-renders from callback change
+  );
+}
+```
+
+**Pattern applies to:**
+- Incrementing/decrementing numbers
+- Toggling booleans: `setValue(v => !v)`
+- Adding to arrays: `setItems(items => [...items, newItem])`
+- Updating object properties: `setUser(u => ({ ...u, name }))`
+
+Reference: [useState functional updates](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state)

package/.agents/skills/expo-react-native-performance/references/rerender-lazy-state-init.md

@@ -0,0 +1,55 @@
+---
+title: Use Lazy State Initialization
+impact: HIGH
+impactDescription: prevents expensive init on every render
+tags: rerender, useState, lazy-init, initialization
+---
+
+## Use Lazy State Initialization
+
+When initial state requires expensive computation, pass a function to `useState` instead of calling the computation directly. React only calls the initializer once, but direct calls run on every render.
+
+**Incorrect (expensive init runs every render):**
+
+```typescript
+// screens/Dashboard.tsx
+function parseStoredPreferences(): Preferences {
+  const stored = localStorage.getItem('prefs');
+  return stored ? JSON.parse(stored) : getDefaultPreferences();
+}
+
+export function Dashboard() {
+  // parseStoredPreferences() called EVERY render, result discarded after first
+  const [preferences, setPreferences] = useState(parseStoredPreferences());
+
+  return <PreferencesPanel prefs={preferences} />;
+}
+```
+
+**Correct (lazy init runs only once):**
+
+```typescript
+// screens/Dashboard.tsx
+function parseStoredPreferences(): Preferences {
+  const stored = localStorage.getItem('prefs');
+  return stored ? JSON.parse(stored) : getDefaultPreferences();
+}
+
+export function Dashboard() {
+  // Function reference passed - called only on mount
+  const [preferences, setPreferences] = useState(parseStoredPreferences);
+
+  return <PreferencesPanel prefs={preferences} />;
+}
+```
+
+**Note the difference:**
+- `useState(parseStoredPreferences())` - calls function, passes result
+- `useState(parseStoredPreferences)` - passes function, React calls once
+
+**Common use cases:**
+- Parsing stored data (AsyncStorage, SecureStore)
+- Creating initial data structures
+- Complex default calculations
+
+Reference: [useState lazy initialization](https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state)

package/.agents/skills/expo-react-native-performance/references/rerender-split-context.md

@@ -0,0 +1,69 @@
+---
+title: Split Context by Update Frequency
+impact: HIGH
+impactDescription: prevents cascading re-renders across app
+tags: rerender, context, state-management, splitting
+---
+
+## Split Context by Update Frequency
+
+A single context with frequently-changing values causes all consumers to re-render. Split context into separate providers based on update frequency to limit re-render scope.
+
+**Incorrect (one context, all consumers re-render):**
+
+```typescript
+// contexts/AppContext.tsx
+const AppContext = createContext<{
+  user: User;
+  theme: Theme;
+  notifications: Notification[];  // Updates frequently
+} | null>(null);
+
+export function AppProvider({ children }: Props) {
+  const [user, setUser] = useState<User | null>(null);
+  const [theme, setTheme] = useState<Theme>('light');
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  return (
+    <AppContext.Provider value={{ user, theme, notifications }}>
+      {children}
+    </AppContext.Provider>
+  );
+}
+// Every component using user or theme re-renders on new notification
+```
+
+**Correct (split by update frequency):**
+
+```typescript
+// contexts/UserContext.tsx - rarely changes
+const UserContext = createContext<User | null>(null);
+
+// contexts/ThemeContext.tsx - rarely changes
+const ThemeContext = createContext<Theme>('light');
+
+// contexts/NotificationsContext.tsx - changes frequently
+const NotificationsContext = createContext<Notification[]>([]);
+
+// App.tsx
+export function AppProvider({ children }: Props) {
+  const [user, setUser] = useState<User | null>(null);
+  const [theme, setTheme] = useState<Theme>('light');
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  return (
+    <UserContext.Provider value={user}>
+      <ThemeContext.Provider value={theme}>
+        <NotificationsContext.Provider value={notifications}>
+          {children}
+        </NotificationsContext.Provider>
+      </ThemeContext.Provider>
+    </UserContext.Provider>
+  );
+}
+// Only notification consumers re-render on new notification
+```
+
+**Alternative:** Use state management libraries like Zustand or Jotai that allow selective subscriptions.
+
+Reference: [React Context](https://react.dev/learn/passing-data-deeply-with-context)

package/.agents/skills/expo-react-native-performance/references/rerender-use-callback-handlers.md

@@ -0,0 +1,63 @@
+---
+title: Stabilize Callbacks with useCallback
+impact: HIGH
+impactDescription: prevents child re-renders from new function refs
+tags: rerender, useCallback, callbacks, stability
+---
+
+## Stabilize Callbacks with useCallback
+
+Functions defined inside components get new references on every render. When passed as props to memoized children, this breaks memoization. Use `useCallback` to maintain stable function references.
+
+**Incorrect (new callback reference breaks child memo):**
+
+```typescript
+// screens/UserSettings.tsx
+export function UserSettings({ userId }: Props) {
+  const [notifications, setNotifications] = useState(true);
+
+  // New function created every render
+  const handleSave = async () => {
+    await saveSettings(userId, { notifications });
+  };
+
+  return (
+    <>
+      <Toggle value={notifications} onValueChange={setNotifications} />
+      <SaveButton onPress={handleSave} />  {/* Re-renders on toggle */}
+    </>
+  );
+}
+
+const SaveButton = memo(({ onPress }: { onPress: () => void }) => (
+  <Pressable onPress={onPress}><Text>Save</Text></Pressable>
+));
+```
+
+**Correct (stable callback preserves child memo):**
+
+```typescript
+// screens/UserSettings.tsx
+export function UserSettings({ userId }: Props) {
+  const [notifications, setNotifications] = useState(true);
+
+  const handleSave = useCallback(async () => {
+    await saveSettings(userId, { notifications });
+  }, [userId, notifications]);
+
+  return (
+    <>
+      <Toggle value={notifications} onValueChange={setNotifications} />
+      <SaveButton onPress={handleSave} />  {/* Only re-renders when deps change */}
+    </>
+  );
+}
+
+const SaveButton = memo(({ onPress }: { onPress: () => void }) => (
+  <Pressable onPress={onPress}><Text>Save</Text></Pressable>
+));
+```
+
+**Note:** `useCallback` only helps when the callback is passed to a memoized component. Without `memo` on the child, it re-renders anyway.
+
+Reference: [useCallback](https://react.dev/reference/react/useCallback)

package/.agents/skills/expo-react-native-performance/references/rerender-use-memo-expensive.md

@@ -0,0 +1,54 @@
+---
+title: Memoize Expensive Computations with useMemo
+impact: HIGH
+impactDescription: prevents recalculation on every render
+tags: rerender, useMemo, computation, memoization
+---
+
+## Memoize Expensive Computations with useMemo
+
+Use `useMemo` to cache the result of expensive computations. Without memoization, computations run on every render, even when inputs haven't changed, blocking the JS thread.
+
+**Incorrect (filters/sorts on every render):**
+
+```typescript
+// screens/TransactionList.tsx
+export function TransactionList({ transactions, filter }: Props) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Runs on EVERY render, including unrelated state changes
+  const filteredTransactions = transactions
+    .filter((t) => t.category === filter)
+    .filter((t) => t.description.includes(searchQuery))
+    .sort((a, b) => b.date.getTime() - a.date.getTime());
+
+  return <FlashList data={filteredTransactions} /* ... */ />;
+}
+```
+
+**Correct (memoized until dependencies change):**
+
+```typescript
+// screens/TransactionList.tsx
+export function TransactionList({ transactions, filter }: Props) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredTransactions = useMemo(() => {
+    return transactions
+      .filter((t) => t.category === filter)
+      .filter((t) => t.description.includes(searchQuery))
+      .sort((a, b) => b.date.getTime() - a.date.getTime());
+  }, [transactions, filter, searchQuery]);
+
+  return <FlashList data={filteredTransactions} /* ... */ />;
+}
+```
+
+**When to use useMemo:**
+- Array filtering/sorting with 100+ items
+- Complex object transformations
+- Heavy calculations (date parsing, formatting)
+
+**When NOT to use:** Simple operations or operations that always depend on changing values.
+
+Reference: [useMemo](https://react.dev/reference/react/useMemo)

package/.agents/skills/expo-react-native-performance/references/startup-async-routes.md

@@ -0,0 +1,63 @@
+---
+title: Use Async Routes for Code Splitting
+impact: CRITICAL
+impactDescription: 30-50% smaller initial bundle
+tags: startup, bundle, code-splitting, expo-router
+---
+
+## Use Async Routes for Code Splitting
+
+Expo Router supports async routes that split your bundle by route. Only the code needed for the current screen loads initially, deferring the rest until navigation. This dramatically reduces initial bundle size and startup time.
+
+**Incorrect (all routes in initial bundle):**
+
+```typescript
+// app/_layout.tsx
+import { Stack } from 'expo-router';
+
+// All screen code loads at startup, even if never visited
+export default function Layout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" />
+      <Stack.Screen name="settings" />
+      <Stack.Screen name="profile" />
+      <Stack.Screen name="admin" />  {/* Heavy admin code loaded for all users */}
+    </Stack>
+  );
+}
+```
+
+**Correct (enable async routes in Metro config):**
+
+```javascript
+// metro.config.js
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+config.transformer = {
+  ...config.transformer,
+  asyncRequireModulePath: require.resolve('expo-router/async-require'),
+};
+
+module.exports = config;
+```
+
+```json
+// app.json
+{
+  "expo": {
+    "experiments": {
+      "asyncRoutes": true
+    }
+  }
+}
+```
+
+**How it works:**
+- Each route file becomes a separate bundle chunk
+- Chunks load on-demand when user navigates to that route
+- Initial bundle contains only the entry route
+
+Reference: [Expo Router Async Routes](https://docs.expo.dev/router/reference/async-routes/)

package/.agents/skills/expo-react-native-performance/references/startup-cherry-pick-imports.md

@@ -0,0 +1,45 @@
+---
+title: Use Direct Imports Instead of Barrel Files
+impact: CRITICAL
+impactDescription: reduces bundle by 100KB-1MB per library
+tags: startup, bundle, imports, tree-shaking
+---
+
+## Use Direct Imports Instead of Barrel Files
+
+Metro bundler doesn't tree-shake effectively. Importing from barrel files (index.js) pulls in entire libraries. Always import directly from the specific module path to include only what you need.
+
+**Incorrect (imports entire lodash library):**
+
+```typescript
+// utils/data.ts
+import { debounce, throttle } from 'lodash';
+// Bundles all 600KB of lodash even though you use 2 functions
+
+export const debouncedSearch = debounce(searchUsers, 300);
+export const throttledScroll = throttle(handleScroll, 100);
+```
+
+**Correct (imports only used functions):**
+
+```typescript
+// utils/data.ts
+import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
+// Bundles only ~2KB for the two functions
+
+export const debouncedSearch = debounce(searchUsers, 300);
+export const throttledScroll = throttle(handleScroll, 100);
+```
+
+**Common libraries requiring cherry-picking:**
+
+| Library | Bad Import | Good Import |
+|---------|------------|-------------|
+| lodash | `from 'lodash'` | `from 'lodash/debounce'` |
+| date-fns | `from 'date-fns'` | `from 'date-fns/format'` |
+| @expo/vector-icons | `from '@expo/vector-icons'` | `from '@expo/vector-icons/Ionicons'` |
+
+**Alternative:** Use `babel-plugin-lodash` or `babel-plugin-date-fns` for automatic transforms.
+
+Reference: [Callstack Bundle Optimization](https://www.callstack.com/blog/optimize-react-native-apps-javascript-bundle)

package/.agents/skills/expo-react-native-performance/references/startup-enable-hermes.md

@@ -0,0 +1,39 @@
+---
+title: Enable Hermes JavaScript Engine
+impact: CRITICAL
+impactDescription: 40% faster startup, 30% less memory
+tags: startup, hermes, javascript-engine, bundle
+---
+
+## Enable Hermes JavaScript Engine
+
+Hermes is a JavaScript engine optimized for React Native that compiles JavaScript to bytecode ahead of time. This eliminates runtime compilation overhead, resulting in faster startup times and reduced memory usage.
+
+**Incorrect (using JavaScriptCore, slower startup):**
+
+```json
+{
+  "expo": {
+    "jsEngine": "jsc"
+  }
+}
+```
+
+**Correct (using Hermes, optimized for mobile):**
+
+```json
+{
+  "expo": {
+    "jsEngine": "hermes"
+  }
+}
+```
+
+**Note:** Hermes is the default engine in Expo SDK 48+ and React Native 0.70+. Verify your app is using it by checking for `HermesInternal` in the JavaScript runtime.
+
+**Benefits:**
+- 40% faster app startup on average
+- 30% reduction in memory usage
+- Smaller app size (bytecode is more compact than JavaScript)
+
+Reference: [Using Hermes](https://reactnative.dev/docs/hermes)

package/.agents/skills/expo-react-native-performance/references/startup-preload-assets.md

@@ -0,0 +1,68 @@
+---
+title: Preload Critical Assets During Splash
+impact: CRITICAL
+impactDescription: eliminates asset loading flicker
+tags: startup, assets, preloading, expo-asset
+---
+
+## Preload Critical Assets During Splash
+
+Load critical images and fonts while the splash screen is visible. This prevents UI flicker from missing assets and ensures a smooth transition from splash to app.
+
+**Incorrect (assets load after app renders):**
+
+```typescript
+// App.tsx
+export default function App() {
+  return (
+    <View>
+      {/* Image flickers in after component mounts */}
+      <Image source={require('./assets/logo.png')} />
+      <Text style={{ fontFamily: 'Inter' }}>Welcome</Text>
+    </View>
+  );
+}
+```
+
+**Correct (assets preloaded during splash):**
+
+```typescript
+// App.tsx
+import * as SplashScreen from 'expo-splash-screen';
+import { Asset } from 'expo-asset';
+import * as Font from 'expo-font';
+
+SplashScreen.preventAutoHideAsync();
+
+export default function App() {
+  const [assetsLoaded, setAssetsLoaded] = useState(false);
+
+  useEffect(() => {
+    async function loadAssets() {
+      await Promise.all([
+        Asset.loadAsync([
+          require('./assets/logo.png'),
+          require('./assets/background.png'),
+        ]),
+        Font.loadAsync({
+          'Inter': require('./assets/fonts/Inter.ttf'),
+        }),
+      ]);
+      setAssetsLoaded(true);
+      await SplashScreen.hideAsync();
+    }
+    loadAssets();
+  }, []);
+
+  if (!assetsLoaded) return null;
+
+  return <MainApp />;
+}
+```
+
+**Benefits:**
+- Zero asset-loading flicker
+- Fonts available on first render
+- Perceived instant app startup
+
+Reference: [Expo Asset](https://docs.expo.dev/versions/latest/sdk/asset/)

package/.agents/skills/expo-react-native-performance/references/startup-remove-console-logs.md

@@ -0,0 +1,47 @@
+---
+title: Remove Console Logs in Production
+impact: CRITICAL
+impactDescription: eliminates JS thread bottleneck
+tags: startup, console, babel, production
+---
+
+## Remove Console Logs in Production
+
+Console.log statements cause JavaScript thread bottlenecks in production builds. Each log serializes data and sends it across the bridge, blocking execution. Use a Babel plugin to automatically strip console statements from production bundles.
+
+**Incorrect (console.log in production code):**
+
+```typescript
+// api/users.ts
+export async function fetchUsers(): Promise<User[]> {
+  const response = await fetch('/api/users');
+  const users = await response.json();
+  console.log('Fetched users:', users);  // Blocks JS thread in production
+  return users;
+}
+```
+
+**Correct (Babel strips console in production):**
+
+```javascript
+// babel.config.js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    env: {
+      production: {
+        plugins: ['transform-remove-console'],
+      },
+    },
+  };
+};
+```
+
+Install the plugin: `npm install babel-plugin-transform-remove-console --save-dev`
+
+**When to keep console statements:**
+- Use `console.error` for critical errors you need in crash reports
+- Wrap debug logs in `__DEV__` checks instead of relying solely on Babel
+
+Reference: [React Native Performance](https://reactnative.dev/docs/performance)

package/.agents/skills/expo-react-native-performance/references/startup-splash-screen-control.md

@@ -0,0 +1,58 @@
+---
+title: Control Splash Screen Visibility
+impact: CRITICAL
+impactDescription: prevents white flash, enables asset preloading
+tags: startup, splash-screen, expo-splash-screen, loading
+---
+
+## Control Splash Screen Visibility
+
+Use `expo-splash-screen` to manually control when the splash screen hides. This allows you to preload critical assets and data before showing the app, preventing white flashes and incomplete UI states.
+
+**Incorrect (splash hides before app is ready):**
+
+```typescript
+// App.tsx
+export default function App() {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    fetchCurrentUser().then(setUser);
+  }, []);
+
+  // User sees loading spinner after splash disappears
+  if (!user) return <LoadingSpinner />;
+
+  return <MainApp user={user} />;
+}
+```
+
+**Correct (splash stays until app is ready):**
+
+```typescript
+// App.tsx
+import * as SplashScreen from 'expo-splash-screen';
+
+SplashScreen.preventAutoHideAsync();
+
+export default function App() {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    async function prepare() {
+      const userData = await fetchCurrentUser();
+      setUser(userData);
+      await SplashScreen.hideAsync();
+    }
+    prepare();
+  }, []);
+
+  if (!user) return null;  // Splash still visible
+
+  return <MainApp user={user} />;
+}
+```
+
+**Important:** Call `preventAutoHideAsync()` in module scope (outside components) to ensure it runs before the splash screen auto-hides.
+
+Reference: [Expo SplashScreen](https://docs.expo.dev/versions/latest/sdk/splash-screen/)