proagents 1.0.0

package/proagents/prompts/debugging/performance-debug.md

@@ -0,0 +1,381 @@
+# Performance Debugging Prompt
+
+Identify and resolve performance issues.
+
+---
+
+## Prompt Template
+
+```markdown
+## Performance Issue Analysis
+
+My application has the following performance issue:
+
+**Symptom:**
+{{description of slow behavior}}
+
+**Metrics:**
+- Load time: {{time}}
+- Response time: {{time}}
+- Memory usage: {{amount}}
+- CPU usage: {{percentage}}
+
+**When it occurs:**
+- [ ] On initial load
+- [ ] During user interaction
+- [ ] Over time (memory leak)
+- [ ] With large data sets
+- [ ] Intermittently
+
+**Code/Component:**
+```{{language}}
+{{relevant code}}
+```
+
+### Analyze For:
+1. Performance bottlenecks
+2. Resource-intensive operations
+3. Memory leaks
+4. Unnecessary re-renders (React)
+5. Unoptimized queries/API calls
+6. Bundle size issues
+```
+
+---
+
+## Performance Debugging Tools
+
+### Browser DevTools Profiling
+
+```markdown
+## Chrome DevTools Performance Tab
+
+### Recording a Profile
+1. Open DevTools (F12)
+2. Go to Performance tab
+3. Click Record
+4. Perform the slow action
+5. Click Stop
+
+### What to Look For
+- Long tasks (red triangles)
+- JavaScript execution time
+- Layout thrashing
+- Paint events
+- Network waterfall
+```
+
+### React DevTools Profiler
+
+```tsx
+// Wrap components to profile
+import { Profiler } from 'react';
+
+function onRenderCallback(
+  id,           // Component name
+  phase,        // "mount" or "update"
+  actualDuration,   // Time spent rendering
+  baseDuration,     // Estimated time without memoization
+  startTime,        // When React started rendering
+  commitTime        // When React committed updates
+) {
+  console.log(`${id} (${phase}): ${actualDuration.toFixed(2)}ms`);
+
+  if (actualDuration > 16) {
+    console.warn(`Slow render detected in ${id}`);
+  }
+}
+
+<Profiler id="UserList" onRenderCallback={onRenderCallback}>
+  <UserList users={users} />
+</Profiler>
+```
+
+---
+
+## Common Performance Issues
+
+### 1. Unnecessary Re-renders
+
+```tsx
+// ❌ Problem: Object/array created on every render
+function UserList({ users }) {
+  return (
+    <List
+      items={users}
+      style={{ margin: 10 }}  // New object every render!
+      onSelect={(id) => console.log(id)}  // New function every render!
+    />
+  );
+}
+
+// ✅ Solution: Memoize values
+function UserList({ users }) {
+  const style = useMemo(() => ({ margin: 10 }), []);
+  const handleSelect = useCallback((id) => console.log(id), []);
+
+  return (
+    <List
+      items={users}
+      style={style}
+      onSelect={handleSelect}
+    />
+  );
+}
+```
+
+### 2. Expensive Calculations in Render
+
+```tsx
+// ❌ Problem: Filtering on every render
+function DataTable({ data, searchTerm }) {
+  // This runs on EVERY render, even unrelated state changes
+  const filtered = data.filter(item =>
+    item.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return <Table data={filtered} />;
+}
+
+// ✅ Solution: Memoize calculation
+function DataTable({ data, searchTerm }) {
+  const filtered = useMemo(() =>
+    data.filter(item =>
+      item.name.toLowerCase().includes(searchTerm.toLowerCase())
+    ),
+    [data, searchTerm]  // Only recalculate when these change
+  );
+
+  return <Table data={filtered} />;
+}
+```
+
+### 3. Memory Leaks
+
+```tsx
+// ❌ Problem: Event listener not cleaned up
+useEffect(() => {
+  window.addEventListener('resize', handleResize);
+  // Missing cleanup!
+}, []);
+
+// ❌ Problem: Interval not cleared
+useEffect(() => {
+  setInterval(pollData, 1000);
+  // Missing cleanup!
+}, []);
+
+// ✅ Solution: Always cleanup
+useEffect(() => {
+  window.addEventListener('resize', handleResize);
+  const interval = setInterval(pollData, 1000);
+
+  return () => {
+    window.removeEventListener('resize', handleResize);
+    clearInterval(interval);
+  };
+}, []);
+```
+
+### 4. Large List Rendering
+
+```tsx
+// ❌ Problem: Rendering all 10,000 items
+function UserList({ users }) {
+  return (
+    <div>
+      {users.map(user => <UserCard key={user.id} user={user} />)}
+    </div>
+  );
+}
+
+// ✅ Solution: Virtualization
+import { FixedSizeList } from 'react-window';
+
+function UserList({ users }) {
+  const Row = ({ index, style }) => (
+    <div style={style}>
+      <UserCard user={users[index]} />
+    </div>
+  );
+
+  return (
+    <FixedSizeList
+      height={600}
+      itemCount={users.length}
+      itemSize={80}
+    >
+      {Row}
+    </FixedSizeList>
+  );
+}
+```
+
+### 5. Network Waterfall
+
+```typescript
+// ❌ Problem: Sequential requests
+async function loadDashboard() {
+  const users = await fetchUsers();
+  const posts = await fetchPosts();
+  const comments = await fetchComments();
+  return { users, posts, comments };
+}
+
+// ✅ Solution: Parallel requests
+async function loadDashboard() {
+  const [users, posts, comments] = await Promise.all([
+    fetchUsers(),
+    fetchPosts(),
+    fetchComments()
+  ]);
+  return { users, posts, comments };
+}
+```
+
+### 6. Bundle Size
+
+```typescript
+// ❌ Problem: Importing entire library
+import _ from 'lodash';
+const result = _.debounce(fn, 300);
+
+// ✅ Solution: Import specific function
+import debounce from 'lodash/debounce';
+const result = debounce(fn, 300);
+
+// ✅ Better: Use lodash-es for tree shaking
+import { debounce } from 'lodash-es';
+
+// ✅ Or: Native implementation
+function debounce(fn, delay) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  };
+}
+```
+
+---
+
+## Performance Measurement
+
+### Console Timing
+
+```typescript
+// Simple timing
+console.time('operation');
+await expensiveOperation();
+console.timeEnd('operation'); // Logs: operation: 234.56ms
+
+// Performance API for precision
+const start = performance.now();
+await expensiveOperation();
+const duration = performance.now() - start;
+console.log(`Operation took ${duration}ms`);
+```
+
+### Performance Marks
+
+```typescript
+// Create marks for complex flows
+performance.mark('fetch-start');
+const data = await fetchData();
+performance.mark('fetch-end');
+
+performance.mark('process-start');
+const processed = processData(data);
+performance.mark('process-end');
+
+// Measure between marks
+performance.measure('fetch', 'fetch-start', 'fetch-end');
+performance.measure('process', 'process-start', 'process-end');
+
+// Get measurements
+const measures = performance.getEntriesByType('measure');
+measures.forEach(m => console.log(`${m.name}: ${m.duration}ms`));
+```
+
+### React Render Tracking
+
+```tsx
+// Track renders with useRef
+function useRenderCount(name) {
+  const count = useRef(0);
+  count.current++;
+
+  useEffect(() => {
+    console.log(`${name} rendered ${count.current} times`);
+  });
+
+  return count.current;
+}
+
+// Usage
+function MyComponent() {
+  const renderCount = useRenderCount('MyComponent');
+  // ...
+}
+```
+
+---
+
+## Performance Checklist
+
+```markdown
+## Performance Audit Checklist
+
+### Initial Load
+- [ ] Bundle size reasonable (< 250KB initial JS)
+- [ ] Code splitting implemented
+- [ ] Images optimized and lazy loaded
+- [ ] Critical CSS inlined
+- [ ] Third-party scripts deferred
+
+### Runtime
+- [ ] No unnecessary re-renders
+- [ ] Expensive calculations memoized
+- [ ] Large lists virtualized
+- [ ] Event handlers throttled/debounced
+- [ ] Animations use CSS or requestAnimationFrame
+
+### Memory
+- [ ] Event listeners cleaned up
+- [ ] Intervals/timeouts cleared
+- [ ] Subscriptions unsubscribed
+- [ ] Large objects released when not needed
+
+### Network
+- [ ] API calls parallelized where possible
+- [ ] Data cached appropriately
+- [ ] No duplicate requests
+- [ ] Pagination for large datasets
+
+### Build
+- [ ] Tree shaking working
+- [ ] Dead code eliminated
+- [ ] Dependencies minimized
+- [ ] Compression enabled (gzip/brotli)
+```
+
+---
+
+## Performance Debugging Commands
+
+```bash
+# Profile render performance
+/perf profile --component UserList
+
+# Find memory leaks
+/perf memory --snapshot
+
+# Analyze bundle
+/perf bundle --analyze
+
+# Check Core Web Vitals
+/perf vitals
+
+# Find slow API calls
+/perf network --slow
+```

