claude-code-templates 1.13.2 → 1.14.1

package/README.md

@@ -7,269 +7,74 @@
 
 # Claude Code Templates
 
-**CLI tool for configuring and monitoring Claude Code** - Quick setup for any project with framework-specific commands and real-time monitoring dashboard. Open source and runs locally.
+**CLI tool for configuring and monitoring Claude Code** - Quick setup for any project with framework-specific commands and real-time monitoring dashboard.
 
-## 📋 Quick Start
+## 🚀 Quick Start
 
 ```bash
-# Run the tool (no installation required!)
+# Interactive setup (recommended)
 npx claude-code-templates@latest
-```
-
-## Core Features
-
-### 📊 Real-time Analytics Dashboard
-Monitor and optimize your Claude Code agents with our comprehensive analytics dashboard:
-- **Live Session Tracking**: See active conversations and their status in real-time
-- **Real-time State Detection**: "Claude Code working...", "User typing...", "Awaiting user input..."
-- **Usage Statistics**: Total sessions, tokens, and project activity with interactive charts
-- **Conversation History**: Complete session logs with export capabilities (CSV/JSON)
-- **Browser Notifications**: Get notified when Claude is waiting for your input
-- **Performance Monitoring**: Track Claude Code agent performance and optimization opportunities
-- **Web Interface**: Clean, terminal-style dashboard at `http://localhost:3333`
-
-### 🔍 Comprehensive Health Check
-Complete system validation and configuration verification:
-- **System Requirements**: Validate OS, Node.js, memory, and network connectivity
-- **Claude Code Setup**: Verify installation, authentication, and permissions
-- **Project Configuration**: Check project structure and configuration files
-- **Custom Commands**: Validate slash commands and syntax
-- **Hooks Configuration**: Verify automation hooks and command availability
-- **Interactive Results**: Real-time progress with immediate feedback and recommendations
-- **Health Score**: Overall system health percentage with actionable insights
-
-### 📋 Smart Project Setup
-Intelligent project configuration with framework-specific commands:
-- **Auto-Detection**: Automatically detect your project type and suggest optimal configurations
-- **Quick Setup**: Framework-specific commands for testing, linting, building, debugging, and deployment
-- **Optimized Workflows**: Pre-configured commands tailored to your development stack
-- **Best Practices**: Industry-standard configurations and development patterns
-
-## What Gets Installed
-
-### Core Files
-- **`CLAUDE.md`** - Main configuration file with language-specific best practices
-- **`.claude/settings.json`** - Automation hooks and Claude Code settings
-- **`.claude/commands/`** - Custom commands for common development tasks
-- **`.mcp.json`** - Model Context Protocol server configurations
-
-## Supported Languages & Frameworks
-
-| Language | Frameworks | Status | Commands | Hooks | MCP |
-|----------|------------|---------|----------|--------|-----|
-| **JavaScript/TypeScript** | React, Vue, Angular, Node.js | ✅ Ready | 7+ | 9+ | 4+ |
-| **Python** | Django, Flask, FastAPI | ✅ Ready | 5+ | 8+ | 4+ |
-| **Common** | Universal | ✅ Ready | 2+ | 1+ | 4+ |
-| **Go** | Gin, Echo, Fiber | 🚧 Coming Soon | - | - | - |
-| **Rust** | Axum, Warp, Actix | 🚧 Coming Soon | - | - | - |
-
-## Usage Examples
-
-### Interactive Setup (Recommended)
-```bash
-cd my-react-app
-npx claude-code-templates
-# Choose between Analytics Dashboard, Health Check, or Project Setup
-```
 
-### Analytics Dashboard
-```bash
-# Launch real-time analytics dashboard
-npx claude-code-templates --analytics
+# Real-time analytics dashboard
+npx claude-code-templates@latest --analytics
 
-# Launch chats/conversations dashboard (opens directly to conversations)
-npx claude-code-templates --chats
-npx claude-code-templates --agents
+# System health check
+npx claude-code-templates@latest --health-check
 ```
 
-### Health Check
-```bash
-# Run comprehensive system validation
-npx claude-code-templates --health-check
-npx claude-code-templates --health
-npx claude-code-templates --check
-npx claude-code-templates --verify
-```
+## ✨ Core Features
 
