claude-autopm 2.8.1 → 2.8.3

package/packages/plugin-frameworks/commands/react-optimize.md

@@ -0,0 +1,583 @@
+# react:optimize
+
+Optimize React application performance with Context7-verified patterns for hooks, memoization, and rendering optimization.
+
+## Description
+
+Analyzes and optimizes React applications following official React best practices:
+- Component memoization (React.memo, useMemo, useCallback)
+- Render optimization and unnecessary re-renders
+- Hook dependency optimization
+- Context value optimization
+- List rendering performance
+- Code splitting and lazy loading
+
+## Required Documentation Access
+
+**MANDATORY:** Before optimization, query Context7 for React best practices:
+
+**Documentation Queries:**
+- `mcp://context7/react/performance` - React performance optimization
+- `mcp://context7/react/hooks` - useMemo, useCallback, memo patterns
+- `mcp://context7/react/rendering` - Rendering optimization strategies
+- `mcp://context7/react/profiling` - React Profiler and performance analysis
+
+**Why This is Required:**
+- Ensures optimization follows official React documentation
+- Applies latest performance patterns from React team
+- Validates hook usage and dependency arrays
+- Prevents anti-patterns and common mistakes
+
+## Usage
+
+```bash
+/react:optimize [options]
+```
+
+## Options
+
+- `--path <directory>` - Path to React components (default: ./src)
+- `--analyze-only` - Analyze without applying changes
+- `--output <file>` - Write optimization report
+- `--focus <area>` - Focus area: hooks, rendering, context, lists
+- `--aggressive` - Apply aggressive optimizations (requires review)
+
+## Examples
+
+### Analyze Component Performance
+```bash
+/react:optimize --analyze-only --output perf-report.md
+```
+
+### Optimize Hooks and Memoization
+```bash
+/react:optimize --focus hooks
+```
+
+### Optimize Context Usage
+```bash
+/react:optimize --focus context
+```
+
+### Full Optimization with Report
+```bash
+/react:optimize --output optimizations.md
+```
+
+## Optimization Patterns
+
+### 1. useMemo for Expensive Calculations
+
+**Pattern from Context7 (/reactjs/react.dev):**
+
+```javascript
+// BEFORE: Expensive calculation runs on every render
+function TodoList({ todos, tab, theme }) {
+  const visibleTodos = filterTodos(todos, tab); // ❌ Runs every render
+
+  return (
+    <div className={theme}>
+      <List items={visibleTodos} />
+    </div>
+  );
+}
+
+// AFTER: useMemo caches the result
+import { useMemo } from 'react';
+
+function TodoList({ todos, tab, theme }) {
+  const visibleTodos = useMemo(
+    () => filterTodos(todos, tab),
+    [todos, tab] // ✅ Only recalculates when dependencies change
+  );
+
+  return (
+    <div className={theme}>
+      <List items={visibleTodos} />
+    </div>
+  );
+}
+```
+
+**Benefits:**
+- Skips expensive calculations when dependencies unchanged
+- Prevents unnecessary child component re-renders
+- Improves overall application responsiveness
+
+**When to Use:**
+- Expensive filtering/transformation operations
+- Complex calculations derived from props/state
+- Values passed to memoized child components
+
+### 2. React.memo for Component Optimization
+
+**Pattern from Context7:**
+
+```javascript
+// BEFORE: Component re-renders on every parent render
+function List({ items }) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>{item.text}</li>
+      ))}
+    </ul>
+  );
+}
+
+// AFTER: React.memo prevents unnecessary re-renders
+import { memo } from 'react';
+
+const List = memo(function List({ items }) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>{item.text}</li>
+      ))}
+    </ul>
+  );
+});
+```
+
+**When to Use:**
+- Component renders expensive UI
+- Props change infrequently
+- Component receives same props repeatedly
+
+### 3. useCallback for Function Stability
+
+**Pattern from Context7:**
+
+```javascript
+// BEFORE: Function recreated on every render
+function ProductPage({ productId, referrer }) {
+  const handleSubmit = (orderDetails) => {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails
+    });
+  };
+
+  return <Form onSubmit={handleSubmit} />; // ❌ New function every render
+}
+
+// AFTER: useCallback memoizes function
+import { useCallback } from 'react';
+
+function ProductPage({ productId, referrer }) {
+  const handleSubmit = useCallback((orderDetails) => {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails
+    });
+  }, [productId, referrer]); // ✅ Stable function reference
+
+  return <Form onSubmit={handleSubmit} />;
+}
+```
+
+**Benefits:**
+- Prevents memoized child components from re-rendering
+- Stable function references for useEffect dependencies
+- Essential for custom hooks returning functions
+
+### 4. Optimize Context Value
+
+**Pattern from Context7:**
+
+```javascript
+// BEFORE: Context value object recreated every render
+function MyApp() {
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const login = (response) => {
+    storeCredentials(response.credentials);
+    setCurrentUser(response.user);
+  };
+
+  // ❌ New object on every render = all consumers re-render
+  return (
+    <AuthContext.Provider value={{ currentUser, login }}>
+      <Page />
+    </AuthContext.Provider>
+  );
+}
+
+// AFTER: Memoize context value
+import { useCallback, useMemo } from 'react';
+
+function MyApp() {
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const login = useCallback((response) => {
+    storeCredentials(response.credentials);
+    setCurrentUser(response.user);
+  }, []); // ✅ Stable function
+
+  const contextValue = useMemo(() => ({
+    currentUser,
+    login
+  }), [currentUser, login]); // ✅ Stable object
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      <Page />
+    </AuthContext.Provider>
+  );
+}
+```
+
+**Benefits:**
+- Prevents unnecessary re-renders of all context consumers
+- Critical for frequently updated contexts
+- Improves app-wide performance
+
+### 5. Optimize useEffect Dependencies
+
+**Pattern from Context7:**
+
+```javascript
+// BEFORE: useEffect runs on every render due to object dependency
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  const options = {
+    serverUrl: 'https://localhost:1234',
+    roomId: roomId
+  }; // ❌ New object every render
+
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]); // ❌ options changes every render
+}
+
+// AFTER: Memoize object dependency
+import { useMemo } from 'react';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  const options = useMemo(() => ({
+    serverUrl: 'https://localhost:1234',
+    roomId: roomId
+  }), [roomId]); // ✅ Only changes when roomId changes
+
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]); // ✅ Stable reference
+}
+```
+
+### 6. Memoize JSX for Complex Children
+
+**Pattern from Context7:**
+
+```javascript
+// BEFORE: Child component re-renders unnecessarily
+export default function TodoList({ todos, tab, theme }) {
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+
+  return (
+    <div className={theme}>
+      <List items={visibleTodos} /> {/* ❌ Re-renders when theme changes */}
+    </div>
+  );
+}
+
+// AFTER: Memoize JSX node
+export default function TodoList({ todos, tab, theme }) {
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+
+  const children = useMemo(
+    () => <List items={visibleTodos} />,
+    [visibleTodos]
+  ); // ✅ List only re-renders when visibleTodos changes
+
+  return (
+    <div className={theme}>
+      {children}
+    </div>
+  );
+}
+```
+
+### 7. Optimize State Updater Functions
+
+**Pattern from Context7:**
+
+```javascript
+// BEFORE: todos dependency causes unnecessary callback recreation
+function TodoList() {
+  const [todos, setTodos] = useState([]);
+
+  const handleAddTodo = useCallback((text) => {
+    const newTodo = { id: nextId++, text };
+    setTodos([...todos, newTodo]); // ❌ Depends on todos
+  }, [todos]); // ❌ Callback recreated when todos changes
+}
+
+// AFTER: Use updater function
+function TodoList() {
+  const [todos, setTodos] = useState([]);
+
+  const handleAddTodo = useCallback((text) => {
+    const newTodo = { id: nextId++, text };
+    setTodos(todos => [...todos, newTodo]); // ✅ No todos dependency
+  }, []); // ✅ Stable callback
+}
+```
+
+### 8. Optimize List Rendering
+
+**Pattern from Context7:**
+
+```javascript
+// BEFORE: List items re-render on every parent change
+function ReportList({ items }) {
+  return (
+    <div>
+      {items.map(item => (
+        <Report key={item.id} item={item} />
+      ))}
+    </div>
+  );
+}
+
+function Report({ item }) {
+  function handleClick() {
+    sendReport(item);
+  }
+
+  return (
+    <figure>
+      <Chart onClick={handleClick} />
+    </figure>
+  );
+}
+
+// AFTER: Memoize list items
+import { memo } from 'react';
+
+function ReportList({ items }) {
+  return (
+    <div>
+      {items.map(item => (
+        <Report key={item.id} item={item} />
+      ))}
+    </div>
+  );
+}
+
+const Report = memo(function Report({ item }) {
+  function handleClick() {
+    sendReport(item);
+  }
+
+  return (
+    <figure>
+      <Chart onClick={handleClick} />
+    </figure>
+  );
+});
+```
+
+## Common Anti-Patterns
+
+### 1. Missing useMemo Return Value
+
+```javascript
+// ❌ INCORRECT: No return value
+function Component({ data }) {
+  const processed = useMemo(() => {
+    data.forEach(item => console.log(item));
+    // Missing return!
+  }, [data]);
+
+  return <div>{processed}</div>; // Always undefined
+}
+
+// ✅ CORRECT: Explicit return
+function Component({ data }) {
+  const processed = useMemo(() => {
+    return data.map(item => item.value);
+  }, [data]);
+
+  return <div>{processed.join(', ')}</div>;
+}
+```
+
+### 2. Incomplete Dependencies
+
+```javascript
+// ❌ INCORRECT: Missing dependencies
+function Component({ data, filter }) {
+  const filtered = useMemo(
+    () => data.filter(filter),
+    [data] // Missing 'filter' dependency
+  );
+
+  return <List items={filtered} />;
+}
+
+// ✅ CORRECT: Complete dependencies
+function Component({ data, filter }) {
+  const filtered = useMemo(
+    () => data.filter(filter),
+    [data, filter] // All dependencies included
+  );
+
+  return <List items={filtered} />;
+}
+```
+
+### 3. Over-Memoization
+
+```javascript
+// ❌ UNNECESSARY: Memoizing primitive values
+function Component({ count }) {
+  const doubled = useMemo(() => count * 2, [count]); // Overkill
+  return <div>{doubled}</div>;
+}
+
+// ✅ BETTER: Simple calculation
+function Component({ count }) {
+  const doubled = count * 2; // Fast enough
+  return <div>{doubled}</div>;
+}
+```
+
+## Optimization Output
+
+```
+⚛️  React Performance Optimization Analysis
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Components Analyzed: 45
+Optimization Opportunities: 12
+
+🎯 Hook Optimization
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ⚠️  TodoList.jsx (line 23)
+     Missing useMemo for expensive filterTodos call
+     💡 Recommendation: Wrap filterTodos in useMemo
+     ⚡ Impact: Prevents 15 re-calculations per second
+
+  ⚠️  ProductPage.jsx (line 45)
+     handleSubmit function recreated on every render
+     💡 Recommendation: Wrap in useCallback
+     ⚡ Impact: Prevents Form re-render (150ms saved)
+
+🔄 Rendering Optimization
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ⚠️  List.jsx
+     Component re-renders with same props
+     💡 Recommendation: Wrap with React.memo
+     ⚡ Impact: 70% fewer renders (3000 → 900/min)
+
+  ⚠️  Report.jsx
+     List items re-render unnecessarily
+     💡 Recommendation: Memoize Report component
+     ⚡ Impact: Improves list scrolling performance
+
+📦 Context Optimization
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ❌ AuthContext.Provider (App.jsx line 12)
+     Context value object recreated every render
+     💡 Recommendation: Memoize with useMemo
+     ⚡ Impact: Critical - all 23 consumers re-render
+
+  ⚠️  ThemeContext.Provider (App.jsx line 28)
+     login function not memoized
+     💡 Recommendation: Wrap with useCallback
+     ⚡ Impact: Prevents theme consumers from re-rendering
+
+🔗 Dependency Issues
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ❌ ChatRoom.jsx (line 34)
+     useEffect depends on object that changes every render
+     💡 Recommendation: Memoize options object
+     ⚡ Impact: Prevents connection reconnects
+
+  ⚠️  DataFetcher.jsx (line 67)
+     Missing filter dependency in useMemo
+     💡 Recommendation: Add filter to dependency array
+     ⚡ Impact: Prevents stale data bugs
+
+Summary
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  Total Optimizations: 12
+
+  🔴 Critical: 2 (fix immediately)
+  🟡 High Impact: 5 (recommended)
+  🟢 Low Impact: 5 (optional)
+
+  Estimated Performance Improvement: 40-60%
+  Estimated Render Reduction: 70%
+
+  Run with --aggressive to apply all optimizations
+```
+
+## Implementation
+
+This command uses the **@react-frontend-engineer** agent:
+
+1. Query Context7 for React performance patterns
+2. Analyze component tree and render patterns
+3. Detect expensive calculations and re-renders
+4. Identify missing memoization opportunities
+5. Validate hook dependencies
+6. Generate optimization recommendations
+7. Optionally apply automated fixes
+
+## Best Practices Applied
+
+Based on Context7 documentation from `/reactjs/react.dev`:
+
+1. **useMemo** - Cache expensive calculations
+2. **useCallback** - Stable function references
+3. **React.memo** - Prevent component re-renders
+4. **Context Optimization** - Memoize context values
+5. **Dependency Management** - Complete dependency arrays
+6. **JSX Memoization** - Cache complex JSX trees
+7. **Updater Functions** - Reduce callback dependencies
+8. **List Optimization** - Memoize list item components
+
+## Related Commands
+
+- `/nextjs:optimize` - Next.js specific optimizations
+- `/perf:analyze` - Deep performance profiling
+- `/bundle:optimize` - Bundle size optimization
+- `/lighthouse:audit` - Lighthouse performance audit
+
+## Troubleshooting
+
+### useMemo Not Working
+- Verify dependencies are complete
+- Check if calculation is actually expensive
+- Ensure return value is provided
+
+### useCallback Causing Issues
+- Verify all used variables are in dependencies
+- Check if memoization is necessary
+- Consider using updater functions
+
+### React.memo Not Preventing Re-renders
+- Verify props are stable (use useMemo/useCallback)
+- Check if component uses context (context updates bypass memo)
+- Consider custom comparison function
+
+## Version History
+
+- v2.0.0 - Initial Schema v2.0 release with Context7 integration
+- React hooks optimization patterns
+- Context value memoization
+- Dependency array validation

