Full-Stack Optimizer Skill

Multi-agent orchestration for comprehensive application improvement

When to Use

• User says: "improve the app", "optimize functionality", "make it perfect"

• User requests: "analyze frontend and backend", "enhance the system"

• User wants: "bring it to perfection", "comprehensive improvements"

• After major feature completion: proactive optimization pass

Agent Deployment Strategy

This skill deploys 5 specialized agents in parallel for comprehensive analysis:

Agent 1: Frontend Performance Analyzer

Focus: UI/UX, performance, accessibility, user experience Tasks:

• Analyze all HTML/JS files in /public

• Check for unused CSS, duplicate code

• Validate accessibility (ARIA, semantic HTML)

• Test responsive design patterns

• Identify performance bottlenecks (large files, unoptimized assets)

• Check for console errors, deprecated APIs

• Validate client-side error handling

Output: /.claude/reports/frontend-analysis.md

Agent 2: Backend API Optimizer

Focus: API efficiency, error handling, database queries Tasks:

• Review all controllers (/src/controllers )

• Analyze all services (/src/services )

• Check for N+1 queries, missing indexes

• Validate error handling patterns

• Review API response times (check for slow endpoints)

• Identify duplicate code, refactoring opportunities

• Check for proper async/await usage

• Validate input sanitization

Output: /.claude/reports/backend-analysis.md

Agent 3: Security & Validation Auditor

Focus: Security vulnerabilities, input validation, auth Tasks:

• Scan for SQL injection vulnerabilities

• Check XSS prevention (input sanitization)

• Validate CORS configuration

• Review authentication/authorization flows

• Check for exposed secrets (hardcoded keys, passwords)

• Validate rate limiting implementation

• Review middleware security (helmet, express-validator)

• Check for CSRF protection

Output: /.claude/reports/security-audit.md

Agent 4: Database & Performance Expert

Focus: Database optimization, caching, query performance Tasks:

• Review database schema (/src/models )

• Analyze query patterns in services

• Check for missing indexes

• Validate connection pooling configuration

• Review Redis caching strategy

• Identify slow queries (check logs)

• Check for proper transaction usage

• Validate data normalization

Output: /.claude/reports/database-optimization.md

Agent 5: Code Quality & Architecture Reviewer

Focus: Code organization, TypeScript usage, patterns Tasks:

• Run ESLint and review violations

• Check TypeScript strict mode compliance

• Identify usage of any types (anti-pattern)

• Review file organization and module boundaries

• Check for proper error handling patterns

• Validate consistent naming conventions

• Review documentation completeness

• Check for circular dependencies

Output: /.claude/reports/code-quality.md

Execution Flow

Phase 1: Parallel Analysis (5 agents)

Deploy all 5 agents in parallel (single message, multiple Task calls)

Task(subagent_type="general-purpose", description="Frontend analysis", ...) Task(subagent_type="general-purpose", description="Backend optimization", ...) Task(subagent_type="general-purpose", description="Security audit", ...) Task(subagent_type="general-purpose", description="Database optimization", ...) Task(subagent_type="general-purpose", description="Code quality review", ...)

Estimated Time: 5-10 minutes (parallel execution)

Phase 2: Synthesis & Prioritization

After all agents complete:

• Read all 5 reports from /.claude/reports/

• Synthesize findings into unified improvement plan

• Prioritize by:

• P0 (Critical): Security vulnerabilities, broken functionality

• P1 (High): Performance issues, poor UX, API errors

• P2 (Medium): Code quality, refactoring opportunities

• P3 (Low): Documentation, minor improvements

Output: /.claude/reports/UNIFIED_IMPROVEMENT_PLAN.md

Phase 3: Implementation Agents (Prioritized)

Deploy implementation agents based on priority:

Round 1: P0 Critical Fixes (Deploy immediately)

• Security patches

• Broken functionality fixes

• Data integrity issues

Round 2: P1 High-Impact Improvements (Deploy after P0 complete)

• Performance optimizations

• API improvements

• UX enhancements

Round 3: P2 Code Quality (Deploy after P1 complete)

• Refactoring

• Type safety improvements

• Code organization

Round 4: P3 Polish (Optional, user approval)

• Documentation updates

• Minor UI tweaks

• Additional testing

Phase 4: Validation & Testing

After each implementation round:

• Run test suite: npm test

• Run linter: npm run lint

• Run type checker: npm run typecheck (if available)

• Run build: npm run build

• Test critical paths manually

• Run deployment validator: npm run test:render-ready

Detailed Agent Prompts

Agent 1 Prompt: Frontend Performance Analyzer

Task

Analyze all frontend code in /public directory for performance, UX, and accessibility improvements.

Steps