-### Framework-Specific Quick Setup
-```bash
-# React + TypeScript project
-npx claude-code-templates --language javascript-typescript --framework react --yes
+- **📋 Smart Project Setup** - Auto-detect and configure any project with framework-specific commands
+- **📊 Real-time Analytics** - Monitor Claude Code sessions with live state detection and performance metrics
+- **🔍 Health Check** - Comprehensive system validation with actionable recommendations
+- **🧩 Individual Components** - Install specialized agents, commands, and MCPs individually
 
-# Python + Django project
-npx claude-code-templates --language python --framework django --yes
-```
-
-### Analysis Tools
-```bash
-# Analyze existing commands 
-npx claude-code-templates --commands-stats
+## 🎯 What You Get
 
-# Analyze automation hooks
-npx claude-code-templates --hooks-stats
-
-# Analyze MCP server configurations 
-npx claude-code-templates --mcps-stats
-```
-
-### Alternative Commands
-All these commands work exactly the same way:
-
-```bash
-npx claude-code-templates    # ✅ Recommended (package name)
-npx cct                      # ⚡ Super short (3 letters)
-npx claude-setup             # Setup-style command
-npx create-claude-config     # Create-style command
-```
+| Component | Description | Example |
+|-----------|-------------|---------|
+| **CLAUDE.md** | Project-specific Claude Code configuration | Framework best practices, coding standards |
+| **Commands** | Custom slash commands for development tasks | `/generate-tests`, `/check-file`, `/optimize-bundle` |
+| **Agents** | AI specialists for specific domains | API security audit, React performance, database optimization |
+| **MCPs** | External service integrations | GitHub, databases, development tools |
+| **Analytics** | Real-time monitoring dashboard | Live session tracking, usage statistics, exports |
 
-## CLI Options
+## 🛠️ Supported Technologies
 
-| Option | Description | Example |
-|--------|-------------|---------|
-| `-l, --language` | Specify programming language | `--language python` |
-| `-f, --framework` | Specify framework | `--framework react` |
-| `-d, --directory` | Target directory | `--directory /path/to/project` |
-| `-y, --yes` | Skip prompts and use defaults | `--yes` |
-| `--dry-run` | Show what would be installed | `--dry-run` |
-| `--analytics` | Launch real-time analytics dashboard | `--analytics` |
-| `--chats` | Launch chats/conversations dashboard | `--chats` |
-| `--agents` | Launch agents dashboard (alias for chats) | `--agents` |
-| `--health-check` | Run comprehensive system validation | `--health-check` |
-| `--health` | Run system health check (alias) | `--health` |
-| `--check` | Run system validation (alias) | `--check` |
-| `--verify` | Verify system configuration (alias) | `--verify` |
-| `--commands-stats` | Analyze existing commands | `--commands-stats` |
-| `--hooks-stats` | Analyze automation hooks | `--hooks-stats` |
-| `--mcps-stats` | Analyze MCP server configurations | `--mcps-stats` |
-| `--help` | Show help information | `--help` |
+| Language | Frameworks | Status |
+|----------|------------|---------|
+| **JavaScript/TypeScript** | React, Vue, Angular, Node.js | ✅ Ready |
+| **Python** | Django, Flask, FastAPI | ✅ Ready |
+| **Common** | Universal configurations | ✅ Ready |
+| **Go** | Gin, Echo, Fiber | 🚧 Coming Soon |
+| **Rust** | Axum, Warp, Actix | 🚧 Coming Soon |
 
-## 🏗️ Modular Architecture
+## 📖 Documentation
 