package/packages/plugin-frameworks/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@claudeautopm/plugin-frameworks",
+  "version": "2.0.0",
+  "description": "Complete frontend frameworks plugin with React, Vue, Tailwind CSS agents, UI commands, performance rules, and optimization scripts for ClaudeAutoPM",
+  "main": "plugin.json",
+  "type": "module",
+  "files": [
+    "agents/",
+    "commands/",
+    "rules/",
+    "scripts/",
+    "plugin.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "validate": "node -e \"require('./plugin.json')\" && echo 'plugin.json is valid'"
+  },
+  "keywords": [
+    "claudeautopm",
+    "plugin",
+    "frameworks",
+    "react",
+    "vue",
+    "tailwind",
+    "tailwindcss",
+    "frontend",
+    "ui",
+    "components",
+    "hooks",
+    "performance"
+  ],
+  "author": {
+    "name": "ClaudeAutoPM Team",
+    "email": "autopm@example.com"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rafeekpro/ClaudeAutoPM.git",
+    "directory": "packages/plugin-frameworks"
+  },
+  "homepage": "https://github.com/rafeekpro/ClaudeAutoPM/tree/main/packages/plugin-frameworks#readme",
+  "bugs": {
+    "url": "https://github.com/rafeekpro/ClaudeAutoPM/issues"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
+  },
+  "peerDependencies": {
+    "@claudeautopm/plugin-core": "^2.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}