aigroup-workflow 2.1.2 → 2.2.1

package/skills/react-native-expert/references/list-optimization.md

@@ -1,204 +0,0 @@
-# List Optimization
-
-## Optimized FlatList
-
-```typescript
-import { FlatList, ListRenderItem } from 'react-native';
-import { memo, useCallback } from 'react';
-
-interface Item {
-  id: string;
-  title: string;
-  subtitle: string;
-}
-
-// Memoized list item
-const ListItem = memo(function ListItem({
-  item,
-  onPress
-}: {
-  item: Item;
-  onPress: (id: string) => void;
-}) {
-  return (
-    <Pressable onPress={() => onPress(item.id)} style={styles.item}>
-      <Text style={styles.title}>{item.title}</Text>
-      <Text style={styles.subtitle}>{item.subtitle}</Text>
-    </Pressable>
-  );
-});
-
-function OptimizedList({ data }: { data: Item[] }) {
-  // Memoize callbacks
-  const handlePress = useCallback((id: string) => {
-    console.log('Selected:', id);
-  }, []);
-
-  const renderItem: ListRenderItem<Item> = useCallback(
-    ({ item }) => <ListItem item={item} onPress={handlePress} />,
-    [handlePress]
-  );
-
-  const keyExtractor = useCallback((item: Item) => item.id, []);
-
-  // Fixed height for getItemLayout
-  const getItemLayout = useCallback(
-    (_: any, index: number) => ({
-      length: ITEM_HEIGHT,
-      offset: ITEM_HEIGHT * index,
-      index,
-    }),
-    []
-  );
-
-  return (
-    <FlatList
-      data={data}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
-      getItemLayout={getItemLayout}
-      // Performance props
-      removeClippedSubviews
-      maxToRenderPerBatch={10}
-      windowSize={5}
-      initialNumToRender={10}
-      updateCellsBatchingPeriod={50}
-    />
-  );
-}
-
-const ITEM_HEIGHT = 72;
-```
-
-## SectionList
-
-```typescript
-import { SectionList } from 'react-native';
-
-interface Section {
-  title: string;
-  data: Item[];
-}
-
-function GroupedList({ sections }: { sections: Section[] }) {
-  const renderSectionHeader = useCallback(
-    ({ section }: { section: Section }) => (
-      <View style={styles.sectionHeader}>
-        <Text style={styles.sectionTitle}>{section.title}</Text>
-      </View>
-    ),
-    []
-  );
-
-  return (
-    <SectionList
-      sections={sections}
-      renderItem={renderItem}
-      renderSectionHeader={renderSectionHeader}
-      keyExtractor={keyExtractor}
-      stickySectionHeadersEnabled
-    />
-  );
-}
-```
-
-## Pull to Refresh
-
-```typescript
-function RefreshableList({ data, onRefresh }: Props) {
-  const [refreshing, setRefreshing] = useState(false);
-
-  const handleRefresh = useCallback(async () => {
-    setRefreshing(true);
-    await onRefresh();
-    setRefreshing(false);
-  }, [onRefresh]);
-
-  return (
-    <FlatList
-      data={data}
-      renderItem={renderItem}
-      refreshControl={
-        <RefreshControl
-          refreshing={refreshing}
-          onRefresh={handleRefresh}
-          tintColor="#007AFF"
-        />
-      }
-    />
-  );
-}
-```
-
-## Infinite Scroll
-
-```typescript
-function InfiniteList() {
-  const [data, setData] = useState<Item[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-
-  const loadMore = useCallback(async () => {
-    if (loading || !hasMore) return;
-
-    setLoading(true);
-    const newItems = await fetchMoreItems(data.length);
-
-    if (newItems.length === 0) {
-      setHasMore(false);
-    } else {
-      setData(prev => [...prev, ...newItems]);
-    }
-    setLoading(false);
-  }, [data.length, loading, hasMore]);
-
-  const renderFooter = useCallback(() => {
-    if (!loading) return null;
-    return <ActivityIndicator style={styles.loader} />;
-  }, [loading]);
-
-  return (
-    <FlatList
-      data={data}
-      renderItem={renderItem}
-      onEndReached={loadMore}
-      onEndReachedThreshold={0.5}
-      ListFooterComponent={renderFooter}
-    />
-  );
-}
-```
-
-## FlashList (Alternative)
-
-```typescript
-import { FlashList } from '@shopify/flash-list';
-
-function FastList({ data }: { data: Item[] }) {
-  return (
-    <FlashList
-      data={data}
-      renderItem={renderItem}
-      estimatedItemSize={72}
-      keyExtractor={keyExtractor}
-    />
-  );
-}
-```
-
-## Quick Reference
-
-| Prop | Purpose |
-|------|---------|
-| `removeClippedSubviews` | Unmount off-screen items |
-| `maxToRenderPerBatch` | Items per render batch |
-| `windowSize` | Render window multiplier |
-| `initialNumToRender` | Initial items to render |
-| `getItemLayout` | Skip measurement (fixed height) |
-
-| Optimization | When |
-|--------------|------|
-| `memo()` | All list items |
-| `useCallback` | renderItem, keyExtractor |
-| `getItemLayout` | Fixed height items |
-| `FlashList` | Very large lists |