package/proagents/prompts/debugging/systematic.md

@@ -0,0 +1,270 @@
+# Systematic Debugging
+
+A structured approach to finding and fixing bugs.
+
+---
+
+## Prompt Template
+
+```
+Help me debug this issue:
+
+**Symptom:**
+{description of what's happening}
+
+**Expected Behavior:**
+{what should happen}
+
+**Steps to Reproduce:**
+1. {step 1}
+2. {step 2}
+3. {step 3}
+
+**Environment:**
+- Node version: {version}
+- Browser: {browser if applicable}
+- OS: {operating system}
+
+**Relevant Code:**
+{code snippet}
+
+**Error Message (if any):**
+{error message}
+
+**What I've Tried:**
+- {attempt 1}
+- {attempt 2}
+
+Please help me:
+1. Analyze the issue
+2. Identify potential root causes
+3. Suggest debugging steps
+4. Propose fixes
+```
+
+---
+
+## Debugging Steps
+
+### Step 1: Reproduce Consistently
+
+**Questions to Answer:**
+- Can you reproduce it every time?
+- What's the minimal reproduction case?
+- Does it happen in all environments?
+
+**Template:**
+```
+Reproduction Steps:
+1. Start the application with `npm run dev`
+2. Navigate to /users
+3. Click "Add User" button
+4. Submit form with empty fields
+5. Error appears: {error}
+
+Frequency: Always / Sometimes / Rarely
+Environment: Development / Staging / Production
+```
+
+### Step 2: Gather Information
+
+**Data Collection:**
+```typescript
+// Add temporary logging
+console.log('Function called with:', args);
+console.log('State before:', state);
+
+// Result of operation
+const result = suspectFunction();
+console.log('Result:', result);
+
+// Check type
+console.log('Type:', typeof result);
+console.log('Is array:', Array.isArray(result));
+```
+
+**Network Issues:**
+```typescript
+// Log request/response
+const response = await fetch(url);
+console.log('Status:', response.status);
+console.log('Headers:', Object.fromEntries(response.headers));
+const data = await response.json();
+console.log('Response data:', data);
+```
+
+### Step 3: Form Hypotheses
+
+**Hypothesis Template:**
+```markdown
+## Hypothesis 1: Race Condition
+**Reasoning:** The error occurs intermittently after user action
+**Evidence:** Logs show state update after component unmount
+**Test:** Add await before state update
+**Expected Result:** Error should not occur
+
+## Hypothesis 2: Null Reference
+**Reasoning:** Error mentions "undefined is not an object"
+**Evidence:** User data may not be loaded when accessed
+**Test:** Add null check before accessing
+**Expected Result:** Should handle missing data gracefully
+```
+
+### Step 4: Test Hypotheses
+
+**Binary Search Debugging:**
+```typescript
+// Find which part fails
+async function complexProcess() {
+  console.log('Step 1 - Starting');
+  const data = await fetchData();
+  console.log('Step 2 - Data fetched:', data);
+
+  const processed = processData(data);
+  console.log('Step 3 - Processed:', processed);
+
+  const result = formatResult(processed);
+  console.log('Step 4 - Formatted:', result);
+
+  return result;
+}
+```
+
+**Isolation Testing:**
+```typescript
+// Test function in isolation
+import { processData } from './utils';
+
+// Test with known inputs
+console.log(processData(null));        // Edge case
+console.log(processData([]));          // Empty
+console.log(processData([1, 2, 3]));   // Normal
+console.log(processData(undefined));   // Missing
+```
+
+### Step 5: Implement Fix
+
+**Fix Template:**
+```typescript
+// Before: Bug
+function getUser(id) {
+  return users.find(u => u.id === id).name;
+}
+
+// After: Fix with null check
+function getUser(id) {
+  const user = users.find(u => u.id === id);
+  if (!user) {
+    return null; // or throw new Error(`User ${id} not found`)
+  }
+  return user.name;
+}
+```
+
+### Step 6: Prevent Regression
+
+**Add Tests:**
+```typescript
+describe('getUser', () => {
+  it('should return user name when found', () => {
+    const result = getUser('123');
+    expect(result).toBe('John');
+  });
+
+  it('should return null when user not found', () => {
+    const result = getUser('nonexistent');
+    expect(result).toBeNull();
+  });
+
+  it('should handle undefined id', () => {
+    const result = getUser(undefined);
+    expect(result).toBeNull();
+  });
+});
+```
+
+---
+
+## Common Bug Patterns
+
+### Async/Await Issues
+
+```typescript
+// ❌ Bug: Missing await
+async function loadData() {
+  const data = fetchData(); // Missing await!
+  console.log(data); // Logs Promise, not data
+}
+
+// ✅ Fix
+async function loadData() {
+  const data = await fetchData();
+  console.log(data);
+}
+```
+
+### State Race Conditions
+
+```typescript
+// ❌ Bug: State used after unmount
+useEffect(() => {
+  fetchData().then(data => {
+    setData(data); // Component may be unmounted
+  });
+}, []);
+
+// ✅ Fix: Cleanup
+useEffect(() => {
+  let cancelled = false;
+  fetchData().then(data => {
+    if (!cancelled) setData(data);
+  });
+  return () => { cancelled = true; };
+}, []);
+```
+
+### Closure Issues
+
+```typescript
+// ❌ Bug: Stale closure
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    setInterval(() => {
+      console.log(count); // Always logs initial value
+    }, 1000);
+  }, []);
+}
+
+// ✅ Fix: Use ref or include in deps
+function Counter() {
+  const [count, setCount] = useState(0);
+  const countRef = useRef(count);
+  countRef.current = count;
+
+  useEffect(() => {
+    setInterval(() => {
+      console.log(countRef.current);
+    }, 1000);
+  }, []);
+}
+```
+
+---
+
+## Debugging Commands
+
+```bash
+# Analyze error message
+/debug error "TypeError: Cannot read property 'name' of undefined"
+
+# Trace execution
+/debug trace "User registration fails after email validation"
+
+# Get fix suggestions
+/debug fix "Form resets on blur"
+
+# Generate debugging test
+/debug test "API returns 500 on large payload"
+```

package/proagents/prompts/performance/README.md

@@ -0,0 +1,47 @@
+# Performance Optimization Prompts
+
+AI-assisted performance analysis and optimization.
+
+---
+
+## Available Prompts
+
+| Prompt | Use Case |
+|--------|----------|
+| [analyze.md](./analyze.md) | Analyze performance issues |
+| [frontend.md](./frontend.md) | Frontend optimization |
+| [backend.md](./backend.md) | Backend optimization |
+| [database.md](./database.md) | Database optimization |
+
+---
+
+## Quick Commands
+
+```bash
+/perf analyze <code>       # Analyze code performance
+/perf profile <function>   # Profile function execution
+/perf optimize <target>    # Suggest optimizations
+/perf benchmark <code>     # Create benchmarks
+```
+
+---
+
+## Performance Areas
+
+### Frontend
+- Bundle size
+- Render performance
+- Memory usage
+- Network requests
+
+### Backend
+- Response time
+- Throughput
+- Memory usage
+- CPU utilization
+
+### Database
+- Query performance
+- Index optimization
+- Connection pooling
+- Caching