aigroup-workflow 2.1.1 → 2.2.0

package/skills/fullstack-guardian/references/frontend-patterns.md

@@ -1,340 +0,0 @@
-# Frontend Patterns
-
-## TypeScript Configuration
-
-### Strict Setup
-```json
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "baseUrl": ".",
-    "paths": {
-      "@/components/*": ["src/components/*"],
-      "@/hooks/*": ["src/hooks/*"],
-      "@/utils/*": ["src/utils/*"],
-      "@/types/*": ["src/types/*"]
-    }
-  }
-}
-```
-
-## Real-time Features
-
-### WebSocket Hook
-```typescript
-function useWebSocket(url: string) {
-  const [isConnected, setIsConnected] = useState(false);
-  const [lastMessage, setLastMessage] = useState<any>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-
-  useEffect(() => {
-    const ws = new WebSocket(url);
-    wsRef.current = ws;
-
-    ws.onopen = () => setIsConnected(true);
-    ws.onclose = () => setIsConnected(false);
-    ws.onmessage = (event) => setLastMessage(JSON.parse(event.data));
-
-    return () => ws.close();
-  }, [url]);
-
-  const sendMessage = useCallback((data: any) => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      wsRef.current.send(JSON.stringify(data));
-    }
-  }, []);
-
-  return { isConnected, lastMessage, sendMessage };
-}
-
-// Usage
-function Chat() {
-  const { isConnected, lastMessage, sendMessage } = useWebSocket('ws://localhost:3000');
-
-  return (
-    <div>
-      <div>Status: {isConnected ? 'Connected' : 'Disconnected'}</div>
-      <button onClick={() => sendMessage({ text: 'Hello' })}>Send</button>
-    </div>
-  );
-}
-```
-
-### Optimistic Updates
-```typescript
-// React Query with optimistic update
-function useUpdateTodo() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (todo: Todo) => api.updateTodo(todo),
-
-    // Optimistically update cache before mutation
-    onMutate: async (newTodo) => {
-      // Cancel outgoing refetches
-      await queryClient.cancelQueries({ queryKey: ['todos'] });
-
-      // Snapshot previous value
-      const previous = queryClient.getQueryData(['todos']);
-
-      // Optimistically update
-      queryClient.setQueryData(['todos'], (old: Todo[]) =>
-        old.map(todo => todo.id === newTodo.id ? newTodo : todo)
-      );
-
-      return { previous };
-    },
-
-    // Rollback on error
-    onError: (err, newTodo, context) => {
-      queryClient.setQueryData(['todos'], context?.previous);
-      toast.error('Failed to update todo');
-    },
-
-    // Refetch on success
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['todos'] });
-    },
-  });
-}
-```
-
-### Presence Hook
-```typescript
-function usePresence(roomId: string) {
-  const [users, setUsers] = useState<User[]>([]);
-  const { sendMessage, lastMessage } = useWebSocket(`ws://localhost:3000/presence`);
-
-  useEffect(() => {
-    sendMessage({ type: 'join', roomId });
-    const interval = setInterval(() => sendMessage({ type: 'heartbeat', roomId }), 30000);
-    return () => {
-      sendMessage({ type: 'leave', roomId });
-      clearInterval(interval);
-    };
-  }, [roomId, sendMessage]);
-
-  useEffect(() => {
-    if (lastMessage?.type === 'presence_update') setUsers(lastMessage.users);
-  }, [lastMessage]);
-
-  return users;
-}
-```
-
-## Performance Optimization
-
-### Code Splitting & Lazy Loading
-```typescript
-import { lazy, Suspense } from 'react';
-
-// Lazy load route components
-const Dashboard = lazy(() => import('./pages/Dashboard'));
-const Profile = lazy(() => import('./pages/Profile'));
-
-function App() {
-  return (
-    <Suspense fallback={<LoadingSpinner />}>
-      <Routes>
-        <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/profile" element={<Profile />} />
-      </Routes>
-    </Suspense>
-  );
-}
-
-// Component-level code splitting
-const HeavyChart = lazy(() => import('./components/HeavyChart'));
-
-function Dashboard() {
-  return (
-    <div>
-      <h1>Dashboard</h1>
-      <Suspense fallback={<div>Loading chart...</div>}>
-        <HeavyChart data={data} />
-      </Suspense>
-    </div>
-  );
-}
-```
-
-### Bundle Analysis
-```javascript
-// webpack.config.js
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-module.exports = {
-  plugins: [
-    new BundleAnalyzerPlugin({ analyzerMode: 'static' })
-  ]
-};
-```
-
-### Lazy Load Images
-```typescript
-function LazyImage({ src, alt }: Props) {
-  const [imgSrc, setImgSrc] = useState('/placeholder.jpg');
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setImgSrc(src);
-          observer.disconnect();
-        }
-      },
-      { rootMargin: '100px' }
-    );
-
-    if (imgRef.current) observer.observe(imgRef.current);
-    return () => observer.disconnect();
-  }, [src]);
-
-  return <img ref={imgRef} src={imgSrc} alt={alt} />;
-}
-```
-
-## Accessibility
-
-### Accessible Modal
-```typescript
-function Modal({ isOpen, onClose, title, children }: Props) {
-  const titleId = useId();
-
-  useEffect(() => {
-    if (isOpen) document.body.style.overflow = 'hidden';
-    return () => { document.body.style.overflow = ''; };
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div role="dialog" aria-modal="true" aria-labelledby={titleId} onClick={onClose}>
-      <div onClick={(e) => e.stopPropagation()}>
-        <h2 id={titleId}>{title}</h2>
-        {children}
-        <button onClick={onClose} aria-label="Close modal">×</button>
-      </div>
-    </div>
-  );
-}
-```
-
-### Keyboard Navigation
-```typescript
-function Dropdown({ items }: Props) {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        setSelectedIndex(i => (i + 1) % items.length);
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setSelectedIndex(i => (i - 1 + items.length) % items.length);
-        break;
-      case 'Enter':
-        selectItem(items[selectedIndex]);
-        break;
-    }
-  };
-
-  return <div role="combobox" onKeyDown={handleKeyDown}>{/* ... */}</div>;
-}
-```
-
-### Focus Trap
-```typescript
-function useFocusTrap(ref: RefObject<HTMLElement>) {
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-
-    const focusable = element.querySelectorAll(
-      'a[href], button:not([disabled]), textarea, input, select'
-    );
-    const first = focusable[0] as HTMLElement;
-    const last = focusable[focusable.length - 1] as HTMLElement;
-
-    const handleTab = (e: KeyboardEvent) => {
-      if (e.key !== 'Tab') return;
-      if (e.shiftKey && document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-
-    element.addEventListener('keydown', handleTab);
-    first?.focus();
-    return () => element.removeEventListener('keydown', handleTab);
-  }, [ref]);
-}
-```
-
-## Testing
-
-### Component Testing with Testing Library
-```typescript
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-describe('UserForm', () => {
-  it('validates email format', async () => {
-    const user = userEvent.setup();
-    render(<UserForm onSubmit={jest.fn()} />);
-
-    const emailInput = screen.getByLabelText(/email/i);
-    await user.type(emailInput, 'invalid-email');
-    await user.click(screen.getByRole('button', { name: /submit/i }));
-
-    expect(await screen.findByText(/invalid email/i)).toBeInTheDocument();
-  });
-
-  it('submits valid form', async () => {
-    const onSubmit = jest.fn();
-    const user = userEvent.setup();
-    render(<UserForm onSubmit={onSubmit} />);
-
-    await user.type(screen.getByLabelText(/name/i), 'John Doe');
-    await user.type(screen.getByLabelText(/email/i), 'john@example.com');
-    await user.click(screen.getByRole('button', { name: /submit/i }));
-
-    await waitFor(() => {
-      expect(onSubmit).toHaveBeenCalledWith({
-        name: 'John Doe',
-        email: 'john@example.com',
-      });
-    });
-  });
-});
-```
-
-## Quick Reference
-
-| Pattern | Use Case | Key Benefit |
-|---------|----------|-------------|
-| WebSocket | Real-time updates | Bidirectional communication |
-| Optimistic Updates | Better UX | Instant feedback |
-| Code Splitting | Large apps | Faster initial load |
-| Lazy Loading | Images, routes | Reduce bundle size |
-| ARIA attributes | Screen readers | Accessibility compliance |
-| Focus trap | Modals | Keyboard navigation |

package/skills/fullstack-guardian/references/integration-patterns.md

@@ -1,333 +0,0 @@
-# Integration Patterns
-
-## Type Safety Across Stack
-
-### Shared Type Definitions
-```typescript
-// packages/shared/types.ts
-export interface User {
-  id: string;
-  email: string;
-  name: string;
-  role: 'admin' | 'user';
-}
-
-export interface CreateUserDto {
-  email: string;
-  name: string;
-  password: string;
-}
-
-export interface UpdateUserDto {
-  email?: string;
-  name?: string;
-}
-
-// API response wrapper
-export interface ApiResponse<T> {
-  data: T;
-  meta?: {
-    page?: number;
-    limit?: number;
-    total?: number;
-  };
-}
-```
-
-### Shared Validation (Zod)
-```typescript
-// packages/shared/schemas.ts
-import { z } from 'zod';
-
-export const createUserSchema = z.object({
-  email: z.string().email(),
-  name: z.string().min(1).max(100),
-  password: z.string().min(12),
-});
-
-export type CreateUserDto = z.infer<typeof createUserSchema>;
-
-// Backend: const validated = createUserSchema.parse(req.body);
-// Frontend: useForm({ resolver: zodResolver(createUserSchema) });
-```
-
-### API Client Generation
-```typescript
-// Generated from OpenAPI spec
-import { UserApi } from '@/generated/api';
-
-const user = await userApi.getUser({ id: '123' }); // Type-safe
-```
-
-## Architecture Decisions
-
-### Monorepo Structure
-```
-workspace/
-├── packages/
-│   ├── shared/           # Shared types, utils, schemas
-│   ├── backend/          # Node.js/Python backend
-│   ├── frontend/         # React/Vue frontend
-│   ├── mobile/           # React Native (optional)
-│   └── e2e-tests/        # End-to-end tests
-├── package.json
-└── turbo.json           # Turborepo config
-```
-
-```json
-// package.json (workspace root)
-{
-  "private": true,
-  "workspaces": ["packages/*"],
-  "scripts": {
-    "dev": "turbo run dev",
-    "build": "turbo run build",
-    "test": "turbo run test"
-  }
-}
-
-// turbo.json
-{
-  "pipeline": {
-    "build": {
-      "dependsOn": ["^build"],
-      "outputs": ["dist/**"]
-    },
-    "dev": {
-      "cache": false
-    },
-    "test": {
-      "dependsOn": ["build"],
-      "outputs": []
-    }
-  }
-}
-```
-
-### BFF (Backend for Frontend)
-```typescript
-// Aggregates multiple services for frontend
-@Controller('bff')
-export class BFFController {
-  @Get('dashboard')
-  async getDashboard(@CurrentUser() user: User) {
-    const [profile, orders, analytics] = await Promise.all([
-      this.userService.getProfile(user.id),
-      this.orderService.getRecentOrders(user.id, 5),
-      this.analyticsService.getUserStats(user.id),
-    ]);
-
-    return { profile, orders, analytics };
-  }
-}
-```
-
-### Microservices vs Monolith Decision Matrix
-
-| Factor | Monolith | Microservices |
-|--------|----------|---------------|
-| Team size | < 10 developers | > 10 developers |
-| Deployment | Simple, all-at-once | Complex, independent |
-| Scaling | Vertical | Horizontal per service |
-| Development speed | Fast initially | Slower setup, faster iteration |
-| Infrastructure | Simpler | More complex (K8s, service mesh) |
-| Data consistency | ACID transactions | Eventual consistency |
-
-## Deployment Pipeline
-
-### CI/CD Configuration (GitHub Actions)
-```yaml
-# .github/workflows/ci.yml
-name: CI/CD Pipeline
-
-on:
-  push:
-    branches: [main, develop]
-  pull_request:
-    branches: [main]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linter
-        run: npm run lint
-
-      - name: Run unit tests
-        run: npm run test
-
-      - name: Run E2E tests
-        run: npm run test:e2e
-
-      - name: Build
-        run: npm run build
-
-  deploy-staging:
-    needs: test
-    if: github.ref == 'refs/heads/develop'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Deploy to staging
-        run: |
-          echo "Deploy to staging environment"
-          # Deploy commands here
-
-  deploy-production:
-    needs: test
-    if: github.ref == 'refs/heads/main'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Deploy to production
-        run: |
-          echo "Deploy to production environment"
-          # Blue-green deployment commands
-```
-
-### Database Migrations
-```typescript
-// TypeORM migration
-export class AddUserRoles implements MigrationInterface {
-  async up(queryRunner: QueryRunner): Promise<void> {
-    await queryRunner.query(`
-      ALTER TABLE users ADD COLUMN role VARCHAR(20) DEFAULT 'user';
-      CREATE INDEX idx_users_role ON users(role);
-    `);
-  }
-
-  async down(queryRunner: QueryRunner): Promise<void> {
-    await queryRunner.query(`
-      DROP INDEX idx_users_role;
-      ALTER TABLE users DROP COLUMN role;
-    `);
-  }
-}
-
-// Run: npm run migration:run
-// Revert: npm run migration:revert
-```
-
-### Feature Flags
-```typescript
-class FeatureFlags {
-  private flags = new Map<string, boolean>();
-
-  constructor() {
-    this.flags.set('new_dashboard', process.env.FEATURE_NEW_DASHBOARD === 'true');
-  }
-
-  isEnabled(flag: string): boolean {
-    return this.flags.get(flag) ?? false;
-  }
-}
-
-// Backend: if (flags.isEnabled('new_dashboard')) return getNewDashboard();
-// Frontend: {flags.isEnabled('new_dashboard') ? <New /> : <Old />}
-```
-
-### Blue-Green Deployment
-```bash
-#!/bin/bash
-docker build -t myapp:new .
-kubectl apply -f k8s/green-deployment.yml
-kubectl wait --for=condition=ready pod -l app=myapp,env=green --timeout=300s
-kubectl patch service myapp -p '{"spec":{"selector":{"env":"green"}}}'
-# Keep blue for rollback, then: kubectl delete deployment myapp-blue
-```
-
-## End-to-End Testing
-
-### Playwright E2E Tests
-```typescript
-import { test, expect } from '@playwright/test';
-
-test('should login successfully', async ({ page }) => {
-  await page.goto('/login');
-  await page.fill('[name="email"]', 'test@example.com');
-  await page.fill('[name="password"]', 'password123');
-  await page.click('button[type="submit"]');
-
-  await page.waitForResponse(res =>
-    res.url().includes('/api/auth/login') && res.status() === 200
-  );
-
-  await expect(page).toHaveURL('/dashboard');
-  await expect(page.locator('[data-testid="user-name"]')).toHaveText('Test User');
-});
-```
-
-### Load Testing with k6
-```javascript
-import http from 'k6/http';
-import { check, sleep } from 'k6';
-
-export const options = {
-  stages: [
-    { duration: '30s', target: 20 },  // Ramp up to 20 users
-    { duration: '1m', target: 20 },   // Stay at 20 users
-    { duration: '30s', target: 0 },   // Ramp down to 0 users
-  ],
-  thresholds: {
-    http_req_duration: ['p(95)<500'], // 95% of requests under 500ms
-    http_req_failed: ['rate<0.01'],   // Error rate under 1%
-  },
-};
-
-export default function () {
-  const res = http.get('https://api.example.com/users');
-
-  check(res, {
-    'status is 200': (r) => r.status === 200,
-    'response time < 500ms': (r) => r.timings.duration < 500,
-  });
-
-  sleep(1);
-}
-```
-
-## Environment Management
-
-### Multi-environment Config
-```typescript
-interface Environment {
-  api: { baseUrl: string; timeout: number };
-  database: { host: string; port: number; name: string };
-  features: { analytics: boolean; betaFeatures: boolean };
-}
-
-const environments: Record<string, Environment> = {
-  development: {
-    api: { baseUrl: 'http://localhost:3000', timeout: 30000 },
-    database: { host: 'localhost', port: 5432, name: 'myapp_dev' },
-    features: { analytics: false, betaFeatures: true },
-  },
-  production: {
-    api: { baseUrl: 'https://api.example.com', timeout: 10000 },
-    database: { host: process.env.DB_HOST!, port: 5432, name: 'myapp_prod' },
-    features: { analytics: true, betaFeatures: false },
-  },
-};
-
-export const config = environments[process.env.NODE_ENV || 'development'];
-```
-
-## Quick Reference
-
-| Pattern | Use Case | Key Benefit |
-|---------|----------|-------------|
-| Shared Types | Type safety | Prevent API contract drift |
-| Zod Schemas | Validation | DRY validation logic |
-| Monorepo | Multi-package project | Code sharing & consistency |
-| BFF Pattern | Complex frontends | Optimized API for UI needs |
-| Feature Flags | Gradual rollout | Safe deployments |
-| Blue-Green Deploy | Zero downtime | Instant rollback |
-| E2E Tests | User flows | Catch integration bugs |
-| Load Testing | Performance validation | Ensure scalability |