aigroup-workflow 2.1.1 → 2.2.0

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

@@ -1,174 +0,0 @@
-# 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/react-native-expert/SKILL.md

@@ -1,185 +0,0 @@
----
-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/react-native-expert/references/expo-router.md

@@ -1,187 +0,0 @@
-# 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 |