agentic-team-templates 0.3.0

package/templates/mobile/.cursorrules/performance.md

@@ -0,0 +1,345 @@
+# Mobile Performance
+
+Optimizing mobile app performance for smooth user experience.
+
+## Performance Goals
+
+- **60 FPS**: Smooth animations and scrolling
+- **< 3s**: Cold start time
+- **Responsive**: Touch feedback < 100ms
+- **Efficient**: Minimal battery drain
+
+## List Performance
+
+### Virtualization
+
+Only render visible items.
+
+```tsx
+// React Native FlatList
+<FlatList
+  data={items}
+  renderItem={({ item }) => <ItemComponent item={item} />}
+  keyExtractor={(item) => item.id}
+  // Performance optimizations
+  removeClippedSubviews={true}
+  maxToRenderPerBatch={10}
+  windowSize={5}
+  initialNumToRender={10}
+  getItemLayout={(data, index) => ({
+    length: ITEM_HEIGHT,
+    offset: ITEM_HEIGHT * index,
+    index,
+  })}
+/>
+```
+
+### Optimized List Items
+
+```tsx
+// Memoize list items
+const ItemComponent = memo(({ item }: { item: Item }) => (
+  <View style={styles.item}>
+    <Text>{item.title}</Text>
+  </View>
+));
+
+// Memoize callbacks
+const renderItem = useCallback(
+  ({ item }: { item: Item }) => <ItemComponent item={item} />,
+  []
+);
+
+const keyExtractor = useCallback((item: Item) => item.id, []);
+```
+
+## Rendering Optimization
+
+### Avoid Unnecessary Re-renders
+
+```tsx
+// Bad: Inline objects cause re-renders
+<View style={{ padding: 10 }}>
+
+// Good: Define styles outside
+const styles = StyleSheet.create({
+  container: { padding: 10 },
+});
+<View style={styles.container}>
+
+// Bad: Inline functions cause re-renders
+<Button onPress={() => handlePress(id)} />
+
+// Good: Memoize callbacks
+const handlePressCallback = useCallback(() => handlePress(id), [id]);
+<Button onPress={handlePressCallback} />
+```
+
+### Memoization
+
+```tsx
+// Memoize expensive components
+const ExpensiveComponent = memo(({ data }) => {
+  // Heavy rendering
+});
+
+// Memoize computed values
+const sortedData = useMemo(
+  () => data.slice().sort((a, b) => a.name.localeCompare(b.name)),
+  [data]
+);
+
+// Memoize callbacks
+const handleSubmit = useCallback((values) => {
+  api.submit(values);
+}, []);
+```
+
+### Debounce Expensive Operations
+
+```tsx
+// Debounce search input
+const debouncedSearch = useMemo(
+  () => debounce((query: string) => {
+    performSearch(query);
+  }, 300),
+  []
+);
+
+<TextInput
+  onChangeText={(text) => {
+    setQuery(text);
+    debouncedSearch(text);
+  }}
+/>
+```
+
+## Image Optimization
+
+### Proper Sizing
+
+```tsx
+// Specify dimensions
+<Image
+  source={{ uri: imageUrl }}
+  style={{ width: 100, height: 100 }}
+  resizeMode="cover"
+/>
+
+// Use appropriate image sizes from server
+const getImageUrl = (id: string, size: 'thumb' | 'medium' | 'full') => {
+  const dimensions = { thumb: 100, medium: 300, full: 1000 };
+  return `${API_URL}/images/${id}?w=${dimensions[size]}`;
+};
+```
+
+### Caching
+
+```tsx
+// Use FastImage for better caching
+import FastImage from 'react-native-fast-image';
+
+<FastImage
+  source={{
+    uri: imageUrl,
+    priority: FastImage.priority.normal,
+    cache: FastImage.cacheControl.immutable,
+  }}
+  style={styles.image}
+/>
+```
+
+### Lazy Loading
+
+```tsx
+// Load images as they come into view
+<FlatList
+  data={images}
+  renderItem={({ item }) => (
+    <FastImage
+      source={{ uri: item.url }}
+      style={styles.image}
+    />
+  )}
+  // Images outside window won't load
+  windowSize={3}
+/>
+```
+
+## Animations
+
+### Use Native Driver
+
+```tsx
+// Animate on native thread
+Animated.timing(animatedValue, {
+  toValue: 1,
+  duration: 300,
+  useNativeDriver: true,  // Key for performance
+}).start();
+
+// Native driver supports: transform, opacity
+// Does NOT support: width, height, margin, padding, colors
+```
+
+### Use Reanimated for Complex Animations
+
+```tsx
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+
+function AnimatedCard() {
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const onPressIn = () => {
+    scale.value = withSpring(0.95);
+  };
+
+  const onPressOut = () => {
+    scale.value = withSpring(1);
+  };
+
+  return (
+    <Pressable onPressIn={onPressIn} onPressOut={onPressOut}>
+      <Animated.View style={[styles.card, animatedStyle]}>
+        {/* Content */}
+      </Animated.View>
+    </Pressable>
+  );
+}
+```
+
+## Startup Performance
+
+### Defer Non-Critical Work
+
+```tsx
+function App() {
+  useEffect(() => {
+    // Defer analytics, crash reporting setup
+    InteractionManager.runAfterInteractions(() => {
+      initializeAnalytics();
+      initializeCrashReporting();
+    });
+  }, []);
+}
+```
+
+### Lazy Load Screens
+
+```tsx
+const SettingsScreen = lazy(() => import('./screens/SettingsScreen'));
+
+function AppNavigator() {
+  return (
+    <Suspense fallback={<ScreenLoader />}>
+      <Stack.Screen name="Settings" component={SettingsScreen} />
+    </Suspense>
+  );
+}
+```
+
+## Memory Management
+
+### Avoid Memory Leaks
+
+```tsx
+useEffect(() => {
+  const subscription = eventEmitter.addListener('event', handler);
+
+  // Always cleanup
+  return () => subscription.remove();
+}, []);
+
+useEffect(() => {
+  let isMounted = true;
+
+  fetchData().then((data) => {
+    if (isMounted) {  // Check before setting state
+      setData(data);
+    }
+  });
+
+  return () => {
+    isMounted = false;
+  };
+}, []);
+```
+
+### Monitor Memory
+
+```ts
+// React Native Hermes memory usage
+if (global.HermesInternal) {
+  const heapInfo = global.HermesInternal.getRuntimeProperties();
+  console.log('Heap size:', heapInfo['Heap size']);
+}
+```
+
+## Profiling
+
+### React DevTools Profiler
+
+1. Enable profiler in React DevTools
+2. Record interaction
+3. Analyze component render times
+4. Identify unnecessary re-renders
+
+### Performance Monitor
+
+```ts
+// Enable performance monitor in dev
+import { PerformanceMonitor } from 'react-native';
+
+// Shows JS/UI frame rates
+PerformanceMonitor.enable();
+```
+
+### Systrace (Android)
+
+```bash
+# Capture trace
+npx react-native profile-hermes
+
+# Analyze in Chrome DevTools
+```
+
+## Common Issues
+
+### JS Thread Blocking
+
+```tsx
+// Bad: Heavy computation on JS thread
+const processedData = heavyComputation(data);
+
+// Good: Move to background/worker
+useEffect(() => {
+  InteractionManager.runAfterInteractions(async () => {
+    const result = await heavyComputation(data);
+    setProcessedData(result);
+  });
+}, [data]);
+```
+
+### Too Many Bridge Calls
+
+```tsx
+// Bad: Multiple small updates
+items.forEach((item, i) => {
+  Animated.timing(positions[i], { toValue: i * 10 }).start();
+});
+
+// Good: Batch updates
+Animated.parallel(
+  items.map((item, i) =>
+    Animated.timing(positions[i], { toValue: i * 10 })
+  )
+).start();
+```

