aigroup-workflow 2.1.2 → 2.2.0

package/skills/frontend/react-expert/references/testing-react.md

@@ -0,0 +1,174 @@
+# Testing React
+
+## Basic Component Test
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+test('renders greeting', () => {
+  render(<Greeting name="World" />);
+  expect(screen.getByText('Hello, World!')).toBeInTheDocument();
+});
+
+test('increments counter on click', async () => {
+  const user = userEvent.setup();
+  render(<Counter />);
+
+  await user.click(screen.getByRole('button', { name: /increment/i }));
+
+  expect(screen.getByText('1')).toBeInTheDocument();
+});
+```
+
+## Query Priority
+
+```tsx
+// Preferred: Accessible queries (how users find elements)
+screen.getByRole('button', { name: /submit/i });
+screen.getByLabelText('Email');
+screen.getByPlaceholderText('Search...');
+screen.getByText('Welcome');
+
+// Fallback: Test IDs (when no accessible name)
+screen.getByTestId('custom-element');
+
+// Async queries (wait for element)
+await screen.findByText('Loading complete');
+```
+
+## Testing Forms
+
+```tsx
+test('submits form with user data', async () => {
+  const handleSubmit = vi.fn();
+  const user = userEvent.setup();
+
+  render(<ContactForm onSubmit={handleSubmit} />);
+
+  await user.type(screen.getByLabelText('Name'), 'John Doe');
+  await user.type(screen.getByLabelText('Email'), 'john@example.com');
+  await user.selectOptions(screen.getByLabelText('Topic'), 'support');
+  await user.click(screen.getByRole('button', { name: /submit/i }));
+
+  expect(handleSubmit).toHaveBeenCalledWith({
+    name: 'John Doe',
+    email: 'john@example.com',
+    topic: 'support',
+  });
+});
+```
+
+## Testing with Providers
+
+```tsx
+function renderWithProviders(
+  ui: React.ReactElement,
+  { initialState = {}, ...options } = {}
+) {
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
+          {children}
+        </ThemeProvider>
+      </QueryClientProvider>
+    );
+  }
+
+  return render(ui, { wrapper: Wrapper, ...options });
+}
+
+test('displays user data', async () => {
+  renderWithProviders(<UserProfile userId="123" />);
+
+  await screen.findByText('John Doe');
+});
+```
+
+## Mocking API Calls
+
+```tsx
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+
+const server = setupServer(
+  http.get('/api/users/:id', ({ params }) => {
+    return HttpResponse.json({ id: params.id, name: 'John' });
+  })
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+test('fetches and displays user', async () => {
+  render(<UserProfile userId="123" />);
+
+  await screen.findByText('John');
+});
+
+test('handles error', async () => {
+  server.use(
+    http.get('/api/users/:id', () => {
+      return new HttpResponse(null, { status: 500 });
+    })
+  );
+
+  render(<UserProfile userId="123" />);
+
+  await screen.findByText('Error loading user');
+});
+```
+
+## Testing Hooks
+
+```tsx
+import { renderHook, act } from '@testing-library/react';
+
+test('useCounter increments', () => {
+  const { result } = renderHook(() => useCounter());
+
+  act(() => {
+    result.current.increment();
+  });
+
+  expect(result.current.count).toBe(1);
+});
+
+test('useDebounce delays value', async () => {
+  vi.useFakeTimers();
+
+  const { result, rerender } = renderHook(
+    ({ value }) => useDebounce(value, 500),
+    { initialProps: { value: 'initial' } }
+  );
+
+  rerender({ value: 'updated' });
+  expect(result.current).toBe('initial');
+
+  await act(async () => {
+    vi.advanceTimersByTime(500);
+  });
+
+  expect(result.current).toBe('updated');
+  vi.useRealTimers();
+});
+```
+
+## Quick Reference
+
+| Query | Use When |
+|-------|----------|
+| `getByRole` | Buttons, links, headings |
+| `getByLabelText` | Form inputs |
+| `getByText` | Non-interactive text |
+| `findByX` | Async/loading content |
+| `queryByX` | Assert NOT present |
+
+| Pattern | Use Case |
+|---------|----------|
+| `userEvent.setup()` | User interactions |
+| `renderHook()` | Testing custom hooks |
+| `msw` | Mocking API calls |
+| Custom render | Wrap with providers |

package/skills/frontend/react-native-expert/SKILL.md

@@ -0,0 +1,185 @@
+---
+name: react-native-expert
+description: Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.
+license: MIT
+metadata:
+  author: https://github.com/Jeffallan
+  version: "1.1.0"
+  domain: frontend
+  triggers: React Native, Expo, mobile app, iOS, Android, cross-platform, native module
+  role: specialist
+  scope: implementation
+  output-format: code
+  related-skills: react-expert, flutter-expert, test-master
+---
+
+# React Native Expert
+
+Senior mobile engineer building production-ready cross-platform applications with React Native and Expo.
+
+## Core Workflow
+
+1. **Setup** — Expo Router or React Navigation, TypeScript config → _run `npx expo doctor` to verify environment and SDK compatibility; fix any reported issues before proceeding_
+2. **Structure** — Feature-based organization
+3. **Implement** — Components with platform handling → _verify on iOS simulator and Android emulator; check Metro bundler output for errors before moving on_
+4. **Optimize** — FlatList, images, memory → _profile with Flipper or React DevTools_
+5. **Test** — Both platforms, real devices
+
+### Error Recovery
+- **Metro bundler errors** → clear cache with `npx expo start --clear`, then restart
+- **iOS build fails** → check Xcode logs → resolve native dependency or provisioning issue → rebuild with `npx expo run:ios`
+- **Android build fails** → check `adb logcat` or Gradle output → resolve SDK/NDK version mismatch → rebuild with `npx expo run:android`
+- **Native module not found** → run `npx expo install <module>` to ensure compatible version, then rebuild native layers
+
+## Reference Guide
+
+Load detailed guidance based on context:
+
+| Topic | Reference | Load When |
+|-------|-----------|-----------|
+| Navigation | `references/expo-router.md` | Expo Router, tabs, stacks, deep linking |
+| Platform | `references/platform-handling.md` | iOS/Android code, SafeArea, keyboard |
+| Lists | `references/list-optimization.md` | FlatList, performance, memo |
+| Storage | `references/storage-hooks.md` | AsyncStorage, MMKV, persistence |
+| Structure | `references/project-structure.md` | Project setup, architecture |
+
+## Constraints
+
+### MUST DO
+- Use FlatList/SectionList for lists (not ScrollView)
+- Implement memo + useCallback for list items
+- Handle SafeAreaView for notches
+- Test on both iOS and Android real devices
+- Use KeyboardAvoidingView for forms
+- Handle Android back button in navigation
+
+### MUST NOT DO
+- Use ScrollView for large lists
+- Use inline styles extensively (creates new objects)
+- Hardcode dimensions (use Dimensions API or flex)
+- Ignore memory leaks from subscriptions
+- Skip platform-specific testing
+- Use waitFor/setTimeout for animations (use Reanimated)
+
+## Code Examples
+
+### Optimized FlatList with memo + useCallback
+
+```tsx
+import React, { memo, useCallback } from 'react';
+import { FlatList, View, Text, StyleSheet } from 'react-native';
+
+type Item = { id: string; title: string };
+
+const ListItem = memo(({ title, onPress }: { title: string; onPress: () => void }) => (
+  <View style={styles.item}>
+    <Text onPress={onPress}>{title}</Text>
+  </View>
+));
+
+export function ItemList({ data }: { data: Item[] }) {
+  const handlePress = useCallback((id: string) => {
+    console.log('pressed', id);
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item }: { item: Item }) => (
+      <ListItem title={item.title} onPress={() => handlePress(item.id)} />
+    ),
+    [handlePress]
+  );
+
+  return (
+    <FlatList
+      data={data}
+      keyExtractor={(item) => item.id}
+      renderItem={renderItem}
+      removeClippedSubviews
+      maxToRenderPerBatch={10}
+      windowSize={5}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  item: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth },
+});
+```
+
+### KeyboardAvoidingView Form
+
+```tsx
+import React from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  TextInput,
+  StyleSheet,
+  SafeAreaView,
+} from 'react-native';
+
+export function LoginForm() {
+  return (
+    <SafeAreaView style={styles.safe}>
+      <KeyboardAvoidingView
+        style={styles.flex}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
+          <TextInput style={styles.input} placeholder="Email" autoCapitalize="none" />
+          <TextInput style={styles.input} placeholder="Password" secureTextEntry />
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1 },
+  flex: { flex: 1 },
+  content: { padding: 16, gap: 12 },
+  input: { borderWidth: 1, borderRadius: 8, padding: 12, fontSize: 16 },
+});
+```
+
+### Platform-Specific Component
+
+```tsx
+import { Platform, StyleSheet, View, Text } from 'react-native';
+
+export function StatusChip({ label }: { label: string }) {
+  return (
+    <View style={styles.chip}>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 999,
+    backgroundColor: '#0a7ea4',
+    // Platform-specific shadow
+    ...Platform.select({
+      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 },
+      android: { elevation: 3 },
+    }),
+  },
+  label: { color: '#fff', fontSize: 13, fontWeight: '600' },
+});
+```
+
+## Output Format
+
+When implementing React Native features, deliver:
+1. **Component code** — TypeScript, with prop types defined
+2. **Platform handling** — `Platform.select` or `.ios.tsx` / `.android.tsx` splits as needed
+3. **Navigation integration** — route params typed, back-button handling included
+4. **Performance notes** — memo boundaries, key extractor strategy, image caching
+
+## Knowledge Reference
+
+React Native 0.73+, Expo SDK 50+, Expo Router, React Navigation 7, Reanimated 3, Gesture Handler, AsyncStorage, MMKV, React Query, Zustand

package/skills/frontend/react-native-expert/references/expo-router.md

@@ -0,0 +1,187 @@
+# Expo Router
+
+## Project Structure
+
+```
+app/
+├── _layout.tsx           # Root layout
+├── index.tsx             # Home (/)
+├── +not-found.tsx        # 404 page
+├── (tabs)/               # Tab group
+│   ├── _layout.tsx       # Tab bar config
+│   ├── index.tsx         # First tab
+│   └── profile.tsx       # Profile tab
+├── (auth)/               # Auth group (no tabs)
+│   ├── _layout.tsx
+│   ├── login.tsx
+│   └── register.tsx
+├── settings/
+│   ├── _layout.tsx       # Stack layout
+│   ├── index.tsx         # Settings main
+│   └── notifications.tsx
+└── details/[id].tsx      # Dynamic route
+```
+
+## Root Layout
+
+```typescript
+// app/_layout.tsx
+import { Stack } from 'expo-router';
+import { ThemeProvider } from '@react-navigation/native';
+
+export default function RootLayout() {
+  return (
+    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="(auth)" />
+        <Stack.Screen
+          name="details/[id]"
+          options={{ presentation: 'modal' }}
+        />
+      </Stack>
+    </ThemeProvider>
+  );
+}
+```
+
+## Tab Layout
+
+```typescript
+// app/(tabs)/_layout.tsx
+import { Tabs } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: '#007AFF',
+        headerShown: true,
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="home" color={color} size={size} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: 'Profile',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="person" color={color} size={size} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
+```
+
+## Navigation
+
+```typescript
+import { router, useLocalSearchParams, Link } from 'expo-router';
+
+// Programmatic navigation
+router.push('/details/123');           // Push to stack
+router.replace('/home');               // Replace current
+router.back();                          // Go back
+router.canGoBack();                     // Check if can go back
+
+// With params
+router.push({
+  pathname: '/details/[id]',
+  params: { id: '123', title: 'Item' },
+});
+
+// Link component
+<Link href="/profile" asChild>
+  <Pressable>
+    <Text>Go to Profile</Text>
+  </Pressable>
+</Link>
+
+// Reading params
+function DetailsScreen() {
+  const { id, title } = useLocalSearchParams<{ id: string; title?: string }>();
+  return <Text>Details for {id}</Text>;
+}
+```
+
+## Protected Routes
+
+```typescript
+// app/(auth)/_layout.tsx
+import { Redirect, Stack } from 'expo-router';
+import { useAuth } from '@/hooks/useAuth';
+
+export default function AuthLayout() {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (user) {
+    return <Redirect href="/(tabs)" />;
+  }
+
+  return <Stack screenOptions={{ headerShown: false }} />;
+}
+
+// app/(tabs)/_layout.tsx
+export default function TabLayout() {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (!user) {
+    return <Redirect href="/(auth)/login" />;
+  }
+
+  return <Tabs>...</Tabs>;
+}
+```
+
+## Deep Linking
+
+```json
+// app.json
+{
+  "expo": {
+    "scheme": "myapp",
+    "web": {
+      "bundler": "metro"
+    }
+  }
+}
+```
+
+```typescript
+// Handle: myapp://details/123
+// app/details/[id].tsx handles automatically
+```
+
+## Quick Reference
+
+| Component | Purpose |
+|-----------|---------|
+| `<Stack>` | Stack navigator |
+| `<Tabs>` | Tab navigator |
+| `<Drawer>` | Drawer navigator |
+| `<Link>` | Declarative navigation |
+
+| router method | Behavior |
+|---------------|----------|
+| `push()` | Add to stack |
+| `replace()` | Replace current |
+| `back()` | Go back |
+| `dismissAll()` | Dismiss modals |