@harness-engineering/cli 1.23.1 → 1.24.0

package/dist/agents/skills/claude-code/mobile-network-patterns/SKILL.md

@@ -0,0 +1,274 @@
+# Mobile Network Patterns
+
+> Handle network requests, offline support, caching, and connectivity monitoring in React Native
+
+## When to Use
+
+- Setting up API communication in a React Native app
+- Implementing offline-first or offline-tolerant behavior
+- Caching API responses for instant loading
+- Monitoring network connectivity and adapting UI
+- Implementing retry logic and optimistic updates
+
+## Instructions
+
+1. **Use TanStack Query (React Query) for server state management.** It handles caching, background refetching, retry logic, and offline support out of the box.
+
+```bash
+npm install @tanstack/react-query
+```
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      gcTime: 30 * 60 * 1000, // 30 minutes (formerly cacheTime)
+      retry: 3,
+      retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
+    },
+  },
+});
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Navigation />
+    </QueryClientProvider>
+  );
+}
+```
+
+2. **Create typed API hooks with TanStack Query.**
+
+```typescript
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+function useOrders() {
+  return useQuery({
+    queryKey: ['orders'],
+    queryFn: async (): Promise<Order[]> => {
+      const response = await fetch(`${API_URL}/orders`);
+      if (!response.ok) throw new Error('Failed to fetch orders');
+      return response.json();
+    },
+  });
+}
+
+function useCreateOrder() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (input: CreateOrderInput) => {
+      const response = await fetch(`${API_URL}/orders`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(input),
+      });
+      if (!response.ok) throw new Error('Failed to create order');
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['orders'] });
+    },
+  });
+}
+```
+
+3. **Monitor network connectivity with `@react-native-community/netinfo`.**
+
+```bash
+npx expo install @react-native-community/netinfo
+```
+
+```typescript
+import NetInfo from '@react-native-community/netinfo';
+import { onlineManager } from '@tanstack/react-query';
+
+// Integrate with TanStack Query — pauses queries when offline
+onlineManager.setEventListener((setOnline) => {
+  return NetInfo.addEventListener((state) => {
+    setOnline(!!state.isConnected);
+  });
+});
+
+// Use in components
+function useNetworkStatus() {
+  const [isConnected, setIsConnected] = useState(true);
+
+  useEffect(() => {
+    return NetInfo.addEventListener((state) => {
+      setIsConnected(!!state.isConnected);
+    });
+  }, []);
+
+  return isConnected;
+}
+```
+
+4. **Persist query cache for offline-first behavior.**
+
+```typescript
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const persister = createAsyncStoragePersister({
+  storage: AsyncStorage,
+  key: 'REACT_QUERY_CACHE',
+});
+
+export default function App() {
+  return (
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister, maxAge: 24 * 60 * 60 * 1000 }}
+    >
+      <Navigation />
+    </PersistQueryClientProvider>
+  );
+}
+```
+
+5. **Implement optimistic updates for responsive mutations.**
+
+```typescript
+function useToggleFavorite() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (productId: string) =>
+      fetch(`${API_URL}/favorites/${productId}`, { method: 'POST' }),
+    onMutate: async (productId) => {
+      await queryClient.cancelQueries({ queryKey: ['product', productId] });
+      const previous = queryClient.getQueryData<Product>(['product', productId]);
+
+      queryClient.setQueryData<Product>(['product', productId], (old) =>
+        old ? { ...old, isFavorite: !old.isFavorite } : old
+      );
+
+      return { previous };
+    },
+    onError: (_err, productId, context) => {
+      queryClient.setQueryData(['product', productId], context?.previous);
+    },
+    onSettled: (_data, _err, productId) => {
+      queryClient.invalidateQueries({ queryKey: ['product', productId] });
+    },
+  });
+}
+```
+
+6. **Build an API client with interceptors for auth and error handling.**
+
+```typescript
+class ApiClient {
+  private baseUrl: string;
+  private getToken: () => Promise<string | null>;
+
+  constructor(baseUrl: string, getToken: () => Promise<string | null>) {
+    this.baseUrl = baseUrl;
+    this.getToken = getToken;
+  }
+
+  async request<T>(path: string, options: RequestInit = {}): Promise<T> {
+    const token = await this.getToken();
+    const response = await fetch(`${this.baseUrl}${path}`, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        ...options.headers,
+      },
+    });
+
+    if (response.status === 401) {
+      // Trigger token refresh or logout
+      throw new AuthError('Session expired');
+    }
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new ApiError(response.status, error.message ?? 'Request failed');
+    }
+
+    return response.json();
+  }
+}
+```
+
+7. **Show connectivity status in the UI.**
+
+```tsx
+function OfflineBanner() {
+  const isConnected = useNetworkStatus();
+
+  if (isConnected) return null;
+
+  return (
+    <View style={styles.banner}>
+      <Text style={styles.bannerText}>You are offline. Some features may be limited.</Text>
+    </View>
+  );
+}
+```
+
+8. **Implement request timeout for mobile networks.** Mobile connections can hang without failing. Add explicit timeouts.
+
+```typescript
+async function fetchWithTimeout(url: string, options: RequestInit = {}, timeout = 15000) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeout);
+
+  try {
+    return await fetch(url, { ...options, signal: controller.signal });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+```
+
+## Details
+
+**Offline strategy spectrum:**
+
+- **Online-only:** Show error when offline. Simplest, appropriate for real-time apps.
+- **Cache-then-network:** Show cached data immediately, fetch fresh data in background. Good for content apps.
+- **Offline-first:** Full local database with sync. Complex but provides the best UX for productivity apps.
+
+**TanStack Query network modes:**
+
+- `online` (default): Queries pause when offline, resume when online
+- `always`: Queries run regardless of connectivity (for local data sources)
+- `offlineFirst`: Try cache first, then network
+
+**Retry strategies:** Use exponential backoff with jitter for retries. Mobile networks are unreliable — aggressive retrying wastes battery and data. Default to 3 retries with `1s, 2s, 4s` delays.
+
+**Common mistakes:**
+
+- Not handling network errors (fetch does not throw on 4xx/5xx — check `response.ok`)
+- Not setting request timeouts (default is infinite on React Native)
+- Caching user-specific data without clearing on logout
+- Not debouncing search/autocomplete requests (each keystroke fires a request)
+
+## Source
+
+https://tanstack.com/query/latest
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/claude-code/mobile-network-patterns/skill.yaml

@@ -0,0 +1,40 @@
+name: mobile-network-patterns
+version: '1.0.0'
+description: Handle network requests, offline support, and connectivity monitoring in React Native
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.native.*'
+  - '**/api/**'
+  - '**/services/**'
+related_skills:
+  - mobile-storage-patterns
+  - mobile-performance-patterns
+stack_signals:
+  - react-native
+  - expo
+  - typescript
+keywords:
+  - networking
+  - fetch
+  - offline
+  - connectivity
+  - retry
+  - tanstack-query
+  - optimistic
+metadata:
+  author: community
+  upstream: tanstack.com/query
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/claude-code/mobile-performance-patterns/SKILL.md

@@ -0,0 +1,207 @@
+# Mobile Performance Patterns
+
+> Optimize React Native app performance with profiling, memoization, lazy loading, and native thread management
+
+## When to Use
+
+- App feels sluggish during scrolling, navigation, or data loading
+- Startup time is too slow (> 2 seconds to interactive)
+- Animations drop below 60fps
+- Bundle size is too large (> 10MB)
+- Identifying and fixing unnecessary re-renders
+
+## Instructions
+
+1. **Enable Hermes engine.** Hermes is the optimized JavaScript engine for React Native. It improves startup time, reduces memory usage, and compiles bytecode at build time. Expo enables Hermes by default since SDK 48.
+
+```json
+// app.json
+{
+  "expo": {
+    "jsEngine": "hermes"
+  }
+}
+```
+
+2. **Minimize re-renders with `React.memo`, `useMemo`, and `useCallback`.**
+
+```tsx
+// Memoize components that receive the same props frequently
+const ProductCard = memo(function ProductCard({ product }: { product: Product }) {
+  return (
+    <View>
+      <Image source={{ uri: product.imageUrl }} style={styles.image} />
+      <Text>{product.name}</Text>
+      <Text>${product.price}</Text>
+    </View>
+  );
+});
+
+// Memoize expensive computations
+function OrderList({ orders, filter }: Props) {
+  const filteredOrders = useMemo(
+    () => orders.filter((o) => o.status === filter).sort((a, b) => b.date - a.date),
+    [orders, filter]
+  );
+
+  // Stable callback reference for child components
+  const handlePress = useCallback(
+    (orderId: string) => {
+      navigation.navigate('OrderDetail', { orderId });
+    },
+    [navigation]
+  );
+
+  return <FlatList data={filteredOrders} renderItem={/* ... */} />;
+}
+```
+
+3. **Use `useCallback` for FlatList `renderItem` and `keyExtractor`.**
+
+```tsx
+const renderItem = useCallback(
+  ({ item }: { item: Order }) => <OrderCard order={item} onPress={handlePress} />,
+  [handlePress]
+);
+
+const keyExtractor = useCallback((item: Order) => item.id, []);
+
+<FlatList data={orders} renderItem={renderItem} keyExtractor={keyExtractor} />;
+```
+
+4. **Lazy-load screens and heavy components.**
+
+```tsx
+import { lazy, Suspense } from 'react';
+
+const HeavyChart = lazy(() => import('./components/HeavyChart'));
+
+function Dashboard() {
+  return (
+    <Suspense fallback={<ChartSkeleton />}>
+      <HeavyChart data={chartData} />
+    </Suspense>
+  );
+}
+```
+
+5. **Optimize images.** Images are often the largest performance bottleneck.
+
+```tsx
+import { Image } from 'expo-image';
+
+// expo-image provides caching, blurhash placeholders, and memory management
+<Image
+  source={{ uri: product.imageUrl }}
+  placeholder={{ blurhash: product.blurhash }}
+  contentFit="cover"
+  transition={200}
+  style={styles.image}
+  recyclingKey={product.id}
+/>;
+```
+
+- Use appropriate image sizes (do not load 4K images for thumbnails)
+- Use WebP format for smaller file sizes
+- Use `expo-image` instead of React Native's `Image` for better caching
+
+6. **Profile with React DevTools and Flipper.**
+
+```bash
+# Enable the React DevTools profiler
+npx react-devtools
+```
+
+- Open the Profiler tab to see which components re-render and why
+- Look for components that re-render when their props have not changed
+- Check for slow renders (> 16ms per frame for 60fps)
+
+7. **Reduce bundle size with tree shaking and lazy imports.**
+
+```typescript
+// Bad — imports the entire library
+import { format, parse, addDays, subDays, isAfter } from 'date-fns';
+
+// Good — import only what you need (tree-shakeable)
+import format from 'date-fns/format';
+import addDays from 'date-fns/addDays';
+
+// Check bundle size
+npx expo-doctor --check-dependencies
+```
+
+8. **Optimize startup time.**
+   - Defer non-critical initialization (analytics, crash reporting) until after first render
+   - Use `expo-splash-screen` to keep the splash visible until critical data loads
+   - Minimize synchronous storage reads during startup
+   - Pre-load fonts and critical assets with `expo-font` and `expo-asset`
+
+```typescript
+import * as SplashScreen from 'expo-splash-screen';
+
+SplashScreen.preventAutoHideAsync();
+
+function App() {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    async function prepare() {
+      await loadFonts();
+      await loadCriticalData();
+      setReady(true);
+    }
+    prepare();
+  }, []);
+
+  const onLayoutRootView = useCallback(async () => {
+    if (ready) await SplashScreen.hideAsync();
+  }, [ready]);
+
+  if (!ready) return null;
+
+  return <View onLayout={onLayoutRootView}>{/* app content */}</View>;
+}
+```
+
+9. **Avoid bridge traffic for animations.** Use Reanimated (UI thread) instead of `Animated` (JS thread). Use `useAnimatedStyle` instead of `style` objects that depend on animated values.
+
+10. **Monitor performance in production** with tools like Sentry Performance or custom metrics.
+
+## Details
+
+**React Native threading model:** React Native has three threads — the JS thread (runs your React code), the UI/Main thread (renders native views), and the Shadow thread (calculates layout with Yoga). Performance problems usually fall into: JS thread overload (expensive re-renders), bridge congestion (too much data crossing), or main thread blocking (synchronous native calls).
+
+**Common re-render causes:**
+
+- Parent component re-renders (wrap children in `memo`)
+- New object/array references in props (use `useMemo`)
+- New function references in props (use `useCallback`)
+- Context value changes (split contexts by update frequency)
+
+**Memory management:**
+
+- Large image caches can cause OOM — set cache limits
+- Unmounted components that still hold subscriptions — clean up in `useEffect` return
+- Large lists without virtualization — always use FlatList or FlashList
+
+**New Architecture (Fabric + TurboModules):** The new architecture removes the bridge, enabling synchronous communication between JS and native. It improves performance for interop-heavy operations. Available in Expo SDK 51+.
+
+## Source
+
+https://reactnative.dev/docs/performance
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/claude-code/mobile-performance-patterns/skill.yaml

@@ -0,0 +1,40 @@
+name: mobile-performance-patterns
+version: '1.0.0'
+description: Optimize React Native app performance with profiling, memoization, and native thread management
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.native.*'
+  - '**/screens/**'
+  - '**/components/**'
+related_skills:
+  - mobile-flatlist-patterns
+  - mobile-animation-patterns
+stack_signals:
+  - react-native
+  - expo
+  - typescript
+keywords:
+  - performance
+  - profiling
+  - memoization
+  - hermes
+  - re-renders
+  - bundle-size
+  - startup
+metadata:
+  author: community
+  upstream: reactnative.dev/docs/performance
+state:
+  persistent: false
+  files: []
+depends_on: []