package/skills/react-native-expert/references/platform-handling.md

@@ -1,188 +0,0 @@
-# Platform Handling
-
-## Platform.select
-
-```typescript
-import { Platform, StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  card: {
-    padding: 16,
-    borderRadius: 12,
-    backgroundColor: '#fff',
-    ...Platform.select({
-      ios: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 8,
-      },
-      android: {
-        elevation: 4,
-      },
-    }),
-  },
-  text: {
-    fontFamily: Platform.select({
-      ios: 'Helvetica Neue',
-      android: 'Roboto',
-    }),
-  },
-});
-```
-
-## Platform.OS
-
-```typescript
-import { Platform } from 'react-native';
-
-function MyComponent() {
-  const isIOS = Platform.OS === 'ios';
-  const isAndroid = Platform.OS === 'android';
-
-  return (
-    <View>
-      {isIOS && <IOSOnlyComponent />}
-      <Text>{isAndroid ? 'Android' : 'iOS'}</Text>
-    </View>
-  );
-}
-```
-
-## Platform-Specific Files
-
-```
-components/
-├── Button.tsx           # Shared logic
-├── Button.ios.tsx       # iOS-specific
-└── Button.android.tsx   # Android-specific
-```
-
-```typescript
-// Import resolves to correct platform file
-import Button from './components/Button';
-```
-
-## SafeAreaView
-
-```typescript
-import { SafeAreaView, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-// Method 1: SafeAreaView component
-function Screen() {
-  return (
-    <SafeAreaView style={styles.container}>
-      <Content />
-    </SafeAreaView>
-  );
-}
-
-// Method 2: useSafeAreaInsets hook (more control)
-function CustomHeader() {
-  const insets = useSafeAreaInsets();
-
-  return (
-    <View style={[styles.header, { paddingTop: insets.top }]}>
-      <Text>Header</Text>
-    </View>
-  );
-}
-
-// Method 3: SafeAreaProvider context
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-
-function App() {
-  return (
-    <SafeAreaProvider>
-      <Navigation />
-    </SafeAreaProvider>
-  );
-}
-```
-
-## KeyboardAvoidingView
-
-```typescript
-import { KeyboardAvoidingView, Platform } from 'react-native';
-
-function FormScreen() {
-  return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={{ flex: 1 }}
-      keyboardVerticalOffset={Platform.select({ ios: 88, android: 0 })}
-    >
-      <ScrollView>
-        <TextInput placeholder="Name" />
-        <TextInput placeholder="Email" />
-      </ScrollView>
-    </KeyboardAvoidingView>
-  );
-}
-```
-
-## StatusBar
-
-```typescript
-import { StatusBar, Platform } from 'react-native';
-
-function Screen() {
-  return (
-    <>
-      <StatusBar
-        barStyle={Platform.OS === 'ios' ? 'dark-content' : 'light-content'}
-        backgroundColor={Platform.OS === 'android' ? '#000' : undefined}
-      />
-      <Content />
-    </>
-  );
-}
-```
-
-## Android Back Button
-
-```typescript
-import { useEffect } from 'react';
-import { BackHandler, Platform } from 'react-native';
-
-function useBackHandler(handler: () => boolean) {
-  useEffect(() => {
-    if (Platform.OS !== 'android') return;
-
-    const subscription = BackHandler.addEventListener(
-      'hardwareBackPress',
-      handler
-    );
-
-    return () => subscription.remove();
-  }, [handler]);
-}
-
-// Usage
-function Screen() {
-  useBackHandler(() => {
-    if (hasUnsavedChanges) {
-      showDiscardAlert();
-      return true; // Prevent default back
-    }
-    return false; // Allow default back
-  });
-}
-```
-
-## Quick Reference
-
-| API | Purpose |
-|-----|---------|
-| `Platform.OS` | Get platform ('ios' / 'android') |
-| `Platform.select()` | Platform-specific values |
-| `Platform.Version` | OS version number |
-| `.ios.tsx` / `.android.tsx` | Platform-specific files |
-
-| Component | Purpose |
-|-----------|---------|
-| `SafeAreaView` | Avoid notch/home indicator |
-| `KeyboardAvoidingView` | Keyboard handling |
-| `StatusBar` | Status bar styling |
-| `BackHandler` | Android back button |

