claude-autopm 2.8.2 → 2.8.4

package/packages/plugin-frameworks/plugin.json

@@ -0,0 +1,224 @@
+{
+  "name": "@claudeautopm/plugin-frameworks",
+  "version": "2.0.0",
+  "schemaVersion": "2.0",
+  "displayName": "Frontend Frameworks & UI",
+  "description": "Complete frontend frameworks plugin with React, Vue, Tailwind CSS agents, UI commands, and performance optimization",
+  "category": "frameworks",
+  "metadata": {
+    "category": "Frontend Frameworks",
+    "author": "ClaudeAutoPM Team",
+    "license": "MIT",
+    "homepage": "https://github.com/rafeekpro/ClaudeAutoPM",
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/rafeekpro/ClaudeAutoPM.git",
+      "directory": "packages/plugin-frameworks"
+    },
+    "size": "~12 KB (gzipped)",
+    "required": false,
+    "tags": ["frameworks", "react", "vue", "angular", "tailwind", "ui", "frontend"]
+  },
+  "agents": [
+    {
+      "name": "react-frontend-engineer",
+      "file": "agents/react-frontend-engineer.md",
+      "category": "frontend",
+      "description": "React development with hooks, performance optimization, and modern patterns",
+      "version": "2.0.0",
+      "tags": ["react", "hooks", "frontend", "spa", "performance"],
+      "mcp": ["react-docs"],
+      "context7": [
+        "/reactjs/react.dev",
+        "/remix-run/react-router"
+      ]
+    },
+    {
+      "name": "react-ui-expert",
+      "file": "agents/react-ui-expert.md",
+      "category": "ui",
+      "description": "React UI components, design systems, and component libraries",
+      "version": "2.0.0",
+      "tags": ["react", "ui", "components", "design-system"],
+      "mcp": ["react-docs"],
+      "context7": [
+        "/reactjs/react.dev"
+      ]
+    },
+    {
+      "name": "tailwindcss-expert",
+      "file": "agents/tailwindcss-expert.md",
+      "category": "styling",
+      "description": "Tailwind CSS utility-first styling, responsive design, and optimization",
+      "version": "2.0.0",
+      "tags": ["tailwindcss", "css", "utility-first", "responsive", "styling"],
+      "mcp": [],
+      "context7": [
+        "/tailwindlabs/tailwindcss.com"
+      ]
+    },
+    {
+      "name": "ux-design-expert",
+      "file": "agents/ux-design-expert.md",
+      "category": "design",
+      "description": "UX/UI design principles, accessibility, and user experience optimization",
+      "version": "2.0.0",
+      "tags": ["ux", "ui", "design", "accessibility", "a11y"],
+      "mcp": [],
+      "context7": []
+    }
+  ],
+  "commands": [
+    {
+      "name": "tailwind-system",
+      "file": "commands/tailwind-system.md",
+      "description": "Setup Tailwind CSS design system with configuration",
+      "category": "styling",
+      "tags": ["tailwind", "design-system", "setup"],
+      "requiredAgents": ["tailwindcss-expert"],
+      "context7": [
+        "/tailwindlabs/tailwindcss.com"
+      ]
+    },
+    {
+      "name": "app-scaffold",
+      "file": "commands/app-scaffold.md",
+      "description": "Scaffold React application with modern tooling",
+      "category": "scaffolding",
+      "tags": ["react", "scaffold", "setup"],
+      "requiredAgents": ["react-frontend-engineer"],
+      "context7": [
+        "/reactjs/react.dev"
+      ]
+    },
+    {
+      "name": "react-optimize",
+      "file": "commands/react-optimize.md",
+      "description": "Optimize React performance with hooks, memoization, and rendering optimization",
+      "category": "optimization",
+      "tags": ["react", "performance", "useMemo", "useCallback", "memo", "optimization"],
+      "requiredAgents": ["react-frontend-engineer"],
+      "context7": [
+        "/reactjs/react.dev"
+      ]
+    },
+    {
+      "name": "nextjs-optimize",
+      "file": "commands/nextjs-optimize.md",
+      "description": "Optimize Next.js application for images, fonts, builds, and Core Web Vitals",
+      "category": "optimization",
+      "tags": ["nextjs", "performance", "image", "font", "optimization", "core-web-vitals"],
+      "requiredAgents": ["react-frontend-engineer"],
+      "context7": [
+        "/vercel/next.js"
+      ]
+    }
+  ],
+  "rules": [
+    {
+      "name": "ui-development-standards",
+      "file": "rules/ui-development-standards.md",
+      "priority": "high",
+      "description": "UI development standards and component best practices",
+      "tags": ["ui", "standards", "components", "best-practices"],
+      "appliesTo": ["commands", "agents"],
+      "enforcesOn": ["react-frontend-engineer", "react-ui-expert", "tailwindcss-expert"]
+    },
+    {
+      "name": "performance-guidelines",
+      "file": "rules/performance-guidelines.md",
+      "priority": "high",
+      "description": "Frontend performance optimization and best practices",
+      "tags": ["performance", "optimization", "react", "rendering"],
+      "appliesTo": ["commands", "agents"],
+      "enforcesOn": ["react-frontend-engineer"]
+    },
+    {
+      "name": "ui-framework-rules",
+      "file": "rules/ui-framework-rules.md",
+      "priority": "medium",
+      "description": "Framework-specific conventions and patterns",
+      "tags": ["frameworks", "patterns", "conventions"],
+      "appliesTo": ["commands", "agents"],
+      "enforcesOn": ["react-frontend-engineer", "tailwindcss-expert"]
+    }
+  ],
+  "scripts": [
+    {
+      "name": "react-component-perf",
+      "file": "scripts/examples/react-component-perf.sh",
+      "description": "Analyze React component performance patterns",
+      "type": "example",
+      "executable": true,
+      "category": "react",
+      "tags": ["react", "performance", "useMemo", "useCallback"]
+    },
+    {
+      "name": "vue-composition-check",
+      "file": "scripts/examples/vue-composition-check.sh",
+      "description": "Check Vue Composition API usage patterns",
+      "type": "example",
+      "executable": true,
+      "category": "vue",
+      "tags": ["vue", "composition-api", "patterns"]
+    },
+    {
+      "name": "tailwind-optimize",
+      "file": "scripts/examples/tailwind-optimize.sh",
+      "description": "Analyze Tailwind CSS usage and optimization opportunities",
+      "type": "example",
+      "executable": true,
+      "category": "tailwind",
+      "tags": ["tailwind", "optimization", "responsive", "purge"]
+    }
+  ],
+  "features": {
+    "react_development": {
+      "enabled": true,
+      "description": "React hooks, performance, and modern patterns"
+    },
+    "vue_development": {
+      "enabled": false,
+      "description": "Vue Composition API (agent not included)"
+    },
+    "tailwind_styling": {
+      "enabled": true,
+      "description": "Utility-first CSS with Tailwind"
+    },
+    "ux_design": {
+      "enabled": true,
+      "description": "UX/UI design and accessibility"
+    },
+    "performance_optimization": {
+      "enabled": true,
+      "description": "Frontend performance best practices"
+    }
+  },
+  "dependencies": [],
+  "peerPlugins": [
+    "@claudeautopm/plugin-core"
+  ],
+  "mcpServers": {
+    "recommended": [
+      "react-docs"
+    ],
+    "optional": [
+      "vue-docs"
+    ]
+  },
+  "keywords": [
+    "claudeautopm",
+    "plugin",
+    "frameworks",
+    "react",
+    "vue",
+    "tailwind",
+    "tailwindcss",
+    "frontend",
+    "ui",
+    "components",
+    "hooks",
+    "performance"
+  ],
+  "compatibleWith": ">=3.0.0"
+}