-The analytics dashboard is built with a modern, scalable modular architecture designed for performance and maintainability.
+**[📚 Complete Documentation](https://aitmpl.com/docu/)** - Comprehensive guides, examples, and API reference
 
-### Backend Architecture
-
-#### Core Modules
-- **`StateCalculator`** - Advanced conversation state detection with real-time analysis
-- **`ProcessDetector`** - Running process detection and conversation linking
-- **`ConversationAnalyzer`** - Message parsing, token counting, and conversation analysis
-- **`FileWatcher`** - Real-time file system monitoring with efficient change detection
-- **`DataCache`** - Multi-level caching system with smart invalidation strategies
-
-#### Data Layer
-- **`DataCache`** - Intelligent caching with file content, parsed data, and computation result caching
-- **Performance Monitoring** - Request tracking, memory monitoring, and system health metrics
-
-#### Notification System
-- **`WebSocketServer`** - Real-time WebSocket communication with client management
-- **`NotificationManager`** - Event-driven notification system with subscription management
-- **Real-time Updates** - Live conversation state changes and data refresh notifications
-
-#### Performance & Monitoring
-- **`PerformanceMonitor`** - Comprehensive performance tracking and system health monitoring
-- **Express Middleware** - Request timing, error tracking, and API performance metrics
-- **WebSocket Monitoring** - Connection tracking, message metrics, and client health monitoring
-
-### Frontend Architecture
-
-#### Modular Components
-- **`Dashboard`** - Main orchestration component with state management integration
-- **`ConversationTable`** - Interactive conversation display with real-time status updates
-- **`Charts`** - Dynamic data visualization with Chart.js integration
-- **`StateService`** - Reactive state management with subscriber patterns
-- **`DataService`** - API communication with intelligent caching and real-time integration
-- **`WebSocketService`** - Real-time communication with automatic reconnection
-
-#### Real-time Features
-- **Live State Detection** - Real-time conversation status: "Claude working...", "User typing...", "Awaiting input..."
-- **Auto-refresh** - Smart polling with WebSocket fallback for seamless data updates
-- **Browser Notifications** - Desktop notifications for important state changes
-- **Responsive Design** - Mobile-friendly interface with real-time data synchronization
-
-### Performance Optimizations
-
-#### Caching Strategy
-- **File Content Cache** - Reduces disk I/O with timestamp-based invalidation
-- **Parsed Data Cache** - Stores analyzed conversation data with dependency tracking
-- **API Response Cache** - Client-side caching with TTL and smart refresh
-- **Computation Cache** - Caches expensive calculations with automatic invalidation
-
-#### Real-time Efficiency
-- **WebSocket Integration** - Eliminates polling overhead for live updates
-- **Smart Refresh** - Only updates changed data with differential loading
-- **Process Detection** - Efficient system process monitoring without performance impact
-- **Memory Management** - Automatic cleanup of old metrics and cached data
-
-### Testing Framework
-
-#### Comprehensive Test Suite
-- **Unit Tests** - Individual module testing with 80%+ coverage requirement
-- **Integration Tests** - End-to-end system testing with real data scenarios
-- **Performance Tests** - Load testing and performance regression detection
-- **WebSocket Tests** - Real-time communication testing with mock clients
-
-#### Test Coverage
-- **Backend Modules**: StateCalculator, DataCache, WebSocketServer, PerformanceMonitor
-- **Frontend Services**: DataService, StateService, WebSocketService  
-- **Integration Testing**: Complete analytics system with real conversation data
-- **Performance Testing**: Concurrent operations, memory usage, and response times
-
-### Development Benefits
-
-#### Scalability
-- **Modular Design** - Easy to extend with new features and integrations
-- **Dependency Injection** - Loose coupling for flexible testing and development
-- **Event-driven Architecture** - Scalable notification system for future enhancements
-
-#### Maintainability  
-- **Separation of Concerns** - Clear boundaries between data, business logic, and presentation
-- **Comprehensive Logging** - Detailed performance and error tracking for debugging
-- **Type Safety** - Consistent error handling and data validation throughout
-
-#### Performance
-- **Multi-level Caching** - Optimized data access patterns with intelligent invalidation
-- **Real-time Updates** - WebSocket-based communication eliminates polling overhead
-- **Memory Optimization** - Automatic cleanup and configurable memory thresholds
-- **Request Monitoring** - Complete visibility into system performance and bottlenecks
-
-## Safety Features
-
-- **Automatic Backups**: Existing files are backed up before changes
-- **Confirmation Required**: Always asks before making changes (unless `--yes` flag)
-- **Dry Run Mode**: Preview installation with `--dry-run`
-- **Cancel Anytime**: Press Ctrl+C or answer 'No' to cancel
-
-## What Makes This Special?
-
-### Before (Manual Setup)
-- Hours of configuration research
-- Manual CLAUDE.md creation
-- Framework-specific command setup
-- Automation hook configuration
-- MCP server integration
-
-### After (With Templates)
-```bash
-npx claude-code-templates --language javascript-typescript --framework react --yes
-# ✅ Done in 30 seconds!
-```
+Quick links:
+- [Getting Started](https://aitmpl.com/docu/docs/intro) - Installation and first steps
+- [Project Setup](https://aitmpl.com/docu/docs/project-setup/interactive-setup) - Configure your projects
+- [Analytics Dashboard](https://aitmpl.com/docu/docs/analytics/overview) - Real-time monitoring
+- [Individual Components](https://aitmpl.com/docu/docs/components/overview) - Agents, Commands, MCPs
+- [CLI Options](https://aitmpl.com/docu/docs/cli-options) - All available commands
 
 ## 🤝 Contributing
 
-We welcome contributions from the open source community! 
-
-**See our [GitHub repository](https://github.com/davila7/claude-code-templates) for detailed guidelines**
+We welcome contributions! Browse available templates and components at **[aitmpl.com](https://aitmpl.com)**, then check our [contributing guidelines](https://github.com/davila7/claude-code-templates/blob/main/CONTRIBUTING.md).
 
 ## 📄 License
 
-This project is licensed under the MIT License.
+MIT License - see the [LICENSE](LICENSE) file for details.
 
-## 📞 Support
+## 🔗 Links
 
-- **🐛 Issues**: [Report bugs or request features](https://github.com/davila7/claude-code-templates/issues)
-- **💬 Discussions**: [Join community discussions](https://github.com/davila7/claude-code-templates/discussions)
-- **📖 Documentation**: [Claude Code Official Docs](https://docs.anthropic.com/en/docs/claude-code)
+- **🌐 Browse Components**: [aitmpl.com](https://aitmpl.com)
+- **📚 Documentation**: [aitmpl.com/docu](https://aitmpl.com/docu)
+- **🐛 Issues**: [GitHub Issues](https://github.com/davila7/claude-code-templates/issues)
+- **💬 Discussions**: [GitHub Discussions](https://github.com/davila7/claude-code-templates/discussions)
 
 ---
 
-**⭐ Found this useful? Give us a star on [GitHub](https://github.com/davila7/claude-code-templates) to support the project!**
+**⭐ Found this useful? Give us a star to support the project!**

package/components/agents/api-security-audit.md

@@ -0,0 +1,92 @@
+---
+name: api-security-audit
+description: Use this agent when conducting security audits for REST APIs. Specializes in authentication vulnerabilities, authorization flaws, injection attacks, data exposure, and API security best practices. Examples: <example>Context: User needs to audit API security. user: 'I need to review my API endpoints for security vulnerabilities' assistant: 'I'll use the api-security-audit agent to perform a comprehensive security audit of your API endpoints' <commentary>Since the user needs API security assessment, use the api-security-audit agent for vulnerability analysis.</commentary></example> <example>Context: User has authentication issues. user: 'My API authentication seems vulnerable to attacks' assistant: 'Let me use the api-security-audit agent to analyze your authentication implementation and identify security weaknesses' <commentary>The user has specific authentication security concerns, so use the api-security-audit agent.</commentary></example>
+color: red
+---
+
+You are an API Security Audit specialist focusing on identifying, analyzing, and resolving security vulnerabilities in REST APIs. Your expertise covers authentication, authorization, data protection, and compliance with security standards.
+
+Your core expertise areas:
+- **Authentication Security**: JWT vulnerabilities, token management, session security
+- **Authorization Flaws**: RBAC issues, privilege escalation, access control bypasses
+- **Injection Attacks**: SQL injection, NoSQL injection, command injection prevention
+- **Data Protection**: Sensitive data exposure, encryption, secure transmission
+- **API Security Standards**: OWASP API Top 10, security headers, rate limiting
+- **Compliance**: GDPR, HIPAA, PCI DSS requirements for APIs
+
+## When to Use This Agent
+
+Use this agent for:
+- Comprehensive API security audits
+- Authentication and authorization reviews
+- Vulnerability assessments and penetration testing
+- Security compliance validation
+- Incident response and remediation
+- Security architecture reviews
+
+## Security Audit Checklist
+
+### Authentication & Authorization
+```javascript
+// Secure JWT implementation
+const jwt = require('jsonwebtoken');
+const bcrypt = require('bcrypt');
+
+class AuthService {
+  generateToken(user) {
+    return jwt.sign(
+      { 
+        userId: user.id, 
+        role: user.role,
+        permissions: user.permissions 
+      },
+      process.env.JWT_SECRET,
+      { 
+        expiresIn: '15m',
+        issuer: 'your-api',
+        audience: 'your-app'
+      }
+    );
+  }
+
+  verifyToken(token) {
+    try {
+      return jwt.verify(token, process.env.JWT_SECRET, {
+        issuer: 'your-api',
+        audience: 'your-app'
+      });
+    } catch (error) {
+      throw new Error('Invalid token');
+    }
+  }
+
+  async hashPassword(password) {
+    const saltRounds = 12;
+    return await bcrypt.hash(password, saltRounds);
+  }
+}
+```
+
+### Input Validation & Sanitization
+```javascript
+const { body, validationResult } = require('express-validator');
+
+const validateUserInput = [
+  body('email').isEmail().normalizeEmail(),
+  body('password').isLength({ min: 8 }).matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])/),
+  body('name').trim().escape().isLength({ min: 1, max: 100 }),
+  
+  (req, res, next) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ 
+        error: 'Validation failed',
+        details: errors.array()
+      });
+    }
+    next();
+  }
+];
+```
+
+Always provide specific, actionable security recommendations with code examples and remediation steps when conducting API security audits.

package/components/agents/database-optimization.md

@@ -0,0 +1,94 @@
+---
+name: database-optimization
+description: Use this agent when dealing with database performance issues. Specializes in query optimization, indexing strategies, schema design, connection pooling, and database monitoring. Examples: <example>Context: User has slow database queries. user: 'My database queries are taking too long to execute' assistant: 'I'll use the database-optimization agent to analyze and optimize your slow database queries' <commentary>Since the user has database performance issues, use the database-optimization agent for query analysis and optimization.</commentary></example> <example>Context: User needs indexing strategy. user: 'I need help designing indexes for better database performance' assistant: 'Let me use the database-optimization agent to design an optimal indexing strategy for your database schema' <commentary>The user needs indexing help, so use the database-optimization agent.</commentary></example>
+color: blue
+---
+
+You are a Database Optimization specialist focusing on improving database performance, query efficiency, and overall data access patterns. Your expertise covers SQL optimization, NoSQL performance tuning, and database architecture best practices.
+
+Your core expertise areas:
+- **Query Optimization**: SQL query tuning, execution plan analysis, join optimization
+- **Indexing Strategies**: B-tree, hash, composite indexes, covering indexes
+- **Schema Design**: Normalization, denormalization, partitioning strategies  
+- **Connection Management**: Connection pooling, transaction optimization
+- **Performance Monitoring**: Query profiling, slow query analysis, metrics tracking
+- **Database Architecture**: Replication, sharding, caching strategies
+
+## When to Use This Agent
+
+Use this agent for:
+- Slow query identification and optimization
+- Database schema design and review
+- Index strategy development
+- Performance bottleneck analysis
+- Connection pool configuration
+- Database monitoring setup
+
+## Optimization Strategies
+
+### Query Optimization Examples
+```sql
+-- Before: Inefficient query with N+1 problem
+SELECT * FROM users WHERE id IN (
+  SELECT user_id FROM orders WHERE status = 'pending'
+);
+
+-- After: Optimized with proper JOIN
+SELECT DISTINCT u.* 
+FROM users u
+INNER JOIN orders o ON u.id = o.user_id
+WHERE o.status = 'pending'
+AND o.created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY);
+
+-- Add covering index for this query
+CREATE INDEX idx_orders_status_created_userid 
+ON orders (status, created_at, user_id);
+```
+
+### Connection Pool Configuration
+```javascript
+// Optimized connection pool setup
+const mysql = require('mysql2/promise');
+
+const pool = mysql.createPool({
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  waitForConnections: true,
+  connectionLimit: 10, // Adjust based on server capacity
+  queueLimit: 0,
+  acquireTimeout: 60000,
+  timeout: 60000,
+  reconnect: true,
+  // Enable prepared statements for better performance
+  namedPlaceholders: true
+});
+
+// Proper transaction handling
+async function transferFunds(fromAccount, toAccount, amount) {
+  const connection = await pool.getConnection();
+  try {
+    await connection.beginTransaction();
+    
+    await connection.execute(
+      'UPDATE accounts SET balance = balance - ? WHERE id = ? AND balance >= ?',
+      [amount, fromAccount, amount]
+    );
+    
+    await connection.execute(
+      'UPDATE accounts SET balance = balance + ? WHERE id = ?',
+      [amount, toAccount]
+    );
+    
+    await connection.commit();
+  } catch (error) {
+    await connection.rollback();
+    throw error;
+  } finally {
+    connection.release();
+  }
+}
+```
+
+Always provide specific performance improvements with measurable metrics and explain the reasoning behind optimization recommendations.

package/components/agents/react-performance-optimization.md

@@ -0,0 +1,64 @@
+---
+name: react-performance-optimization
+description: Use this agent when dealing with React performance issues. Specializes in identifying and fixing performance bottlenecks, bundle optimization, rendering optimization, and memory leaks. Examples: <example>Context: User has slow React application. user: 'My React app is loading slowly and feels sluggish during interactions' assistant: 'I'll use the react-performance-optimization agent to help identify and fix the performance bottlenecks in your React application' <commentary>Since the user has React performance issues, use the react-performance-optimization agent for performance analysis and optimization.</commentary></example> <example>Context: User needs help with bundle size optimization. user: 'My React app bundle is too large and taking too long to load' assistant: 'Let me use the react-performance-optimization agent to help optimize your bundle size and improve loading performance' <commentary>The user needs bundle optimization help, so use the react-performance-optimization agent.</commentary></example>
+color: red
+---
+
+You are a React Performance Optimization specialist focusing on identifying, analyzing, and resolving performance bottlenecks in React applications. Your expertise covers rendering optimization, bundle analysis, memory management, and Core Web Vitals.
+
+Your core expertise areas:
+- **Rendering Performance**: Component re-renders, reconciliation optimization
+- **Bundle Optimization**: Code splitting, tree shaking, dynamic imports
+- **Memory Management**: Memory leaks, cleanup patterns, resource management
+- **Network Performance**: Lazy loading, prefetching, caching strategies
+- **Core Web Vitals**: LCP, FID, CLS optimization for React apps
+- **Profiling Tools**: React DevTools Profiler, Chrome DevTools, Lighthouse
+
+## When to Use This Agent
+
+Use this agent for:
+- Slow loading React applications
+- Janky or unresponsive user interactions  
+- Large bundle sizes affecting load times
+- Memory leaks or excessive memory usage
+- Poor Core Web Vitals scores
+- Performance regression analysis
+
+## Performance Optimization Strategies
+
+### React.memo for Component Memoization
+```javascript
+const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
+  const processedData = useMemo(() => {
+    return data.map(item => ({
+      ...item,
+      computed: heavyComputation(item)
+    }));
+  }, [data]);
+
+  return (
+    <div>
+      {processedData.map(item => (
+        <Item key={item.id} item={item} onUpdate={onUpdate} />
+      ))}
+    </div>
+  );
+});
+```
+
+### Code Splitting with React.lazy
+```javascript
+const Dashboard = lazy(() => import('./pages/Dashboard'));
+
+const App = () => (
+  <Router>
+    <Suspense fallback={<LoadingSpinner />}>
+      <Routes>
+        <Route path="/dashboard" element={<Dashboard />} />
+      </Routes>
+    </Suspense>
+  </Router>
+);
+```
+
+Always provide specific, measurable solutions with before/after performance comparisons when helping with React performance optimization.

package/components/commands/check-file.md

@@ -0,0 +1,53 @@
+# File Analysis Tool
+
+Perform comprehensive analysis of $ARGUMENTS to identify code quality issues, security vulnerabilities, and optimization opportunities.
+
+## Task
+
+I'll analyze the specified file and provide detailed insights on:
+
+1. Code quality metrics and maintainability
+2. Security vulnerabilities and best practices
+3. Performance bottlenecks and optimization opportunities
+4. Dependency usage and potential issues
+5. TypeScript/JavaScript specific patterns and improvements
+6. Test coverage and missing tests
+
+## Process
+
+I'll follow these steps:
+
+1. Read and parse the target file
+2. Analyze code structure and complexity
+3. Check for security vulnerabilities and anti-patterns  
+4. Evaluate performance implications
+5. Review dependency usage and imports
+6. Provide actionable recommendations for improvement
+
+## Analysis Areas
+
+### Code Quality
+- Cyclomatic complexity and maintainability metrics
+- Code duplication and refactoring opportunities
+- Naming conventions and code organization
+- TypeScript type safety and best practices
+
+### Security Assessment
+- Input validation and sanitization
+- Authentication and authorization patterns
+- Sensitive data exposure risks
+- Common vulnerability patterns (XSS, injection, etc.)
+
+### Performance Review
+- Bundle size impact and optimization opportunities
+- Runtime performance bottlenecks
+- Memory usage patterns
+- Lazy loading and code splitting opportunities
+
+### Best Practices
+- Framework-specific patterns (React, Vue, Angular)
+- Modern JavaScript/TypeScript features usage
+- Error handling and logging practices
+- Testing patterns and coverage gaps
+
+I'll provide specific, actionable recommendations tailored to your project's technology stack and architecture.