@vudovn/antigravity-kit 1.0.1

package/templates/.agent/skills/prisma-expert/SKILL.md

@@ -0,0 +1,355 @@
+---
+name: prisma-expert
+description: Prisma ORM expert for schema design, migrations, query optimization, relations modeling, and database operations. Use PROACTIVELY for Prisma schema issues, migration problems, query performance, relation design, or database connection issues.
+---
+
+# Prisma Expert
+
+You are an expert in Prisma ORM with deep knowledge of schema design, migrations, query optimization, relations modeling, and database operations across PostgreSQL, MySQL, and SQLite.
+
+## When Invoked
+
+### Step 0: Recommend Specialist and Stop
+If the issue is specifically about:
+- **Raw SQL optimization**: Stop and recommend postgres-expert or mongodb-expert
+- **Database server configuration**: Stop and recommend database-expert
+- **Connection pooling at infrastructure level**: Stop and recommend devops-expert
+
+### Environment Detection
+```bash
+# Check Prisma version
+npx prisma --version 2>/dev/null || echo "Prisma not installed"
+
+# Check database provider
+grep "provider" prisma/schema.prisma 2>/dev/null | head -1
+
+# Check for existing migrations
+ls -la prisma/migrations/ 2>/dev/null | head -5
+
+# Check Prisma Client generation status
+ls -la node_modules/.prisma/client/ 2>/dev/null | head -3
+```
+
+### Apply Strategy
+1. Identify the Prisma-specific issue category
+2. Check for common anti-patterns in schema or queries
+3. Apply progressive fixes (minimal → better → complete)
+4. Validate with Prisma CLI and testing
+
+## Problem Playbooks
+
+### Schema Design
+**Common Issues:**
+- Incorrect relation definitions causing runtime errors
+- Missing indexes for frequently queried fields
+- Enum synchronization issues between schema and database
+- Field type mismatches
+
+**Diagnosis:**
+```bash
+# Validate schema
+npx prisma validate
+
+# Check for schema drift
+npx prisma migrate diff --from-schema-datamodel prisma/schema.prisma --to-schema-datasource prisma/schema.prisma
+
+# Format schema
+npx prisma format
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Fix relation annotations, add missing `@relation` directives
+2. **Better**: Add proper indexes with `@@index`, optimize field types
+3. **Complete**: Restructure schema with proper normalization, add composite keys
+
+**Best Practices:**
+```prisma
+// Good: Explicit relations with clear naming
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  posts     Post[]   @relation("UserPosts")
+  profile   Profile? @relation("UserProfile")
+  
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  
+  @@index([email])
+  @@map("users")
+}
+
+model Post {
+  id       String @id @default(cuid())
+  title    String
+  author   User   @relation("UserPosts", fields: [authorId], references: [id], onDelete: Cascade)
+  authorId String
+  
+  @@index([authorId])
+  @@map("posts")
+}
+```
+
+**Resources:**
+- https://www.prisma.io/docs/concepts/components/prisma-schema
+- https://www.prisma.io/docs/concepts/components/prisma-schema/relations
+
+### Migrations
+**Common Issues:**
+- Migration conflicts in team environments
+- Failed migrations leaving database in inconsistent state
+- Shadow database issues during development
+- Production deployment migration failures
+
+**Diagnosis:**
+```bash
+# Check migration status
+npx prisma migrate status
+
+# View pending migrations
+ls -la prisma/migrations/
+
+# Check migration history table
+# (use database-specific command)
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Reset development database with `prisma migrate reset`
+2. **Better**: Manually fix migration SQL, use `prisma migrate resolve`
+3. **Complete**: Squash migrations, create baseline for fresh setup
+
+**Safe Migration Workflow:**
+```bash
+# Development
+npx prisma migrate dev --name descriptive_name
+
+# Production (never use migrate dev!)
+npx prisma migrate deploy
+
+# If migration fails in production
+npx prisma migrate resolve --applied "migration_name"
+# or
+npx prisma migrate resolve --rolled-back "migration_name"
+```
+
+**Resources:**
+- https://www.prisma.io/docs/concepts/components/prisma-migrate
+- https://www.prisma.io/docs/guides/deployment/deploy-database-changes
+
+### Query Optimization
+**Common Issues:**
+- N+1 query problems with relations
+- Over-fetching data with excessive includes
+- Missing select for large models
+- Slow queries without proper indexing
+
+**Diagnosis:**
+```bash
+# Enable query logging
+# In schema.prisma or client initialization:
+# log: ['query', 'info', 'warn', 'error']
+```
+
+```typescript
+// Enable query events
+const prisma = new PrismaClient({
+  log: [
+    { emit: 'event', level: 'query' },
+  ],
+});
+
+prisma.$on('query', (e) => {
+  console.log('Query: ' + e.query);
+  console.log('Duration: ' + e.duration + 'ms');
+});
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Add includes for related data to avoid N+1
+2. **Better**: Use select to fetch only needed fields
+3. **Complete**: Use raw queries for complex aggregations, implement caching
+
+**Optimized Query Patterns:**
+```typescript
+// BAD: N+1 problem
+const users = await prisma.user.findMany();
+for (const user of users) {
+  const posts = await prisma.post.findMany({ where: { authorId: user.id } });
+}
+
+// GOOD: Include relations
+const users = await prisma.user.findMany({
+  include: { posts: true }
+});
+
+// BETTER: Select only needed fields
+const users = await prisma.user.findMany({
+  select: {
+    id: true,
+    email: true,
+    posts: {
+      select: { id: true, title: true }
+    }
+  }
+});
+
+// BEST for complex queries: Use $queryRaw
+const result = await prisma.$queryRaw`
+  SELECT u.id, u.email, COUNT(p.id) as post_count
+  FROM users u
+  LEFT JOIN posts p ON p.author_id = u.id
+  GROUP BY u.id
+`;
+```
+
+**Resources:**
+- https://www.prisma.io/docs/guides/performance-and-optimization
+- https://www.prisma.io/docs/concepts/components/prisma-client/raw-database-access
+
+### Connection Management
+**Common Issues:**
+- Connection pool exhaustion
+- "Too many connections" errors
+- Connection leaks in serverless environments
+- Slow initial connections
+
+**Diagnosis:**
+```bash
+# Check current connections (PostgreSQL)
+psql -c "SELECT count(*) FROM pg_stat_activity WHERE datname = 'your_db';"
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Configure connection limit in DATABASE_URL
+2. **Better**: Implement proper connection lifecycle management
+3. **Complete**: Use connection pooler (PgBouncer) for high-traffic apps
+
+**Connection Configuration:**
+```typescript
+// For serverless (Vercel, AWS Lambda)
+import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = global as unknown as { prisma: PrismaClient };
+
+export const prisma =
+  globalForPrisma.prisma ||
+  new PrismaClient({
+    log: process.env.NODE_ENV === 'development' ? ['query'] : [],
+  });
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
+
+// Graceful shutdown
+process.on('beforeExit', async () => {
+  await prisma.$disconnect();
+});
+```
+
+```env
+# Connection URL with pool settings
+DATABASE_URL="postgresql://user:pass@host:5432/db?connection_limit=5&pool_timeout=10"
+```
+
+**Resources:**
+- https://www.prisma.io/docs/guides/performance-and-optimization/connection-management
+- https://www.prisma.io/docs/guides/deployment/deployment-guides/deploying-to-vercel
+
+### Transaction Patterns
+**Common Issues:**
+- Inconsistent data from non-atomic operations
+- Deadlocks in concurrent transactions
+- Long-running transactions blocking reads
+- Nested transaction confusion
+
+**Diagnosis:**
+```typescript
+// Check for transaction issues
+try {
+  const result = await prisma.$transaction([...]);
+} catch (e) {
+  if (e.code === 'P2034') {
+    console.log('Transaction conflict detected');
+  }
+}
+```
+
+**Transaction Patterns:**
+```typescript
+// Sequential operations (auto-transaction)
+const [user, profile] = await prisma.$transaction([
+  prisma.user.create({ data: userData }),
+  prisma.profile.create({ data: profileData }),
+]);
+
+// Interactive transaction with manual control
+const result = await prisma.$transaction(async (tx) => {
+  const user = await tx.user.create({ data: userData });
+  
+  // Business logic validation
+  if (user.email.endsWith('@blocked.com')) {
+    throw new Error('Email domain blocked');
+  }
+  
+  const profile = await tx.profile.create({
+    data: { ...profileData, userId: user.id }
+  });
+  
+  return { user, profile };
+}, {
+  maxWait: 5000,  // Wait for transaction slot
+  timeout: 10000, // Transaction timeout
+  isolationLevel: 'Serializable', // Strictest isolation
+});
+
+// Optimistic concurrency control
+const updateWithVersion = await prisma.post.update({
+  where: { 
+    id: postId,
+    version: currentVersion  // Only update if version matches
+  },
+  data: {
+    content: newContent,
+    version: { increment: 1 }
+  }
+});
+```
+
+**Resources:**
+- https://www.prisma.io/docs/concepts/components/prisma-client/transactions
+
+## Code Review Checklist
+
+### Schema Quality
+- [ ] All models have appropriate `@id` and primary keys
+- [ ] Relations use explicit `@relation` with `fields` and `references`
+- [ ] Cascade behaviors defined (`onDelete`, `onUpdate`)
+- [ ] Indexes added for frequently queried fields
+- [ ] Enums used for fixed value sets
+- [ ] `@@map` used for table naming conventions
+
+### Query Patterns
+- [ ] No N+1 queries (relations included when needed)
+- [ ] `select` used to fetch only required fields
+- [ ] Pagination implemented for list queries
+- [ ] Raw queries used for complex aggregations
+- [ ] Proper error handling for database operations
+
+### Performance
+- [ ] Connection pooling configured appropriately
+- [ ] Indexes exist for WHERE clause fields
+- [ ] Composite indexes for multi-column queries
+- [ ] Query logging enabled in development
+- [ ] Slow queries identified and optimized
+
+### Migration Safety
+- [ ] Migrations tested before production deployment
+- [ ] Backward-compatible schema changes (no data loss)
+- [ ] Migration scripts reviewed for correctness
+- [ ] Rollback strategy documented
+
+## Anti-Patterns to Avoid
+
+1. **Implicit Many-to-Many Overhead**: Always use explicit join tables for complex relationships
+2. **Over-Including**: Don't include relations you don't need
+3. **Ignoring Connection Limits**: Always configure pool size for your environment
+4. **Raw Query Abuse**: Use Prisma queries when possible, raw only for complex cases
+5. **Migration in Production Dev Mode**: Never use `migrate dev` in production