package/skills/react-native-expert/references/project-structure.md

@@ -1,171 +0,0 @@
-# Project Structure
-
-## Expo Router Structure
-
-```
-my-app/
-├── app/                      # File-based routing
-│   ├── _layout.tsx           # Root layout
-│   ├── index.tsx             # Home screen
-│   ├── +not-found.tsx        # 404 screen
-│   ├── (tabs)/               # Tab navigator group
-│   │   ├── _layout.tsx
-│   │   ├── index.tsx
-│   │   ├── search.tsx
-│   │   └── profile.tsx
-│   ├── (auth)/               # Auth screens (no tabs)
-│   │   ├── _layout.tsx
-│   │   ├── login.tsx
-│   │   └── register.tsx
-│   └── [id].tsx              # Dynamic route
-├── components/
-│   ├── ui/                   # Reusable UI components
-│   │   ├── Button.tsx
-│   │   ├── Card.tsx
-│   │   └── Input.tsx
-│   └── features/             # Feature-specific components
-│       ├── ProductCard.tsx
-│       └── UserAvatar.tsx
-├── hooks/
-│   ├── useAuth.ts
-│   ├── useStorage.ts
-│   └── useApi.ts
-├── services/
-│   ├── api.ts                # API client
-│   └── auth.ts               # Auth service
-├── stores/
-│   └── useUserStore.ts       # Zustand stores
-├── constants/
-│   ├── colors.ts
-│   └── layout.ts
-├── types/
-│   └── index.ts
-├── utils/
-│   └── helpers.ts
-├── assets/
-│   ├── images/
-│   └── fonts/
-├── app.json
-├── babel.config.js
-└── tsconfig.json
-```
-
-## app.json Configuration
-
-```json
-{
-  "expo": {
-    "name": "My App",
-    "slug": "my-app",
-    "version": "1.0.0",
-    "scheme": "myapp",
-    "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "splash": {
-      "image": "./assets/images/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "com.company.myapp"
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      },
-      "package": "com.company.myapp"
-    },
-    "plugins": [
-      "expo-router"
-    ],
-    "experiments": {
-      "typedRoutes": true
-    }
-  }
-}
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./*"],
-      "@/components/*": ["components/*"],
-      "@/hooks/*": ["hooks/*"],
-      "@/services/*": ["services/*"],
-      "@/stores/*": ["stores/*"],
-      "@/types/*": ["types/*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
-}
-```
-
-## babel.config.js
-
-```javascript
-module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          root: ['.'],
-          alias: {
-            '@': '.',
-            '@/components': './components',
-            '@/hooks': './hooks',
-          },
-        },
-      ],
-      'react-native-reanimated/plugin', // Must be last
-    ],
-  };
-};
-```
-
-## Essential Dependencies
-
-```json
-{
-  "dependencies": {
-    "expo": "~50.0.0",
-    "expo-router": "~3.4.0",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "@react-navigation/native": "^6.1.0",
-    "react-native-reanimated": "~3.6.0",
-    "react-native-gesture-handler": "~2.14.0",
-    "zustand": "^4.5.0",
-    "@tanstack/react-query": "^5.0.0",
-    "expo-image": "~1.10.0",
-    "react-native-mmkv": "^2.11.0"
-  },
-  "devDependencies": {
-    "@types/react": "~18.2.0",
-    "typescript": "^5.3.0"
-  }
-}
-```
-
-## Quick Reference
-
-| Directory | Purpose |
-|-----------|---------|
-| `app/` | File-based routes |
-| `components/ui/` | Reusable UI |
-| `components/features/` | Feature components |
-| `hooks/` | Custom hooks |
-| `services/` | API, auth services |
-| `stores/` | State management |
-| `constants/` | App constants |
-| `types/` | TypeScript types |