package/packages/plugin-frameworks/rules/performance-guidelines.md

@@ -0,0 +1,403 @@
+# ⚡ Performance Guidelines & Optimization
+
+> **Performance is a feature. Slow is broken.**
+
+## Performance Targets
+
+### 🌐 Web Performance Metrics
+
+#### Core Web Vitals
+
+- **LCP (Largest Contentful Paint)**: < 2.5s
+- **FID (First Input Delay)**: < 100ms
+- **CLS (Cumulative Layout Shift)**: < 0.1
+- **FCP (First Contentful Paint)**: < 1.5s
+- **TTI (Time to Interactive)**: < 5s
+- **TBT (Total Blocking Time)**: < 300ms
+
+#### Page Load Targets
+
+- **3G Network**: < 3 seconds
+- **4G Network**: < 1.5 seconds
+- **Broadband**: < 1 second
+- **Repeat Visit**: < 500ms (with cache)
+
+### 🔧 API Performance Targets
+
+| Operation Type | Target | Maximum |
+|---------------|--------|----------|
+| Simple Query | < 50ms | 100ms |
+| Complex Query | < 200ms | 500ms |
+| Search | < 300ms | 1s |
+| File Upload | < 1s/MB | 2s/MB |
+| Batch Operation | < 5s | 10s |
+| Real-time Updates | < 100ms | 200ms |
+
+### 🗄️ Database Performance
+
+| Query Type | Target | Action if Exceeded |
+|-----------|--------|--------------------|
+| Indexed SELECT | < 10ms | Add index |
+| Complex JOIN | < 50ms | Optimize query |
+| Full Table Scan | < 100ms | Add index/partition |
+| Write Operation | < 20ms | Check locks |
+| Transaction | < 100ms | Break down |
+
+## Frontend Performance Optimization
+
+### 📦 Bundle Size Budgets
+
+```javascript
+// Maximum bundle sizes
+const budgets = {
+  javascript: {
+    initial: 200,     // KB (gzipped)
+    lazy: 300,        // KB (gzipped)
+  },
+  css: {
+    initial: 50,      // KB (gzipped)
+    lazy: 100,        // KB (gzipped)
+  },
+  images: {
+    hero: 200,        // KB
+    thumbnail: 20,    // KB
+    icon: 5,          // KB
+  },
+  total: {
+    initial: 500,     // KB (all assets)
+    full: 2000,       // KB (entire app)
+  }
+};
+```
+
+### 🎯 Optimization Checklist
+
+#### Code Optimization
+
+- [ ] Code splitting implemented
+- [ ] Lazy loading for routes
+- [ ] Tree shaking enabled
+- [ ] Dead code eliminated
+- [ ] Minification enabled
+- [ ] Compression (gzip/brotli)
+- [ ] Source maps in production
+
+#### Asset Optimization
+
+- [ ] Images optimized (WebP with fallback)
+- [ ] Responsive images (srcset)
+- [ ] Lazy loading images
+- [ ] SVG optimization
+- [ ] Font subsetting
+- [ ] Critical CSS inlined
+- [ ] Unused CSS removed
+
+#### Caching Strategy
+
+- [ ] Service Worker implemented
+- [ ] Cache headers configured
+- [ ] CDN for static assets
+- [ ] Browser cache utilized
+- [ ] API response caching
+- [ ] Database query caching
+
+#### Runtime Performance
+
+- [ ] Virtual scrolling for long lists
+- [ ] Debounced search inputs
+- [ ] Throttled scroll handlers
+- [ ] Web Workers for heavy computation
+- [ ] RequestAnimationFrame for animations
+- [ ] Avoid layout thrashing
+
+### 📊 Performance Monitoring
+
+```javascript
+// Performance monitoring setup
+const perfObserver = new PerformanceObserver((list) => {
+  for (const entry of list.getEntries()) {
+    // Log to analytics
+    analytics.track('performance', {
+      metric: entry.name,
+      value: entry.value,
+      page: window.location.pathname
+    });
+  }
+});
+
+// Observe all performance metrics
+perfObserver.observe({ 
+  entryTypes: ['navigation', 'resource', 'paint', 'measure'] 
+});
+```
+
+## Backend Performance Optimization
+
+### 🔄 API Optimization
+
+#### Response Time Optimization
+
+- [ ] Database connection pooling
+- [ ] Query optimization (EXPLAIN ANALYZE)
+- [ ] Proper indexing strategy
+- [ ] N+1 query prevention
+- [ ] Pagination implemented
+- [ ] Response compression
+- [ ] Field filtering (GraphQL/sparse fieldsets)
+
+#### Caching Layers
+
+```python
+# Caching hierarchy
+1. Browser Cache      → 0ms
+2. CDN Edge Cache    → 10-50ms
+3. Redis/Memcached   → 1-5ms
+4. Application Cache → 0.1ms
+5. Database Cache    → 5-10ms
+6. Database Query    → 10-100ms
+```
+
+#### Concurrency & Scaling
+
+- [ ] Async/await for I/O operations
+- [ ] Worker threads for CPU-intensive tasks
+- [ ] Queue for background jobs
+- [ ] Rate limiting per endpoint
+- [ ] Circuit breakers for external services
+- [ ] Load balancing configured
+- [ ] Auto-scaling policies
+
+### 📈 Database Optimization
+
+#### Query Optimization
+
+```sql
+-- Before optimization
+SELECT * FROM orders o
+JOIN users u ON o.user_id = u.id
+WHERE u.country = 'US';
+
+-- After optimization
+SELECT o.id, o.total, u.name
+FROM orders o
+JOIN users u ON o.user_id = u.id
+WHERE u.country = 'US'
+AND o.created_at > NOW() - INTERVAL '30 days'
+LIMIT 100;
+
+-- With proper indexes
+CREATE INDEX idx_users_country ON users(country);
+CREATE INDEX idx_orders_user_created ON orders(user_id, created_at DESC);
+```
+
+#### Index Strategy
+
+- [ ] Primary keys on all tables
+- [ ] Foreign key indexes
+- [ ] Composite indexes for common queries
+- [ ] Covering indexes for read-heavy queries
+- [ ] Partial indexes for filtered queries
+- [ ] Monitor index usage
+
+## Performance Testing
+
+### 🧪 Load Testing
+
+```javascript
+// Performance test scenarios
+const scenarios = {
+  baseline: {
+    users: 100,
+    duration: '5m',
+    rampUp: '30s'
+  },
+  stress: {
+    users: 1000,
+    duration: '15m',
+    rampUp: '2m'
+  },
+  spike: {
+    users: 5000,
+    duration: '10m',
+    rampUp: '10s'
+  },
+  endurance: {
+    users: 500,
+    duration: '2h',
+    rampUp: '5m'
+  }
+};
+```
+
+### 📏 Performance Benchmarks
+
+| Metric | Excellent | Good | Needs Work | Unacceptable |
+|--------|-----------|------|------------|---------------|
+| Page Load | < 1s | < 2s | < 3s | > 3s |
+| API Response | < 100ms | < 300ms | < 1s | > 1s |
+| Database Query | < 10ms | < 50ms | < 200ms | > 200ms |
+| CPU Usage | < 40% | < 60% | < 80% | > 80% |
+| Memory Usage | < 50% | < 70% | < 85% | > 85% |
+| Error Rate | < 0.1% | < 1% | < 5% | > 5% |
+
+## Performance Monitoring Tools
+
+### Frontend Monitoring
+
+```javascript
+// Real User Monitoring (RUM)
+- Google Analytics / GA4
+- New Relic Browser
+- Datadog RUM
+- Sentry Performance
+
+// Synthetic Monitoring
+- Lighthouse CI
+- WebPageTest
+- GTmetrix
+- SpeedCurve
+```
+
+### Backend Monitoring
+
+```yaml
+# APM Tools
+- New Relic APM
+- Datadog APM
+- AppDynamics
+- Elastic APM
+
+# Custom Metrics
+- Prometheus + Grafana
+- StatsD
+- CloudWatch (AWS)
+- Application Insights (Azure)
+```
+
+## Performance Budget Enforcement
+
+### CI/CD Integration
+
+```yaml
+# Performance gates in pipeline
+performance-check:
+  stage: test
+  script:
+    - lighthouse ci --budget=./budget.json
+    - bundlesize --max-size 200KB
+    - npm run test:performance
+  rules:
+    fail_on:
+      - lcp > 2500
+      - fid > 100
+      - cls > 0.1
+      - bundle_size > budget
+```
+
+### Performance Reviews
+
+#### Weekly Checks
+
+- [ ] Core Web Vitals trends
+- [ ] API response times
+- [ ] Error rates
+- [ ] Database slow query log
+
+#### Monthly Analysis
+
+- [ ] Performance regression analysis
+- [ ] User impact assessment
+- [ ] Infrastructure cost vs performance
+- [ ] Optimization opportunities
+
+## Quick Performance Wins
+
+### Immediate Improvements
+
+```bash
+# Frontend
+✅ Enable compression (gzip/brotli)
+✅ Add Cache-Control headers
+✅ Optimize images (WebP, lazy load)
+✅ Minify CSS/JS
+✅ Remove unused dependencies
+
+# Backend
+✅ Add database indexes
+✅ Enable query caching
+✅ Implement pagination
+✅ Use connection pooling
+✅ Add Redis caching
+
+# Infrastructure
+✅ Enable CDN
+✅ Configure auto-scaling
+✅ Optimize container size
+✅ Use HTTP/2
+✅ Enable keep-alive
+```
+
+## Performance Anti-Patterns
+
+### Things to Avoid
+
+```javascript
+// ❌ DON'T DO THIS
+- Synchronous API calls in loops
+- Unbounded queries (SELECT * without LIMIT)
+- Large DOM manipulations
+- Inline styles/scripts
+- Blocking resources in <head>
+- Memory leaks (event listeners, timers)
+- N+1 database queries
+- Premature optimization
+
+// ✅ DO THIS INSTEAD
+- Batch API calls
+- Paginate large datasets
+- Virtual DOM / React
+- External stylesheets
+- Async/defer scripts
+- Cleanup in useEffect/componentWillUnmount
+- Eager loading with includes
+- Measure first, optimize second
+```
+
+## Performance Culture
+
+### Team Responsibilities
+
+#### Developers
+
+- Write performant code
+- Test performance locally
+- Monitor PR impact
+
+#### DevOps
+
+- Infrastructure optimization
+- Monitoring setup
+- Scaling policies
+
+#### Product
+
+- Define performance requirements
+- Prioritize performance work
+- Balance features vs speed
+
+### Performance Reviews
+
+- Include performance in code reviews
+- Regular performance audits
+- Performance retrospectives
+- Celebrate performance wins
+
+## Remember
+
+**Every millisecond counts.**
+
+- 100ms delay → 1% drop in sales
+- 1 second delay → 7% reduction in conversions
+- 3 seconds load → 53% mobile users leave
+
+**Performance is not a one-time task—it's a continuous process.**