package/templates/mobile/.cursorrules/testing.md

@@ -0,0 +1,339 @@
+# Mobile Testing
+
+Testing strategies for mobile applications.
+
+## Testing Pyramid
+
+```
+    ╱╲         Device/E2E Tests (few, slow)
+   ╱──╲        Integration Tests
+  ╱────╲       Component Tests
+ ╱──────╲      Unit Tests (many, fast)
+```
+
+## Unit Tests
+
+Test pure functions and business logic.
+
+```ts
+// utils/formatters.test.ts
+import { formatCurrency, formatDate } from './formatters';
+
+describe('formatCurrency', () => {
+  it('formats USD correctly', () => {
+    expect(formatCurrency(1234.56, 'USD')).toBe('$1,234.56');
+  });
+
+  it('handles zero', () => {
+    expect(formatCurrency(0, 'USD')).toBe('$0.00');
+  });
+});
+
+// hooks/useCart.test.ts
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useCart } from './useCart';
+
+describe('useCart', () => {
+  it('adds item to cart', () => {
+    const { result } = renderHook(() => useCart());
+
+    act(() => {
+      result.current.addItem({ id: '1', name: 'Product', price: 10 });
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.total).toBe(10);
+  });
+});
+```
+
+## Component Tests
+
+Test components in isolation.
+
+```tsx
+// components/Button.test.tsx
+import { render, fireEvent } from '@testing-library/react-native';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders label correctly', () => {
+    const { getByText } = render(<Button label="Submit" onPress={() => {}} />);
+    expect(getByText('Submit')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(<Button label="Submit" onPress={onPress} />);
+
+    fireEvent.press(getByText('Submit'));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when loading', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <Button label="Submit" onPress={onPress} loading />
+    );
+
+    fireEvent.press(getByText('Submit'));
+
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});
+```
+
+### Testing with Async Operations
+
+```tsx
+// screens/UserProfile.test.tsx
+import { render, waitFor } from '@testing-library/react-native';
+import { UserProfile } from './UserProfile';
+
+jest.mock('../services/api');
+
+describe('UserProfile', () => {
+  it('displays user data after loading', async () => {
+    api.getUser.mockResolvedValue({
+      id: '1',
+      name: 'John Doe',
+      email: 'john@example.com',
+    });
+
+    const { getByText, queryByTestId } = render(<UserProfile userId="1" />);
+
+    // Loading state
+    expect(queryByTestId('loading')).toBeTruthy();
+
+    // Data loaded
+    await waitFor(() => {
+      expect(getByText('John Doe')).toBeTruthy();
+      expect(getByText('john@example.com')).toBeTruthy();
+    });
+  });
+
+  it('shows error on failure', async () => {
+    api.getUser.mockRejectedValue(new Error('Network error'));
+
+    const { getByText } = render(<UserProfile userId="1" />);
+
+    await waitFor(() => {
+      expect(getByText(/error/i)).toBeTruthy();
+    });
+  });
+});
+```
+
+## Integration Tests
+
+Test navigation and screen interactions.
+
+```tsx
+// navigation/AuthFlow.test.tsx
+import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { AuthNavigator } from './AuthNavigator';
+
+const renderWithNavigation = (component: React.ReactElement) => {
+  return render(
+    <NavigationContainer>{component}</NavigationContainer>
+  );
+};
+
+describe('Auth Flow', () => {
+  it('navigates from login to signup', () => {
+    const { getByText } = renderWithNavigation(<AuthNavigator />);
+
+    fireEvent.press(getByText("Don't have an account? Sign up"));
+
+    expect(getByText('Create Account')).toBeTruthy();
+  });
+
+  it('logs in and navigates to home', async () => {
+    api.login.mockResolvedValue({ token: 'abc', user: { id: '1' } });
+
+    const { getByPlaceholderText, getByText } = renderWithNavigation(
+      <AuthNavigator />
+    );
+
+    fireEvent.changeText(getByPlaceholderText('Email'), 'test@example.com');
+    fireEvent.changeText(getByPlaceholderText('Password'), 'password123');
+    fireEvent.press(getByText('Log In'));
+
+    await waitFor(() => {
+      expect(getByText('Welcome')).toBeTruthy();  // Home screen
+    });
+  });
+});
+```
+
+## E2E Tests (Detox)
+
+Test full app on device/simulator.
+
+```ts
+// e2e/login.e2e.ts
+describe('Login Flow', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('should login successfully', async () => {
+    await element(by.id('email-input')).typeText('test@example.com');
+    await element(by.id('password-input')).typeText('password123');
+    await element(by.id('login-button')).tap();
+
+    await expect(element(by.id('home-screen'))).toBeVisible();
+  });
+
+  it('should show error for invalid credentials', async () => {
+    await element(by.id('email-input')).typeText('wrong@example.com');
+    await element(by.id('password-input')).typeText('wrongpassword');
+    await element(by.id('login-button')).tap();
+
+    await expect(element(by.text('Invalid credentials'))).toBeVisible();
+  });
+});
+```
+
+### Detox Best Practices
+
+```ts
+// Use testID for reliable selectors
+<TouchableOpacity testID="submit-button" onPress={onSubmit}>
+  <Text>Submit</Text>
+</TouchableOpacity>
+
+// Wait for elements properly
+await waitFor(element(by.id('list-item-0')))
+  .toBeVisible()
+  .withTimeout(5000);
+
+// Handle animations
+await element(by.id('button')).tap();
+await waitFor(element(by.id('modal'))).toBeVisible();
+
+// Scroll to elements
+await element(by.id('scroll-view')).scrollTo('bottom');
+await element(by.id('scroll-view')).scroll(200, 'down');
+```
+
+## Mocking
+
+### Mock Native Modules
+
+```ts
+// jest.setup.js
+jest.mock('@react-native-async-storage/async-storage', () =>
+  require('@react-native-async-storage/async-storage/jest/async-storage-mock')
+);
+
+jest.mock('react-native-device-info', () => ({
+  getVersion: () => '1.0.0',
+  getBuildNumber: () => '1',
+}));
+
+jest.mock('@react-native-community/netinfo', () => ({
+  addEventListener: jest.fn(() => jest.fn()),
+  fetch: jest.fn(() => Promise.resolve({ isConnected: true })),
+}));
+```
+
+### Mock Navigation
+
+```tsx
+const mockNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({
+    navigate: mockNavigate,
+    goBack: jest.fn(),
+  }),
+}));
+```
+
+## Snapshot Testing
+
+```tsx
+// Use for complex UI that shouldn't change unintentionally
+describe('ProductCard', () => {
+  it('matches snapshot', () => {
+    const tree = render(
+      <ProductCard
+        product={{
+          id: '1',
+          name: 'Test Product',
+          price: 29.99,
+          image: 'https://example.com/image.jpg',
+        }}
+      />
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});
+```
+
+## Test Organization
+
+```
+src/
+├── components/
+│   ├── Button/
+│   │   ├── Button.tsx
+│   │   └── Button.test.tsx
+│   └── ...
+├── screens/
+│   ├── Home/
+│   │   ├── HomeScreen.tsx
+│   │   └── HomeScreen.test.tsx
+│   └── ...
+├── hooks/
+│   ├── useAuth.ts
+│   └── useAuth.test.ts
+└── utils/
+    ├── formatters.ts
+    └── formatters.test.ts
+
+e2e/
+├── login.e2e.ts
+├── checkout.e2e.ts
+└── helpers/
+    └── testUtils.ts
+```
+
+## CI/CD Testing
+
+```yaml
+# .github/workflows/test.yml
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm ci
+      - run: npm test -- --coverage
+
+  e2e-ios:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci
+      - run: detox build --configuration ios.sim.release
+      - run: detox test --configuration ios.sim.release
+
+  e2e-android:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci
+      - run: detox build --configuration android.emu.release
+      - run: detox test --configuration android.emu.release
+```