claude-autopm 2.8.1 → 2.8.2

package/autopm/.claude/rules/performance-guidelines.md

@@ -1,403 +0,0 @@
-# ⚡ 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.**

package/autopm/.claude/rules/ui-development-standards.md

@@ -1,281 +0,0 @@
-# UI Development Standards Rule
-
-> **PURPOSE**: Mandatory standards for consistent UI/UX development across projects.
-
-## CRITICAL UI FRAMEWORK SELECTION
-
-### 1. FRAMEWORK DECISION MATRIX
-
-**Bootstrap** - Use `react-ui-expert` (framework=bootstrap):
-
-- Rapid prototyping and MVP development
-- Component-heavy applications (dashboards, admin panels)
-- Team prefers pre-built components
-- Consistent enterprise-grade design needed
-- Less custom design requirements
-
-**TailwindCSS** - Use `tailwindcss-expert`:
-
-- Custom design systems and unique branding
-- High-performance applications (smaller bundle sizes)
-- Design flexibility and utility-first approach needed
-- Developer team comfortable with utility classes
-- Modern, cutting-edge UI requirements
-
-**Selection Criteria**:
-
-```
-IF (rapid_development && pre_built_components) → Bootstrap
-IF (custom_design && performance_critical) → TailwindCSS
-IF (design_system_needed) → TailwindCSS
-IF (enterprise_consistency) → Bootstrap
-```
-
-### 2. RESPONSIVE DESIGN REQUIREMENTS
-
-**MANDATORY Responsive Breakpoints**:
-
-- Mobile First: Design for mobile, enhance for desktop
-- Breakpoints: 576px (sm), 768px (md), 992px (lg), 1200px (xl), 1400px (xxl)
-- Touch-friendly: Minimum 44px touch targets
-- Readable text: Minimum 16px font size on mobile
-
-**Testing Requirements**:
-
-- Test on actual devices, not just browser dev tools
-- Validate touch interactions on mobile devices
-- Ensure content reflows properly at all breakpoints
-- Test landscape and portrait orientations
-
-### 3. ACCESSIBILITY STANDARDS (WCAG 2.1 AA)
-
-**MANDATORY Accessibility Features**:
-
-- Semantic HTML structure (headings h1-h6 hierarchy)
-- Alt text for all images and meaningful graphics
-- Proper form labels and error messages
-- Keyboard navigation support
-- Color contrast ratio ≥ 4.5:1 for normal text
-- Focus indicators visible and high contrast
-
-**Implementation Requirements**:
-
-```html
-<!-- ALWAYS include proper ARIA labels -->
-<button aria-label="Close modal" aria-expanded="false">×</button>
-
-<!-- ALWAYS use semantic HTML -->
-<nav role="navigation">
-  <ul>
-    <li><a href="#section1">Section 1</a></li>
-  </ul>
-</nav>
-
-<!-- ALWAYS provide alternative text -->
-<img src="chart.png" alt="Sales increased 25% in Q3 2024">
-```
-
-### 4. PERFORMANCE STANDARDS
-
-**Bootstrap Projects**:
-
-- Bundle size limit: < 300KB (CSS + JS gzipped)
-- Custom builds: Include only required components
-- Optimize images: WebP format with fallbacks
-- Minimize DOM depth: < 15 levels deep
-
-**TailwindCSS Projects**:
-
-- PurgeCSS enabled: Remove unused utilities
-- Bundle size limit: < 50KB (CSS gzipped)
-- JIT mode enabled for development
-- Production builds must be optimized
-
-**Performance Metrics** (REQUIRED):
-
-- First Contentful Paint (FCP) < 1.5s
-- Largest Contentful Paint (LCP) < 2.5s
-- Cumulative Layout Shift (CLS) < 0.1
-- Time to Interactive (TTI) < 3.5s
-
-### 5. BROWSER COMPATIBILITY REQUIREMENTS
-
-**Supported Browsers** (MINIMUM):
-
-- Chrome/Edge: Last 2 versions
-- Firefox: Last 2 versions  
-- Safari: Last 2 versions
-- Mobile Safari (iOS): Last 2 versions
-- Chrome Mobile (Android): Last 2 versions
-
-**Fallback Strategies**:
-
-- Progressive enhancement approach
-- Graceful degradation for unsupported features
-- Polyfills for critical missing features
-- Alternative layouts for older browsers
-
-### 6. COMPONENT ARCHITECTURE STANDARDS
-
-**Bootstrap Components**:
-
-```html
-<!-- ALWAYS use consistent class patterns -->
-<div class="card h-100 shadow-sm">
-  <div class="card-header d-flex justify-content-between align-items-center">
-    <h5 class="card-title mb-0">Title</h5>
-    <button class="btn btn-sm btn-outline-secondary">Action</button>
-  </div>
-  <div class="card-body">
-    <p class="card-text">Content</p>
-  </div>
-</div>
-```
-
-**TailwindCSS Components**:
-
-```html
-<!-- ALWAYS extract component patterns -->
-<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
-  <div class="flex justify-between items-center mb-4">
-    <h3 class="text-lg font-semibold text-gray-900">Title</h3>
-    <button class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200">
-      Action
-    </button>
-  </div>
-  <p class="text-gray-600">Content</p>
-</div>
-```
-
-### 7. FORM VALIDATION STANDARDS
-
-**Client-Side Validation** (MANDATORY):
-
-- Real-time validation feedback
-- Clear error messages
-- Visual error indicators
-- Success confirmation states
-
-**Implementation Pattern**:
-
-```html
-<!-- Bootstrap form validation -->
-<form class="needs-validation" novalidate>
-  <div class="mb-3">
-    <label for="email" class="form-label">Email</label>
-    <input type="email" class="form-control" id="email" required>
-    <div class="invalid-feedback">Please provide a valid email.</div>
-    <div class="valid-feedback">Looks good!</div>
-  </div>
-</form>
-
-<!-- TailwindCSS form validation -->
-<form>
-  <div class="mb-4">
-    <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
-    <input 
-      type="email" 
-      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-      required
-    >
-    <p class="mt-1 text-sm text-red-600 hidden">Please provide a valid email.</p>
-  </div>
-</form>
-```
-
-### 8. DARK MODE IMPLEMENTATION
-
-**TailwindCSS Dark Mode**:
-
-```html
-<!-- ALWAYS support dark mode with TailwindCSS -->
-<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
-  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Title</h1>
-  <p class="text-gray-600 dark:text-gray-300">Content</p>
-</div>
-```
-
-**Bootstrap Dark Mode**:
-
-```html
-<!-- Use Bootstrap 5.3+ dark mode support -->
-<html data-bs-theme="dark">
-<div class="card">
-  <div class="card-body">
-    <h5 class="card-title">Dark Mode Card</h5>
-  </div>
-</div>
-</html>
-```
-
-### 9. TESTING REQUIREMENTS
-
-**Visual Testing** (MANDATORY):
-
-- Screenshot testing across breakpoints
-- Cross-browser visual comparison
-- Accessibility audit with tools (axe, WAVE)
-- Color contrast validation
-
-**Functional Testing**:
-
-- Form submission and validation
-- Interactive component behavior
-- Navigation and routing
-- Mobile touch interactions
-
-**Performance Testing**:
-
-- Bundle size monitoring
-- Load time measurement
-- Core Web Vitals tracking
-- Lighthouse audit scores ≥ 90
-
-### 10. CODE ORGANIZATION STANDARDS
-
-**File Structure**:
-
-```
-src/
-├── styles/
-│   ├── bootstrap/          # Bootstrap customizations
-│   │   ├── variables.scss  # Custom variables
-│   │   └── custom.scss     # Custom components
-│   └── tailwind/           # TailwindCSS customizations
-│       ├── config.js       # Tailwind configuration
-│       └── components/     # Component patterns
-├── components/             # Reusable UI components
-└── assets/                 # Images, fonts, icons
-```
-
-**Code Quality**:
-
-- Consistent indentation (2 spaces)
-- Meaningful class names and comments
-- Component reusability and modularity
-- Documentation for complex components
-
-## VIOLATIONS AND ENFORCEMENT
-
-**CRITICAL VIOLATIONS** (Block deployment):
-
-- Missing responsive design implementation
-- Accessibility violations (WCAG 2.1 AA failures)
-- Bundle size exceeds limits
-- No fallback for unsupported browsers
-
-**MAJOR VIOLATIONS** (Require fixes):
-
-- Inconsistent design patterns
-- Missing form validation
-- No dark mode support (for TailwindCSS projects)
-- Performance metrics below thresholds
-
-**MINOR VIOLATIONS** (Address in next iteration):
-
-- Suboptimal component organization
-- Missing hover/focus states
-- Incomplete documentation
-- Non-semantic HTML usage
-
-These standards ensure consistent, accessible, and performant UI development across all projects.