1. Use Glob to find all HTML files: public/**/*.html
2. Use Glob to find all JS files: public/**/*.js
3. Use Glob to find all CSS files: public/**/*.css
4. For each file:
   • Read file contents
   • Check for performance issues:
     • Large inline scripts (>1000 lines)
     • Duplicate code across files
     • Unoptimized images/assets
     • Missing compression/minification
   • Check for UX issues:
     • Poor error messages
     • Confusing navigation
     • Inconsistent styling
     • Missing loading states
   • Check for accessibility:
     • Missing ARIA labels
     • Poor semantic HTML
     • Missing alt text
     • Keyboard navigation issues
5. Test for console errors:
   • grep for console.error, console.warn
   • Check for deprecated APIs
6. Analyze bundle size (estimate):
   • Sum total file sizes
   • Identify largest files
   • Suggest code splitting opportunities

Output Format

Create /.claude/reports/frontend-analysis.md with:

• Executive Summary (3-5 bullets)
• Performance Issues (with file paths and line numbers)
• UX Issues (with screenshots or descriptions)
• Accessibility Issues (with WCAG guidelines)
• Quick Wins (easy improvements with high impact)
• Long-term Recommendations

Success Criteria

• All HTML/JS/CSS files analyzed
• Issues categorized by severity (P0-P3)
• Specific line numbers and file paths provided
• Actionable recommendations (not vague suggestions)

Agent 2 Prompt: Backend API Optimizer

Task

Analyze backend API code for efficiency, error handling, and optimization opportunities.

Steps

1. Use Glob to find all controllers: src/controllers/**/*.ts
2. Use Glob to find all services: src/services/**/*.ts
3. For each file:
   • Read file contents
   • Check for performance issues:
     • N+1 query patterns
     • Missing pagination
     • Inefficient loops
     • Blocking operations
   • Check for error handling:
     • Unhandled promise rejections
     • Missing try/catch blocks
     • Poor error messages
     • Inconsistent error formats
   • Check for code quality:
     • Duplicate logic
     • Long functions (>50 lines)
     • High complexity (nested ifs)
     • Usage of any types
4. Analyze API response times:
   • grep for slow operations (database queries, external calls)
   • Identify endpoints without caching
5. Check for proper async patterns:
   • grep for callback hell
   • Check for proper async/await usage

Output Format

Create /.claude/reports/backend-analysis.md with:

• Executive Summary
• Performance Bottlenecks (with endpoints and response times)
• Error Handling Issues (with file paths)
• Refactoring Opportunities (with code samples)
• Caching Recommendations
• Quick Wins

Success Criteria

• All controllers and services analyzed
• Specific performance metrics provided
• Code samples for issues
• Prioritized recommendations

Agent 3 Prompt: Security & Validation Auditor

Task

Audit entire codebase for security vulnerabilities and input validation issues.

Steps

1. Scan for common vulnerabilities:
   • SQL injection: grep for raw SQL queries without parameterization
   • XSS: grep for innerHTML, dangerouslySetInnerHTML
   • CSRF: check for CSRF tokens in forms
   • Exposed secrets: grep for password, api_key, secret
2. Review authentication:
   • Check JWT implementation
   • Validate session management
   • Check for proper password hashing
3. Review authorization:
   • Check RBAC implementation
   • Validate role checks on sensitive endpoints
4. Check input validation:
   • grep for express-validator usage
   • Check for missing validation on POST/PUT endpoints
5. Review middleware:
   • Check helmet configuration
   • Validate CORS settings
   • Check rate limiting

Output Format

Create /.claude/reports/security-audit.md with:

• Executive Summary (risk level: Low/Medium/High/Critical)
• Critical Vulnerabilities (P0 - fix immediately)
• High-Risk Issues (P1 - fix soon)
• Medium-Risk Issues (P2 - fix in next sprint)
• Compliance Checklist (OWASP Top 10)
• Remediation Steps (specific code changes)

Success Criteria

• All security risks identified and categorized
• OWASP Top 10 checklist completed
• Specific remediation code provided
• Risk levels assigned

Agent 4 Prompt: Database & Performance Expert

Task

Optimize database schema, queries, and caching strategy.

Steps

1. Review database schema:
   • Read all model files in /src/models
   • Check for missing indexes
   • Validate foreign key relationships
   • Check for proper normalization
2. Analyze query patterns:
   • grep for db.query, pool.query
   • Identify N+1 queries
   • Check for SELECT *
   • Look for missing WHERE clauses
3. Review caching:
   • Check Redis usage in services
   • Identify cacheable endpoints
   • Validate cache invalidation logic
4. Check connection pooling:
   • Review pool configuration
   • Check for connection leaks
5. Analyze transaction usage:
   • grep for BEGIN/COMMIT/ROLLBACK
   • Check for proper error handling in transactions

Output Format

Create /.claude/reports/database-optimization.md with:

• Executive Summary
• Schema Issues (missing indexes, normalization problems)
• Query Optimization (slow queries with alternatives)
• Caching Strategy (what to cache, TTLs)
• Connection Pool Tuning
• Transaction Improvements
• Quick Wins

Success Criteria

• All models and queries analyzed
• Specific index recommendations
• Query rewrites provided
• Caching strategy documented

