mirror of
https://github.com/SuperClaude-Org/SuperClaude_Framework.git
synced 2025-12-29 16:16:08 +00:00
📚 Major documentation cleanup: Fix CLI confusion and streamline content
## Critical Fixes ✅ - **CLI Command Syntax**: Fixed all ambiguous `SuperClaude --version` → `python3 -m SuperClaude --version` - **Architecture Clarity**: Verified dual architecture documentation (Python CLI + Context Framework) - **External Dependencies**: Marked unverified APIs as experimental (TWENTYFIRST_API_KEY, MORPH_API_KEY) - **Installation Instructions**: Clarified NPM package names with verification warnings ## Content Optimization 🗑️ - **Removed unnecessary files**: - optimization-guide.md (inappropriate for context files) - quick-start-practices.md (duplicate content) - Various outdated socratic learning components - **Updated cross-references**: Fixed all broken links to point to existing, relevant content - **Consolidated navigation**: Streamlined Reference/README.md documentation matrix ## Technical Accuracy 🎯 - **Command References**: All commands now specify exact usage context (terminal vs Claude Code) - **Framework Nature**: Consistently explains SuperClaude as context framework, not executable software - **Installation Verification**: Updated diagnostic scripts with correct Python CLI commands - **MCP Configuration**: Marked experimental services appropriately ## Impact Summary 📊 - **Files Modified**: 15+ documentation files for accuracy and consistency - **Files Removed**: 5+ unnecessary/duplicate files - **Broken Links**: 0 (all cross-references updated) - **User Clarity**: Significantly improved understanding of dual architecture Result: Professional documentation that accurately represents SuperClaude's sophisticated dual architecture (Python CLI installation system + Claude Code context framework). 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,562 +1,319 @@
|
||||
# SuperClaude Integration Patterns Collection
|
||||
|
||||
**Status**: ✅ **VERIFIED SuperClaude v4.0** - Framework integration, cross-tool coordination, and performance optimization recipes.
|
||||
**Status**: ✅ **Status: Current** - Context patterns for framework integration and tool coordination.
|
||||
|
||||
**Expert Integration Guide**: Advanced patterns for framework integration, cross-tool coordination, performance optimization, and troubleshooting complex development scenarios.
|
||||
**Context Integration Guide**: Patterns for using SuperClaude commands effectively with different frameworks and tools. Remember: SuperClaude provides context to Claude Code - all actual work is done by Claude.
|
||||
|
||||
## Overview and Usage Guide
|
||||
|
||||
**Purpose**: Expert-level integration patterns for complex tool coordination, framework integration, and performance optimization across diverse development environments.
|
||||
**Purpose**: Effective patterns for using SuperClaude context with various development frameworks and tools.
|
||||
|
||||
**Target Audience**: Expert SuperClaude users, system architects, performance engineers, integration specialists
|
||||
**What This Is**: Command combinations and flag patterns that work well for specific technologies
|
||||
**What This Isn't**: Performance optimization or parallel execution (no code runs)
|
||||
|
||||
**Usage Pattern**: Analyze → Integrate → Optimize → Validate → Scale
|
||||
**Key Principle**: SuperClaude tells Claude Code WHAT to do and HOW to think about it. Claude Code does the actual work.
|
||||
|
||||
**Key Features**:
|
||||
- Framework-specific integration patterns
|
||||
- Performance optimization recipes
|
||||
- Cross-tool coordination strategies
|
||||
- Advanced troubleshooting workflows
|
||||
- Monitoring and observability patterns
|
||||
## Framework Context Patterns
|
||||
|
||||
## Framework Integration Patterns
|
||||
### React Development Patterns
|
||||
|
||||
### React Ecosystem Integration
|
||||
```bash
|
||||
# Modern React development with full ecosystem
|
||||
/sc:implement "React 18 application with Next.js, TypeScript, and modern tooling" --c7 --orchestrate
|
||||
# React development with appropriate context
|
||||
/sc:implement "React 18 application with TypeScript" --c7
|
||||
# Context7 MCP can provide React documentation if available
|
||||
# Magic MCP can help with UI components if configured
|
||||
|
||||
# Comprehensive React setup:
|
||||
# - Next.js 14 with App Router and Server Components
|
||||
# - TypeScript with strict configuration
|
||||
# - Tailwind CSS with design system integration
|
||||
# - Zustand or Redux Toolkit for state management
|
||||
# - React Hook Form with Zod validation
|
||||
# - React Query for server state management
|
||||
# What Actually Happens:
|
||||
# 1. Claude reads implement.md for implementation patterns
|
||||
# 2. --c7 flag suggests using Context7 MCP for documentation
|
||||
# 3. Claude generates React code based on these contexts
|
||||
|
||||
# Expected integration:
|
||||
# - Context7 MCP: Official React patterns and Next.js documentation
|
||||
# - Magic MCP: Modern UI components with accessibility
|
||||
# - Quality validation: ESLint, Prettier, TypeScript strict mode
|
||||
# ✅ Verified: SuperClaude v4.0
|
||||
# Component development pattern
|
||||
@agents-frontend-architect "design component architecture"
|
||||
/sc:implement "reusable component library"
|
||||
|
||||
# Advanced React patterns
|
||||
/sc:implement "React performance optimization with Suspense, lazy loading, and memoization" --focus performance --c7
|
||||
# Expected: Performance-optimized React with modern patterns
|
||||
|
||||
# React testing integration
|
||||
/sc:test --focus react --type comprehensive --orchestrate
|
||||
# Expected: React Testing Library, Jest, Playwright E2E tests
|
||||
# ✅ Verified: SuperClaude v4.0
|
||||
# Testing pattern for React
|
||||
/sc:test --focus react
|
||||
# Claude will suggest React Testing Library patterns
|
||||
```
|
||||
|
||||
### Node.js Backend Integration
|
||||
### Node.js Backend Patterns
|
||||
|
||||
```bash
|
||||
# Enterprise Node.js backend with comprehensive tooling
|
||||
/sc:implement "Node.js TypeScript backend with Express, Prisma, and monitoring" --orchestrate --c7
|
||||
# Node.js backend development patterns
|
||||
/sc:implement "Express.js API with TypeScript" --c7
|
||||
# Claude will create Express API following Node.js patterns
|
||||
|
||||
# Full backend integration:
|
||||
# - Express.js with TypeScript and middleware
|
||||
# - Prisma ORM with PostgreSQL and Redis
|
||||
# - JWT authentication with refresh tokens
|
||||
# - Rate limiting, CORS, and security headers
|
||||
# - Structured logging with Winston
|
||||
# - Health checks and metrics collection
|
||||
# - API documentation with OpenAPI/Swagger
|
||||
# What This Means:
|
||||
# - Claude reads context about backend patterns
|
||||
# - Suggests appropriate middleware and structure
|
||||
# - NOT running or optimizing any code
|
||||
|
||||
# Advanced backend patterns
|
||||
/sc:implement "microservices communication with message queues and service discovery" --focus architecture --orchestrate
|
||||
# Expected: RabbitMQ/Redis messaging, service registry, API gateway
|
||||
# Database integration pattern
|
||||
/sc:implement "database models with Prisma"
|
||||
@agents-backend-architect "review database schema"
|
||||
|
||||
# Backend testing and validation
|
||||
/sc:test --focus api --type integration --security --orchestrate
|
||||
# Expected: API testing, security validation, load testing
|
||||
# ✅ Verified: SuperClaude v4.0
|
||||
# API testing pattern
|
||||
/sc:test --focus api
|
||||
# Claude suggests API testing approaches
|
||||
```
|
||||
|
||||
### Python Ecosystem Integration
|
||||
### Python Development Patterns
|
||||
|
||||
```bash
|
||||
# Modern Python web development
|
||||
/sc:implement "FastAPI application with async PostgreSQL, Redis, and background tasks" --c7 --orchestrate
|
||||
# Python web development
|
||||
/sc:implement "FastAPI application" --c7
|
||||
@agents-python-expert "review implementation"
|
||||
|
||||
# Python web integration:
|
||||
# - FastAPI with async/await patterns
|
||||
# - SQLAlchemy with async support
|
||||
# - Celery for background tasks
|
||||
# - Redis for caching and sessions
|
||||
# - Pydantic for data validation
|
||||
# - Alembic for database migrations
|
||||
# - Pytest with async support
|
||||
# What Happens:
|
||||
# - Claude uses Python-specific context
|
||||
# - Follows FastAPI patterns from context
|
||||
# - Generates code (doesn't run it)
|
||||
|
||||
# Data science integration
|
||||
/sc:implement "Python data pipeline with pandas, scikit-learn, and visualization" --focus performance
|
||||
# Expected: Optimized data processing with performance monitoring
|
||||
# Data science context
|
||||
/sc:implement "data analysis pipeline"
|
||||
@agents-python-expert "optimize pandas operations"
|
||||
# Claude provides optimization suggestions (not actual optimization)
|
||||
|
||||
# Python testing and quality
|
||||
/sc:test --focus python --type comprehensive && /sc:analyze . --focus quality
|
||||
# Expected: Pytest, mypy, black, comprehensive quality assessment
|
||||
# ✅ Verified: SuperClaude v4.0
|
||||
# Testing patterns
|
||||
/sc:test --focus python
|
||||
# Claude suggests pytest patterns
|
||||
```
|
||||
|
||||
### DevOps and Infrastructure Integration
|
||||
### Full-Stack Development Patterns
|
||||
|
||||
```bash
|
||||
# Comprehensive DevOps pipeline
|
||||
/sc:implement "DevOps pipeline with Docker, Kubernetes, and monitoring" --orchestrate --all-mcp
|
||||
# Full-stack application pattern
|
||||
/sc:brainstorm "full-stack application architecture"
|
||||
@agents-system-architect "design system components"
|
||||
|
||||
# DevOps integration:
|
||||
# - Docker multi-stage builds with optimization
|
||||
# - Kubernetes deployment with ingress and services
|
||||
# - Helm charts for application management
|
||||
# - GitHub Actions or GitLab CI/CD
|
||||
# - Prometheus and Grafana monitoring
|
||||
# - ELK stack for logging
|
||||
# - HashiCorp Vault for secrets management
|
||||
# Frontend implementation
|
||||
/sc:implement "React frontend with TypeScript"
|
||||
@agents-frontend-architect "review component structure"
|
||||
|
||||
# Infrastructure as Code
|
||||
/sc:implement "Terraform infrastructure with AWS/GCP/Azure integration" --focus infrastructure
|
||||
# Expected: Complete IaC with provider-specific optimizations
|
||||
# Backend implementation
|
||||
/sc:implement "Node.js API with authentication"
|
||||
@agents-backend-architect "review API design"
|
||||
|
||||
# Security and compliance integration
|
||||
/sc:implement "DevSecOps pipeline with security scanning and compliance" --focus security --orchestrate
|
||||
# Expected: Security scanning, compliance validation, automated remediation
|
||||
# Integration
|
||||
/sc:implement "connect frontend to backend API"
|
||||
```
|
||||
|
||||
## Cross-Tool Coordination Strategies
|
||||
## Tool Coordination Patterns
|
||||
|
||||
### Using MCP Servers Effectively
|
||||
|
||||
### Full-Stack Development Coordination
|
||||
```bash
|
||||
# Coordinated full-stack development with optimal tool selection
|
||||
/sc:spawn "full-stack e-commerce platform" --orchestrate --all-mcp
|
||||
# Context7 for documentation
|
||||
/sc:explain "React hooks" --c7
|
||||
# If Context7 is configured, it may fetch React docs
|
||||
|
||||
# Tool coordination matrix:
|
||||
# Frontend: Magic MCP + Context7 (React patterns)
|
||||
# Backend: Context7 (Node.js patterns) + Serena (project memory)
|
||||
# Database: Sequential (optimization analysis) + performance patterns
|
||||
# Testing: Playwright MCP (E2E) + quality automation
|
||||
# Deployment: DevOps patterns + monitoring integration
|
||||
# Sequential for complex reasoning
|
||||
/sc:troubleshoot "complex bug" --seq
|
||||
# Sequential MCP helps with structured problem-solving
|
||||
|
||||
# Coordination benefits:
|
||||
# - Parallel development with dependency awareness
|
||||
# - Consistent patterns across stack layers
|
||||
# - Integrated testing and validation
|
||||
# - Performance optimization across all layers
|
||||
# - Security validation throughout development
|
||||
# Magic for UI components
|
||||
/sc:implement "UI components" --magic
|
||||
# Magic MCP can help generate modern UI patterns
|
||||
|
||||
# No MCP for simple tasks
|
||||
/sc:implement "utility function" --no-mcp
|
||||
# Uses only Claude's built-in knowledge
|
||||
```
|
||||
|
||||
### API-First Development Pattern
|
||||
### Agent and Command Combinations
|
||||
|
||||
```bash
|
||||
# API-first development with consumer-driven contracts
|
||||
/sc:implement "API-first development with OpenAPI specification and contract testing" --c7 --orchestrate
|
||||
# Security-focused development
|
||||
@agents-security "review authentication requirements"
|
||||
/sc:implement "secure authentication system"
|
||||
/sc:analyze --focus security
|
||||
|
||||
# API-first coordination:
|
||||
# 1. OpenAPI specification design with stakeholder input
|
||||
# 2. Mock server generation for frontend development
|
||||
# 3. Contract testing with Pact or similar tools
|
||||
# 4. Backend implementation with specification compliance
|
||||
# 5. Frontend integration with generated TypeScript types
|
||||
# 6. E2E testing with real API and mock fallbacks
|
||||
# Quality-focused workflow
|
||||
/sc:implement "new feature"
|
||||
@agents-quality-engineer "review code quality"
|
||||
/sc:test --focus quality
|
||||
|
||||
# Tool integration:
|
||||
# - Context7: OpenAPI and REST patterns
|
||||
# - Sequential: API design analysis and optimization
|
||||
# - Playwright: API testing and validation
|
||||
# - Magic: Frontend components with API integration
|
||||
# Architecture-focused approach
|
||||
@agents-system-architect "design microservices"
|
||||
/sc:design "service boundaries"
|
||||
/sc:implement "service communication"
|
||||
```
|
||||
|
||||
### Microservices Coordination Pattern
|
||||
## Common Integration Patterns
|
||||
|
||||
### API Development Pattern
|
||||
|
||||
```bash
|
||||
# Microservices development with service mesh integration
|
||||
/sc:implement "microservices platform with service mesh and observability" --orchestrate --ultrathink
|
||||
# Step 1: Design
|
||||
/sc:design "REST API structure"
|
||||
|
||||
# Microservices coordination:
|
||||
# Service 1: User management (authentication, profiles)
|
||||
# Service 2: Product catalog (search, recommendations)
|
||||
# Service 3: Order processing (cart, checkout, payments)
|
||||
# Service 4: Notification service (email, SMS, push)
|
||||
# Service 5: Analytics service (events, reporting)
|
||||
# Step 2: Implementation
|
||||
/sc:implement "API endpoints with validation"
|
||||
|
||||
# Integration layers:
|
||||
# - API Gateway (Kong, Ambassador, or cloud-native)
|
||||
# - Service Mesh (Istio, Linkerd, or Consul Connect)
|
||||
# - Message Broker (RabbitMQ, Apache Kafka, or cloud messaging)
|
||||
# - Distributed Tracing (Jaeger, Zipkin, or cloud tracing)
|
||||
# - Configuration Management (Consul, etcd, or cloud config)
|
||||
# Step 3: Documentation
|
||||
/sc:document --type api
|
||||
|
||||
# Coordination benefits:
|
||||
# - Independent service development and deployment
|
||||
# - Unified observability and monitoring
|
||||
# - Consistent security and authentication
|
||||
# - Automated service discovery and load balancing
|
||||
# Step 4: Testing
|
||||
/sc:test --focus api
|
||||
```
|
||||
|
||||
## Performance Optimization Recipes
|
||||
### Database Integration Pattern
|
||||
|
||||
### Frontend Performance Optimization
|
||||
```bash
|
||||
# Comprehensive frontend performance optimization
|
||||
/sc:analyze frontend/ --focus performance --ultrathink --all-mcp
|
||||
# Schema design
|
||||
@agents-backend-architect "design database schema"
|
||||
|
||||
# Performance analysis areas:
|
||||
# - Bundle analysis and tree shaking optimization
|
||||
# - Image optimization and lazy loading strategies
|
||||
# - Code splitting and dynamic imports
|
||||
# - Service worker and caching strategies
|
||||
# - Core Web Vitals and performance metrics
|
||||
# - Memory leak detection and prevention
|
||||
# Model implementation
|
||||
/sc:implement "database models"
|
||||
|
||||
/sc:implement "frontend performance optimizations" --focus performance --orchestrate
|
||||
# Expected optimizations:
|
||||
# - Webpack/Vite bundle optimization
|
||||
# - React performance patterns (memoization, lazy loading)
|
||||
# - Image optimization with next/image or similar
|
||||
# - Service worker for caching and offline support
|
||||
# - Performance monitoring with Real User Monitoring (RUM)
|
||||
# Migration creation
|
||||
/sc:implement "database migrations"
|
||||
|
||||
# Performance validation
|
||||
/sc:test --focus performance --type frontend --orchestrate
|
||||
# Expected: Lighthouse audits, Core Web Vitals measurement, load testing
|
||||
# ✅ Verified: SuperClaude v4.0
|
||||
# Query optimization suggestions
|
||||
@agents-backend-architect "suggest query optimizations"
|
||||
# Note: Claude suggests optimizations, doesn't actually optimize
|
||||
```
|
||||
|
||||
### Backend Performance Optimization
|
||||
### Testing Strategy Pattern
|
||||
|
||||
```bash
|
||||
# Database and API performance optimization
|
||||
/sc:analyze backend/ --focus performance --think-hard --serena
|
||||
# Test planning
|
||||
/sc:design "testing strategy"
|
||||
|
||||
# Backend performance areas:
|
||||
# - Database query optimization and indexing
|
||||
# - API endpoint performance and caching
|
||||
# - Memory usage and garbage collection
|
||||
# - Concurrency patterns and async optimization
|
||||
# - Connection pooling and resource management
|
||||
# Unit tests
|
||||
/sc:test --type unit
|
||||
|
||||
/sc:implement "backend performance optimizations" --focus performance --orchestrate
|
||||
# Expected optimizations:
|
||||
# - Database query optimization with indexing
|
||||
# - Redis caching for frequently accessed data
|
||||
# - Connection pooling for database and external services
|
||||
# - API response compression and optimization
|
||||
# - Background job processing with queues
|
||||
# Integration tests
|
||||
/sc:test --type integration
|
||||
|
||||
# Performance monitoring integration
|
||||
/sc:implement "APM integration with New Relic, DataDog, or similar" --focus performance
|
||||
# Expected: Application Performance Monitoring with alerting and optimization insights
|
||||
# E2E test suggestions
|
||||
/sc:test --type e2e
|
||||
# Claude provides test code, not execution
|
||||
```
|
||||
|
||||
### Database Performance Optimization
|
||||
## Technology-Specific Patterns
|
||||
|
||||
### React + TypeScript Pattern
|
||||
|
||||
```bash
|
||||
# Comprehensive database performance optimization
|
||||
/sc:analyze database/ --focus performance --ultrathink
|
||||
# Project setup guidance
|
||||
/sc:implement "React TypeScript project structure"
|
||||
|
||||
# Database optimization areas:
|
||||
# - Query performance analysis and optimization
|
||||
# - Index strategy and implementation
|
||||
# - Connection pooling and connection management
|
||||
# - Caching strategies (query cache, Redis, Memcached)
|
||||
# - Database scaling patterns (read replicas, sharding)
|
||||
# Component development
|
||||
/sc:implement "TypeScript React components with props validation"
|
||||
|
||||
/sc:implement "database performance optimizations" --focus performance --orchestrate
|
||||
# Expected optimizations:
|
||||
# - Query optimization with EXPLAIN analysis
|
||||
# - Strategic indexing for common query patterns
|
||||
# - Connection pooling with PgBouncer or similar
|
||||
# - Redis caching for frequently accessed data
|
||||
# - Read replica setup for read-heavy workloads
|
||||
# State management
|
||||
@agents-frontend-architect "recommend state management approach"
|
||||
/sc:implement "state management with Zustand/Redux"
|
||||
|
||||
# Database monitoring and alerting
|
||||
/sc:implement "database monitoring with Prometheus and custom metrics"
|
||||
# Expected: Database metrics collection, alerting, and optimization recommendations
|
||||
# Testing
|
||||
/sc:test --focus react --type unit
|
||||
```
|
||||
|
||||
## Advanced Troubleshooting Workflows
|
||||
### Python FastAPI Pattern
|
||||
|
||||
### Distributed System Debugging
|
||||
```bash
|
||||
# Complex distributed system troubleshooting
|
||||
/sc:troubleshoot "intermittent service failures in microservices architecture" --think-hard --all-mcp
|
||||
# API structure
|
||||
/sc:implement "FastAPI project structure"
|
||||
|
||||
# Systematic debugging approach:
|
||||
# 1. Service dependency mapping and health analysis
|
||||
# 2. Distributed tracing analysis for request flows
|
||||
# 3. Log aggregation and correlation across services
|
||||
# 4. Network latency and service communication analysis
|
||||
# 5. Resource utilization and scaling behavior analysis
|
||||
# Endpoint development
|
||||
@agents-python-expert "implement async endpoints"
|
||||
|
||||
# Tool coordination for debugging:
|
||||
# - Sequential MCP: Systematic hypothesis testing and analysis
|
||||
# - Context7 MCP: Best practices for distributed system debugging
|
||||
# - Serena MCP: Historical incident data and patterns
|
||||
# - Playwright MCP: E2E testing to reproduce issues
|
||||
# Database integration
|
||||
/sc:implement "SQLAlchemy models with Alembic"
|
||||
|
||||
# Expected debugging output:
|
||||
# - Root cause analysis with evidence and hypothesis testing
|
||||
# - Service communication flow analysis with bottleneck identification
|
||||
# - Monitoring and alerting improvements
|
||||
# - Prevention strategies for similar issues
|
||||
# Testing
|
||||
/sc:test --focus python --type integration
|
||||
```
|
||||
|
||||
### Performance Regression Analysis
|
||||
### Node.js Microservices Pattern
|
||||
|
||||
```bash
|
||||
# Performance regression troubleshooting and analysis
|
||||
/sc:troubleshoot "application performance degraded 50% after deployment" --focus performance --ultrathink
|
||||
# Architecture design
|
||||
@agents-system-architect "design microservices architecture"
|
||||
|
||||
# Performance regression analysis:
|
||||
# 1. Deployment change analysis and impact assessment
|
||||
# 2. Performance metric comparison (before/after deployment)
|
||||
# 3. Resource utilization pattern analysis
|
||||
# 4. Database performance and query analysis
|
||||
# 5. External dependency performance impact
|
||||
# Service implementation
|
||||
/sc:implement "user service with Express"
|
||||
/sc:implement "auth service with JWT"
|
||||
|
||||
# Systematic performance debugging:
|
||||
# - Code diff analysis for performance-impacting changes
|
||||
# - Database query performance comparison
|
||||
# - Memory usage and garbage collection analysis
|
||||
# - Network latency and external service impact
|
||||
# - Caching effectiveness and hit rate analysis
|
||||
# Inter-service communication
|
||||
/sc:implement "service communication patterns"
|
||||
|
||||
/sc:implement "performance regression fixes and prevention" --focus performance --orchestrate
|
||||
# Expected: Performance fixes, monitoring improvements, regression prevention
|
||||
# Testing approach
|
||||
/sc:test --focus microservices
|
||||
```
|
||||
|
||||
### Security Incident Response
|
||||
## Troubleshooting Patterns
|
||||
|
||||
### Debugging Workflow
|
||||
|
||||
```bash
|
||||
# Security incident analysis and response
|
||||
/sc:troubleshoot "suspected security breach with unauthorized access" --focus security --ultrathink --all-mcp
|
||||
# Problem analysis
|
||||
/sc:troubleshoot "describe the issue"
|
||||
|
||||
# Security incident response workflow:
|
||||
# 1. Immediate threat assessment and containment
|
||||
# 2. Access log analysis and suspicious activity detection
|
||||
# 3. System integrity verification and compromise assessment
|
||||
# 4. Data exposure analysis and impact assessment
|
||||
# 5. Vulnerability identification and remediation planning
|
||||
# Root cause investigation
|
||||
@agents-root-cause-analyst "analyze symptoms"
|
||||
|
||||
# Security analysis coordination:
|
||||
# - Sequential MCP: Systematic security investigation methodology
|
||||
# - Context7 MCP: Security incident response best practices
|
||||
# - Serena MCP: Historical security data and patterns
|
||||
# - Security pattern analysis and threat modeling
|
||||
# Solution implementation
|
||||
/sc:implement "fix based on analysis"
|
||||
|
||||
# Expected security response:
|
||||
# - Incident containment and immediate security measures
|
||||
# - Comprehensive security assessment and vulnerability analysis
|
||||
# - Remediation plan with priority ranking
|
||||
# - Security monitoring and detection improvements
|
||||
# - Compliance reporting and documentation
|
||||
# Verification
|
||||
/sc:test --validate
|
||||
```
|
||||
|
||||
## Monitoring and Observability Patterns
|
||||
### Code Review Pattern
|
||||
|
||||
### Comprehensive Observability Stack
|
||||
```bash
|
||||
# Full observability implementation with best practices
|
||||
/sc:implement "comprehensive observability with metrics, logs, traces, and alerting" --orchestrate --all-mcp
|
||||
# Code analysis
|
||||
/sc:analyze code/ --focus quality
|
||||
|
||||
# Observability stack components:
|
||||
# Metrics: Prometheus + Grafana with custom dashboards
|
||||
# Logging: ELK Stack (Elasticsearch, Logstash, Kibana) or similar
|
||||
# Tracing: Jaeger or Zipkin with distributed tracing
|
||||
# Alerting: AlertManager with PagerDuty/Slack integration
|
||||
# APM: Application Performance Monitoring with detailed insights
|
||||
# Security review
|
||||
@agents-security "review for vulnerabilities"
|
||||
|
||||
# Integration patterns:
|
||||
# - Service mesh integration for automatic observability
|
||||
# - Custom metrics for business logic and user experience
|
||||
# - Log correlation across microservices
|
||||
# - Distributed tracing for request flow analysis
|
||||
# - SLA/SLO monitoring with error budgets
|
||||
# Performance review
|
||||
@agents-performance-engineer "suggest improvements"
|
||||
# Note: Suggestions only, no actual performance measurement
|
||||
|
||||
# Advanced observability features:
|
||||
# - Anomaly detection with machine learning
|
||||
# - Predictive alerting based on trend analysis
|
||||
# - Cost optimization monitoring for cloud resources
|
||||
# - Security monitoring integration with SIEM tools
|
||||
# Implementation of improvements
|
||||
/sc:improve code/ --fix
|
||||
```
|
||||
|
||||
### Performance Monitoring and Optimization
|
||||
```bash
|
||||
# Advanced performance monitoring with optimization automation
|
||||
/sc:implement "performance monitoring with automated optimization recommendations" --focus performance --orchestrate
|
||||
## Important Clarifications
|
||||
|
||||
# Performance monitoring components:
|
||||
# Real User Monitoring (RUM): Frontend performance metrics
|
||||
# Synthetic Monitoring: Proactive performance testing
|
||||
# Infrastructure Monitoring: System resource utilization
|
||||
# Application Monitoring: Code-level performance insights
|
||||
# Database Monitoring: Query performance and optimization
|
||||
### What These Patterns DO
|
||||
|
||||
# Automated optimization features:
|
||||
# - Performance regression detection and alerting
|
||||
# - Automatic scaling based on performance metrics
|
||||
# - Query optimization recommendations
|
||||
# - Cache warming and optimization strategies
|
||||
# - Resource allocation optimization
|
||||
```
|
||||
- ✅ Provide structured approaches to development tasks
|
||||
- ✅ Combine commands and agents effectively
|
||||
- ✅ Suggest appropriate tools and frameworks
|
||||
- ✅ Guide Claude to generate better code
|
||||
|
||||
### Business Intelligence and Analytics Integration
|
||||
```bash
|
||||
# Business intelligence integration with development metrics
|
||||
/sc:implement "development metrics and business intelligence integration" --focus analytics --orchestrate
|
||||
### What These Patterns DON'T DO
|
||||
|
||||
# Development metrics integration:
|
||||
# - Code quality metrics (test coverage, code complexity)
|
||||
# - Deployment frequency and lead time metrics
|
||||
# - Error rates and customer impact metrics
|
||||
# - Feature usage and adoption analytics
|
||||
# - Performance impact on business metrics
|
||||
- ❌ Execute code or measure performance
|
||||
- ❌ Run tests or deploy applications
|
||||
- ❌ Optimize actual execution speed
|
||||
- ❌ Provide real monitoring or metrics
|
||||
- ❌ Coordinate parallel processes (everything is sequential text)
|
||||
|
||||
# Business intelligence components:
|
||||
# - Data warehouse integration for development metrics
|
||||
# - Real-time dashboards for stakeholder visibility
|
||||
# - Automated reporting for development and business teams
|
||||
# - Predictive analytics for development planning
|
||||
# - Cost optimization insights for development resources
|
||||
```
|
||||
## Best Practices
|
||||
|
||||
## Cross-Platform Integration Patterns
|
||||
### Effective Pattern Usage
|
||||
|
||||
### Mobile and Web Integration
|
||||
```bash
|
||||
# Unified mobile and web development with shared components
|
||||
/sc:implement "cross-platform application with React Native and Next.js" --orchestrate --c7
|
||||
1. **Start with context**: Use `/sc:load` to establish project understanding
|
||||
2. **Layer expertise**: Combine general commands with specific agents
|
||||
3. **Focus appropriately**: Use `--focus` flags for targeted results
|
||||
4. **Manage scope**: Work on specific modules rather than entire codebases
|
||||
5. **Document decisions**: Use `/sc:save` to create summaries
|
||||
|
||||
# Cross-platform integration:
|
||||
# Shared Components: React Native Web for component reuse
|
||||
# Shared State: Redux or Zustand with platform-specific adapters
|
||||
# Shared API: GraphQL or REST API with unified data layer
|
||||
# Shared Authentication: OAuth with platform-specific implementations
|
||||
# Shared Testing: Jest and Detox/Playwright for comprehensive testing
|
||||
### Pattern Selection
|
||||
|
||||
# Platform-specific optimizations:
|
||||
# - Mobile: Performance optimization for device constraints
|
||||
# - Web: SEO optimization and progressive web app features
|
||||
# - Desktop: Electron integration for desktop applications
|
||||
# - Native: Platform-specific features and integrations
|
||||
```
|
||||
- **Simple tasks**: Use basic commands without MCP
|
||||
- **Complex tasks**: Add appropriate agents and MCP servers
|
||||
- **Security-critical**: Always include `@agents-security`
|
||||
- **UI development**: Consider `--magic` flag if configured
|
||||
- **Documentation needs**: Use `--c7` for framework docs
|
||||
|
||||
### Cloud Provider Integration
|
||||
```bash
|
||||
# Multi-cloud strategy with provider-agnostic patterns
|
||||
/sc:implement "multi-cloud application with AWS, GCP, and Azure support" --focus infrastructure --orchestrate
|
||||
## Summary
|
||||
|
||||
# Multi-cloud integration patterns:
|
||||
# Container Orchestration: Kubernetes for consistent deployment
|
||||
# Service Mesh: Istio for consistent networking and security
|
||||
# Database: Cloud-agnostic database with multi-region support
|
||||
# Monitoring: Unified observability across cloud providers
|
||||
# CI/CD: Cloud-agnostic pipeline with provider-specific deployments
|
||||
|
||||
# Cloud-specific optimizations:
|
||||
# - AWS: Lambda, RDS, ElastiCache optimizations
|
||||
# - GCP: Cloud Functions, Cloud SQL, Memorystore optimizations
|
||||
# - Azure: Functions, SQL Database, Cache for Redis optimizations
|
||||
# - Hybrid: On-premises integration with cloud resources
|
||||
```
|
||||
|
||||
## Advanced Testing Integration
|
||||
|
||||
### Comprehensive Testing Strategy
|
||||
```bash
|
||||
# Full testing pyramid with all testing types
|
||||
/sc:test --focus comprehensive --type all-layers --orchestrate
|
||||
|
||||
# Testing integration layers:
|
||||
# Unit Tests: Jest, Vitest, or pytest with high coverage
|
||||
# Integration Tests: API testing with real database
|
||||
# Contract Tests: Pact or similar for API contracts
|
||||
# E2E Tests: Playwright or Cypress for user workflows
|
||||
# Performance Tests: k6 or JMeter for load testing
|
||||
# Security Tests: OWASP ZAP or similar for security validation
|
||||
|
||||
# Testing automation and coordination:
|
||||
# - Parallel test execution for faster feedback
|
||||
# - Test environment management and data seeding
|
||||
# - Visual regression testing for UI consistency
|
||||
# - Accessibility testing for compliance validation
|
||||
# - Cross-browser and cross-device testing
|
||||
# ✅ Verified: SuperClaude v4.0
|
||||
```
|
||||
|
||||
### Quality Gates and Automation
|
||||
```bash
|
||||
# Automated quality gates with comprehensive validation
|
||||
/sc:implement "quality gates with automated validation and deployment blocking" --focus quality --orchestrate
|
||||
|
||||
# Quality gate components:
|
||||
# Code Quality: ESLint, SonarQube, CodeClimate integration
|
||||
# Security Scanning: Snyk, Veracode, or similar tools
|
||||
# Performance Testing: Automated performance regression detection
|
||||
# Accessibility Testing: axe-core or similar accessibility validation
|
||||
# Dependency Scanning: Automated vulnerability detection
|
||||
|
||||
# Quality automation features:
|
||||
# - Automated code review with quality suggestions
|
||||
# - Deployment blocking for quality threshold violations
|
||||
# - Quality metrics trending and improvement tracking
|
||||
# - Technical debt monitoring and reduction planning
|
||||
# - Compliance validation for regulatory requirements
|
||||
```
|
||||
|
||||
## Expert Optimization Strategies
|
||||
|
||||
### Resource Optimization and Cost Management
|
||||
```bash
|
||||
# Comprehensive resource optimization with cost analysis
|
||||
/sc:analyze . --focus performance --ultrathink --all-mcp && /sc:implement "resource optimization with cost analysis" --focus performance
|
||||
|
||||
# Resource optimization areas:
|
||||
# Compute Resources: CPU and memory optimization
|
||||
# Storage Resources: Database and file storage optimization
|
||||
# Network Resources: CDN and bandwidth optimization
|
||||
# Cloud Resources: Instance sizing and auto-scaling optimization
|
||||
# Development Resources: CI/CD and development environment optimization
|
||||
|
||||
# Cost optimization strategies:
|
||||
# - Reserved instances and spot instances for cloud resources
|
||||
# - Database optimization for storage and compute efficiency
|
||||
# - CDN optimization for global content delivery
|
||||
# - Monitoring and alerting for cost anomalies
|
||||
# - Development environment automation for cost reduction
|
||||
```
|
||||
|
||||
### Scalability and High Availability Patterns
|
||||
```bash
|
||||
# Enterprise scalability and high availability implementation
|
||||
/sc:implement "scalability and high availability with disaster recovery" --focus architecture --orchestrate
|
||||
|
||||
# Scalability patterns:
|
||||
# Horizontal Scaling: Load balancing and auto-scaling
|
||||
# Database Scaling: Read replicas, sharding, and caching
|
||||
# Microservices Scaling: Independent service scaling
|
||||
# CDN Integration: Global content delivery and edge caching
|
||||
# Queue-Based Processing: Asynchronous processing for scalability
|
||||
|
||||
# High availability patterns:
|
||||
# Multi-Region Deployment: Geographic redundancy
|
||||
# Database High Availability: Master-slave replication and failover
|
||||
# Load Balancer Redundancy: Health checks and failover
|
||||
# Disaster Recovery: Backup and restore procedures
|
||||
# Monitoring and Alerting: Proactive issue detection and response
|
||||
```
|
||||
|
||||
## Next Steps to Framework Mastery
|
||||
|
||||
### Ready for Expert Contribution?
|
||||
- Mastered framework integration patterns
|
||||
- Experienced with cross-tool coordination
|
||||
- Advanced troubleshooting and optimization skills
|
||||
- Understanding of enterprise-scale architecture
|
||||
|
||||
### Framework Development:
|
||||
- **Contributing Code**: Framework development and enhancement
|
||||
- **Custom MCP Servers**: Developing specialized integration tools
|
||||
- **Community Leadership**: Mentoring and knowledge sharing
|
||||
|
||||
### Success Indicators:
|
||||
- Can integrate SuperClaude with any development framework
|
||||
- Masters performance optimization across all layers
|
||||
- Develops custom integration patterns for specific domains
|
||||
- Contributes to SuperClaude framework development
|
||||
|
||||
---
|
||||
|
||||
**Remember**: Integration mastery comes from understanding both SuperClaude capabilities and target framework patterns. Focus on systematic integration, performance optimization, and comprehensive validation for production-ready results.
|
||||
These integration patterns show how to combine SuperClaude commands, agents, and flags effectively for different development scenarios. Remember that all patterns are about providing better context to Claude Code - the actual code generation, not execution, is what Claude does based on these contexts.
|
||||
Reference in New Issue
Block a user