package/templates/.agent/skills/react-expert/SKILL.md

@@ -0,0 +1,310 @@
+---
+name: react-expert
+description: Provides React 18/19 expertise including hooks, component patterns, performance optimization, state management, and Server Components. Use this skill for React component issues, hook errors, re-rendering problems, or state management challenges.
+---
+
+# React Expert
+
+You are an expert in React 18/19 with deep knowledge of hooks, component patterns, performance optimization, state management, and Server Components.
+
+## When Invoked
+
+### Step 0: Recommend Specialist and Stop
+If the issue is specifically about:
+- **Performance profiling and optimization**: Stop and recommend react-performance-expert
+- **CSS-in-JS or styling**: Stop and recommend css-styling-expert  
+- **Accessibility concerns**: Stop and recommend accessibility-expert
+- **Testing React components**: Stop and recommend the appropriate testing expert
+
+### Environment Detection
+```bash
+# Detect React version
+npm list react --depth=0 2>/dev/null | grep react@ || node -e "console.log(require('./package.json').dependencies?.react || 'Not found')" 2>/dev/null
+
+# Check for React DevTools and build tools
+if [ -f "next.config.js" ] || [ -f "next.config.mjs" ]; then echo "Next.js detected"
+elif [ -f "vite.config.js" ] || [ -f "vite.config.ts" ]; then echo "Vite detected"  
+elif [ -f "webpack.config.js" ]; then echo "Webpack detected"
+elif grep -q "react-scripts" package.json 2>/dev/null; then echo "Create React App detected"
+else echo "Unknown build tool"
+fi
+
+# Check for Strict Mode and router
+grep -r "React.StrictMode\|<StrictMode" src/ 2>/dev/null || echo "No Strict Mode found"
+npm list react-router-dom @tanstack/react-router --depth=0 2>/dev/null | grep -E "(react-router-dom|@tanstack/react-router)" || echo "No router detected"
+```
+
+### Apply Strategy
+1. Identify the React-specific issue category
+2. Check for common anti-patterns in that category
+3. Apply progressive fixes (minimal → better → complete)
+4. Validate with React DevTools and testing
+
+## Problem Playbooks
+
+### Hooks Hygiene
+**Common Issues:**
+- "Invalid hook call" - Hooks called conditionally or outside components
+- "Missing dependency" warnings - useEffect/useCallback missing deps
+- Stale closure bugs - Values not updating in callbacks
+- "Cannot update component while rendering" - State updates in render phase
+
+**Diagnosis:**
+```bash
+# Check for hook violations
+npx eslint src/ --rule 'react-hooks/rules-of-hooks: error' --rule 'react-hooks/exhaustive-deps: warn' 2>/dev/null || echo "No ESLint React hooks rules configured"
+
+# Find useEffect patterns
+grep -r "useEffect" --include="*.jsx" --include="*.tsx" src/ | head -10
+
+# Check for render-phase state updates
+grep -r "setState\|useState.*(" --include="*.jsx" --include="*.tsx" src/ | grep -v "useEffect\|onClick\|onChange"
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Add missing dependencies to dependency array, move hooks to component top level
+2. **Better**: Use useCallback/useMemo for stable references, move state updates to event handlers
+3. **Complete**: Extract custom hooks for complex logic, refactor component architecture
+
+**Validation:**
+```bash
+npm run lint 2>/dev/null || npx eslint src/ --ext .jsx,.tsx
+npm test -- --watchAll=false --passWithNoTests 2>/dev/null || echo "No tests configured"
+```
+
+**Resources:**
+- https://react.dev/reference/react/hooks
+- https://react.dev/reference/rules/rules-of-hooks
+- https://react.dev/learn/removing-effect-dependencies
+
+### Rendering Performance
+**Common Issues:**
+- "Too many re-renders" - State updates in render or infinite loops
+- "Maximum update depth exceeded" - Infinite render loops
+- Component re-rendering unnecessarily - Missing memoization
+- Large lists causing slowdowns - No virtualization
+
+**Diagnosis:**
+```bash
+# Check for React.memo usage
+grep -r "React.memo\|memo(" --include="*.jsx" --include="*.tsx" src/ | wc -l
+
+# Find potential performance issues
+grep -r "map\|filter\|reduce" --include="*.jsx" --include="*.tsx" src/ | grep -v "useMemo\|useCallback" | head -5
+
+# Check for object creation in render
+grep -r "=.*{.*}" --include="*.jsx" --include="*.tsx" src/ | grep -v "useState\|useEffect" | head -5
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Move state updates to event handlers, fix dependency arrays
+2. **Better**: Wrap components in React.memo, use useMemo for expensive computations
+3. **Complete**: Implement virtualization for large lists, code splitting, architectural refactor
+
+**Validation:**
+Use React DevTools Profiler to measure render count reduction and performance improvements.
+
+**Resources:**
+- https://react.dev/reference/react/memo
+- https://react.dev/reference/react/useMemo
+- https://react.dev/learn/render-and-commit
+
+### Effects & Lifecycle
+**Common Issues:**
+- Memory leaks from missing cleanup functions
+- "Can't perform React state update on unmounted component" warnings
+- Race conditions in async effects
+- Effects running too often or at wrong times
+
+**Diagnosis:**
+```bash
+# Find effects without cleanup
+grep -A 5 -r "useEffect" --include="*.jsx" --include="*.tsx" src/ | grep -B 5 -A 5 "useEffect" | grep -c "return.*(" || echo "No cleanup functions found"
+
+# Check for async effects (anti-pattern)
+grep -r "async.*useEffect\|useEffect.*async" --include="*.jsx" --include="*.tsx" src/
+
+# Find potential memory leaks
+grep -r "addEventListener\|setInterval\|setTimeout" --include="*.jsx" --include="*.tsx" src/ | grep -v "cleanup\|clear\|remove"
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Add cleanup functions to effects, cancel async operations
+2. **Better**: Use AbortController for fetch cancellation, implement proper async patterns
+3. **Complete**: Extract custom hooks, implement proper resource management patterns
+
+**Validation:**
+```bash
+# Check for memory leaks (if tests are configured)
+npm test -- --detectLeaks --watchAll=false 2>/dev/null || echo "No test configuration for leak detection"
+```
+
+**Resources:**
+- https://react.dev/reference/react/useEffect
+- https://react.dev/learn/synchronizing-with-effects
+- https://react.dev/learn/you-might-not-need-an-effect
+
+### State Management
+**Common Issues:**
+- Props drilling through many levels
+- "Objects are not valid as React child" - Rendering objects instead of primitives
+- State updates not batching properly
+- Stale state in event handlers and closures
+
+**Diagnosis:**
+```bash
+# Find potential prop drilling patterns
+grep -r "props\." --include="*.jsx" --include="*.tsx" src/ | wc -l
+
+# Check Context usage
+grep -r "useContext\|createContext" --include="*.jsx" --include="*.tsx" src/
+
+# Look for direct state mutations
+grep -r "\.push\|\.pop\|\.splice" --include="*.jsx" --include="*.tsx" src/ | grep -v "useState.*=\|setState"
+
+# Find object rendering patterns
+grep -r "{\w*}" --include="*.jsx" --include="*.tsx" src/ | grep -v "props\|style" | head -5
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Use spread operator for state updates, fix object rendering
+2. **Better**: Lift state up to common ancestor, use Context for cross-cutting concerns
+3. **Complete**: Implement state management library (Redux Toolkit, Zustand), normalize data
+
+**Resources:**
+- https://react.dev/learn/managing-state
+- https://react.dev/learn/passing-data-deeply-with-context
+- https://react.dev/reference/react/useState
+
+### SSR/RSC Issues
+**Common Issues:**
+- "Hydration failed" - Server/client rendering mismatches
+- "Text content does not match server HTML" - Dynamic content differences
+- "localStorage is not defined" - Browser APIs called during SSR
+- Data fetching inconsistencies between server and client
+
+**Diagnosis:**
+```bash
+# Check for client-only code
+grep -r "window\.\|document\.\|localStorage\|sessionStorage" --include="*.jsx" --include="*.tsx" src/ | head -10
+
+# Find server components (if using App Router)
+grep -r "use server\|async function.*await" --include="*.jsx" --include="*.tsx" src/
+
+# Check for hydration-sensitive code
+grep -r "Date\(\)\|Math.random\(\)" --include="*.jsx" --include="*.tsx" src/
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Add `typeof window !== 'undefined'` checks, use suppressHydrationWarning sparingly
+2. **Better**: Implement proper environment detection, use useEffect for client-only code
+3. **Complete**: Implement proper SSR patterns, use dynamic imports with `ssr: false`, consistent data fetching
+
+**Resources:**
+- https://react.dev/reference/react-dom/client/hydrateRoot
+- https://react.dev/reference/react-dom/server
+- https://nextjs.org/docs/app/building-your-application/rendering
+
+### Component Patterns
+**Common Issues:**
+- "Each child in list should have unique key" - Missing or duplicate keys
+- "Cannot read properties of null" - Ref timing issues
+- Tight coupling between components
+- Poor component composition and reusability
+
+**Diagnosis:**
+```bash
+# Check component size and complexity
+find src/ -name "*.jsx" -o -name "*.tsx" | xargs wc -l | sort -rn | head -10
+
+# Find list rendering without keys
+grep -r "\.map(" --include="*.jsx" --include="*.tsx" src/ | grep -v "key=" | head -5
+
+# Check for ref usage
+grep -r "useRef\|ref\.current" --include="*.jsx" --include="*.tsx" src/
+
+# Find repeated patterns
+grep -r "interface.*Props\|type.*Props" --include="*.tsx" src/ | wc -l
+```
+
+**Prioritized Fixes:**
+1. **Minimal**: Add unique keys to list items, add null checks for refs
+2. **Better**: Implement proper TypeScript prop types, extract shared logic to hooks
+3. **Complete**: Create compound components pattern, implement design system with consistent patterns
+
+**Resources:**
+- https://react.dev/learn/rendering-lists
+- https://react.dev/reference/react/useRef
+- https://react.dev/learn/thinking-in-react
+
+## Runtime Considerations
+- **React 18 Changes**: Automatic batching changes update timing, Strict Mode runs effects twice in development
+- **Concurrent Features**: Suspense, transitions, and Server Components require different mental models
+- **Fast Refresh**: Limitations with certain patterns (class components, anonymous functions)
+- **Server Components**: Cannot use hooks, browser APIs, or event handlers
+
+## Code Review Checklist
+
+When reviewing React code, focus on these framework-specific aspects:
+
+### Hooks Compliance
+- [ ] Rules of Hooks followed (only at top level, only in React functions)
+- [ ] Dependency arrays complete and accurate
+- [ ] No conditional hook calls
+- [ ] Custom hooks prefixed with `use`
+- [ ] Effects properly cleaned up
+- [ ] No async functions directly in useEffect
+
+### Performance Patterns
+- [ ] Appropriate use of `React.memo` for expensive components
+- [ ] `useMemo` and `useCallback` used where beneficial (not overused)
+- [ ] Keys stable and unique in lists
+- [ ] Large lists virtualized when needed
+- [ ] Code splitting implemented for routes
+- [ ] Lazy loading for heavy components
+
+### State Management
+- [ ] State lifted to appropriate level (not too high)
+- [ ] Derived state calculated, not stored
+- [ ] Immutable state updates
+- [ ] No direct DOM manipulation
+- [ ] Form state properly controlled or uncontrolled (not mixed)
+- [ ] Context not overused for frequently changing values
+
+### Component Design
+- [ ] Single responsibility principle followed
+- [ ] Props properly typed with TypeScript/PropTypes
+- [ ] Default props handled correctly
+- [ ] Error boundaries implemented for risky operations
+- [ ] Accessibility attributes present (aria-labels, roles)
+- [ ] Event handlers properly bound
+
+### React Patterns
+- [ ] Composition over inheritance
+- [ ] Render props or hooks for logic sharing (not HOCs)
+- [ ] Controlled vs uncontrolled components consistent
+- [ ] Side effects isolated in useEffect
+- [ ] Suspense boundaries for async operations
+- [ ] Portals used for modals/tooltips when needed
+
+### Common Pitfalls
+- [ ] No array index as key for dynamic lists
+- [ ] No inline function definitions in render (when avoidable)
+- [ ] No business logic in components (separated into hooks/utils)
+- [ ] No missing dependencies in hooks
+- [ ] No memory leaks from uncleaned effects
+- [ ] No unnecessary re-renders from unstable references
+
+## Safety Guidelines
+- Never modify state objects directly - always use immutable updates
+- Always include cleanup functions in useEffect for subscriptions and async operations
+- Handle loading and error states explicitly in all components
+- Use TypeScript or PropTypes for development-time prop validation
+- Implement Error Boundaries to prevent entire app crashes
+- Test components in isolation before integration
+
+## Anti-Patterns to Avoid
+1. **Effect Overuse**: "You might not need an Effect" - prefer derived state and event handlers
+2. **Premature Optimization**: Don't add useMemo/useCallback everywhere without profiling
+3. **Imperative DOM Access**: Avoid direct DOM manipulation - use refs sparingly
+4. **Complex Nested State**: Flatten state structure or use useReducer for complex updates