Agent 5 Prompt: Code Quality & Architecture Reviewer

Task

Review code organization, TypeScript usage, and architectural patterns.

Steps

1. Run linter:
   • Execute: npm run lint
   • Capture output and categorize violations
2. Check TypeScript compliance:
   • grep for any types (anti-pattern)
   • Check for @ts-ignore comments
   • Validate strict mode compliance
3. Review file organization:
   • Check module boundaries
   • Identify circular dependencies
   • Validate separation of concerns
4. Check naming conventions:
   • Validate camelCase, PascalCase usage
   • Check for consistent file naming
5. Review error handling:
   • Check for custom error classes
   • Validate error propagation
6. Check documentation:
   • grep for JSDoc comments
   • Identify undocumented functions

Output Format

Create /.claude/reports/code-quality.md with:

• Executive Summary
• TypeScript Issues (any usage, strict mode violations)
• Linting Violations (categorized by rule)
• Architectural Issues (module boundaries, circular deps)
• Documentation Gaps
• Refactoring Opportunities
• Quick Wins

Success Criteria

• Lint report analyzed
• All any usages catalogued
• Architectural issues documented
• Specific refactoring steps provided

Implementation Template

When this skill is invoked, use this template:

🚀 Full-Stack Optimization Initiated

I'm deploying 5 specialized agents in parallel to comprehensively analyze and improve the application:

1. 🎨 Frontend Performance Analyzer - UI/UX, accessibility, performance
2. ⚙️ Backend API Optimizer - API efficiency, error handling, queries
3. 🔒 Security & Validation Auditor - Vulnerabilities, input validation
4. 🗄️ Database & Performance Expert - Schema, queries, caching
5. 📐 Code Quality & Architecture Reviewer - TypeScript, patterns, organization

Estimated Time: 5-10 minutes for analysis phase

I'll keep you updated as each agent completes their analysis...

After All Agents Complete

✅ All 5 agents have completed their analysis!

Summary of Findings

Frontend: [X issues found - Y critical, Z high-priority] Backend: [X issues found - Y critical, Z high-priority] Security: [Risk Level: Low/Medium/High/Critical] Database: [X optimization opportunities] Code Quality: [X violations, Y refactoring opportunities]

Unified Improvement Plan

I've synthesized all findings into a prioritized plan:

🔴 P0 - Critical (Fix Immediately)

[List critical issues from all agents]

🟠 P1 - High Priority (Fix This Sprint)

[List high-priority issues]

🟡 P2 - Medium Priority (Next Sprint)

[List medium-priority issues]

🟢 P3 - Low Priority (Nice to Have)

[List low-priority improvements]

Next Steps

Would you like me to:

1. Start implementing P0 critical fixes (recommended)
2. Review the full reports (/.claude/reports/) before proceeding
3. Deploy implementation agents for specific priorities
4. Focus on a specific area (frontend, backend, security, database, or code quality)

I can deploy implementation agents in parallel to fix multiple issues simultaneously.

Validation Checklist

After each implementation round, verify:

• All tests pass: npm test

• No lint errors: npm run lint

• Build succeeds: npm run build

• Type checking passes: npm run typecheck (if available)

• Deployment ready: npm run test:render-ready

• Manual smoke test of critical paths

• No new console errors in browser

• API health check passes: curl http://localhost:3000/api/health

Success Metrics

Track improvement over time:

• Performance: Measure API response times before/after

• Code Quality: Lint errors reduced, any types eliminated

• Security: Vulnerabilities patched, security score improved

• User Experience: Faster page loads, fewer errors

• Maintainability: Clearer code organization, better documentation

Iteration & Refinement

After first optimization pass:

• Record metrics in /.claude/reports/METRICS_BASELINE.md

• Schedule monthly optimization passes

• Track progress over time

• Refine agent prompts based on effectiveness

• Add new agents for emerging needs (e.g., SEO, analytics)

Commands for Manual Invocation

Generate all reports (run agents manually)

npm run optimize:analyze

Implement specific priority

npm run optimize:implement P0 # Critical fixes npm run optimize:implement P1 # High priority npm run optimize:implement P2 # Medium priority

Full optimization cycle

npm run optimize:full # Analyze → Synthesize → Implement → Validate

View reports

npm run optimize:reports

Integration with Existing Skills

This skill works with:

• deployment-validator: Auto-runs before final deployment

• validation: Self-correcting loop if tests fail

• scout: Finds external examples for complex improvements

Continuous Improvement

This skill improves with use:

• Track which recommendations had highest impact

• Refine agent prompts for better analysis

• Add new agents for uncovered areas

• Update prioritization logic based on results

• Document lessons learned in /.claude/learning/optimization-lessons.md

Note: This skill represents a significant time investment (1-2 hours for full cycle). Use for:

• Major releases

• Post-launch optimization

• Monthly health checks

• Before important demos

• After significant feature additions

For smaller improvements, use individual agents directly.