chore: import upstream snapshot with attribution
Component Security Validation / Security Audit (push) Has been cancelled
Deploy to Cloudflare Pages / deploy (push) Has been cancelled

This commit is contained in:
wehub-resource-sync
2026-07-13 12:38:58 +08:00
commit bb5c75ce05
8824 changed files with 1946442 additions and 0 deletions
@@ -0,0 +1,34 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [migration-name] | --create-table | --add-column | --alter-table
description: Create and manage database migrations with proper versioning and rollback support
---
# Create Database Migrations
Create and manage database migrations: **$ARGUMENTS**
## Current Database State
- ORM detection: @package.json or @requirements.txt (detect Sequelize, Prisma, Alembic, etc.)
- Migration files: !`find . -name "*migration*" -type f | head -5`
- Database config: @config/database.* or @prisma/schema.prisma
- Current schema: !`ls migrations/ 2>/dev/null | wc -l` migrations found
## Task
Create comprehensive database migrations with proper versioning and rollback capabilities:
**Migration Types**: Use $ARGUMENTS to specify table creation, column addition, table alteration, or data migration
**Migration Framework**:
1. **Migration Planning** - Analyze schema changes, dependencies, and data impact
2. **Migration Generation** - Create timestamped migration files with up/down methods
3. **Schema Updates** - Table creation, column modifications, index management
4. **Data Migrations** - Safe data transformations and backfills
5. **Rollback Strategy** - Implement reliable rollback procedures for each change
6. **Testing** - Validate migrations in development and staging environments
**Best Practices**: Follow database-specific conventions, maintain referential integrity, handle large datasets efficiently, and ensure zero-downtime deployments.
**Output**: Production-ready migration files with comprehensive rollback support, proper indexing, and data safety measures.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [schema-type] | --relational | --nosql | --hybrid | --normalize
description: Design optimized database schemas with proper relationships, constraints, and performance considerations
---
# Design Database Schema
Design optimized database schemas with comprehensive data modeling: **$ARGUMENTS**
## Current Project Context
- Application type: Based on $ARGUMENTS or codebase analysis
- Data requirements: @requirements/ or project documentation
- Existing schema: @prisma/schema.prisma or @migrations/ or database dumps
- Performance needs: Expected scale, query patterns, and data volume
## Task
Design comprehensive database schema with optimal structure and performance:
**Schema Type**: Use $ARGUMENTS to specify relational, NoSQL, hybrid approach, or normalization level
**Design Framework**:
1. **Requirements Analysis** - Business entities, relationships, data flow, and access patterns
2. **Entity Modeling** - Tables/collections, attributes, primary/foreign keys, constraints
3. **Relationship Design** - One-to-one, one-to-many, many-to-many associations
4. **Normalization Strategy** - Data consistency vs performance trade-offs
5. **Performance Optimization** - Indexing strategy, query optimization, partitioning
6. **Security Design** - Access control, data encryption, audit trails
**Advanced Patterns**: Implement temporal data, soft deletes, JSONB fields, full-text search, audit logging, and scalability patterns.
**Validation**: Ensure referential integrity, data consistency, query performance, and future extensibility.
**Output**: Complete schema design with DDL scripts, ER diagrams, performance analysis, and migration strategy.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [api-version] | --v1 | --v2 | --graphql-hybrid | --openapi
description: Design RESTful API architecture with comprehensive endpoints, authentication, and documentation
---
# Design REST API
Design comprehensive RESTful API architecture: **$ARGUMENTS**
## Current Application State
- Framework detection: @package.json or @requirements.txt (Express, FastAPI, Spring Boot, etc.)
- Existing API: !`grep -r "route\|endpoint\|@app\\.route" src/ 2>/dev/null | wc -l` routes found
- Authentication: !`grep -r "auth\|jwt\|session" src/ 2>/dev/null | wc -l` auth components
- Documentation: @swagger.yaml or @openapi.json (if exists)
## Task
Design complete RESTful API with industry best practices and comprehensive functionality:
**API Version**: Use $ARGUMENTS to specify API version, GraphQL hybrid approach, or OpenAPI specification
**API Architecture**:
1. **Resource Design** - RESTful endpoints, HTTP methods, URL structure, resource relationships
2. **Request/Response Models** - Data validation, serialization, error handling, status codes
3. **Authentication & Authorization** - JWT, OAuth, RBAC, API keys, rate limiting
4. **API Documentation** - OpenAPI/Swagger specs, interactive documentation, code examples
5. **Versioning Strategy** - URL, header, or content-type based versioning
6. **Performance & Security** - Caching, pagination, CORS, input validation, SQL injection prevention
**Advanced Features**: Real-time capabilities, file uploads, batch operations, webhooks, and monitoring integration.
**Standards Compliance**: Follow REST principles, HTTP specifications, and API design best practices.
**Output**: Complete API specification with endpoints, authentication, validation, documentation, and client SDKs.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [schema-approach] | --schema-first | --code-first | --federation
description: Implement GraphQL API with comprehensive schema, resolvers, and real-time subscriptions
---
# Implement GraphQL API
Implement comprehensive GraphQL API with modern best practices: **$ARGUMENTS**
## Current Application Context
- Framework: @package.json or @requirements.txt (detect Apollo, GraphQL Yoga, etc.)
- Existing API: !`find . -name "*.graphql" -o -name "*schema*" -o -name "*resolver*" | wc -l`
- Database integration: @prisma/schema.prisma or database connection configs
- Authentication: !`grep -r "auth\|jwt\|context" src/ 2>/dev/null | wc -l`
## Task
Build production-ready GraphQL API with comprehensive functionality and performance optimization:
**Schema Approach**: Use $ARGUMENTS to specify schema-first, code-first, or federation architecture
**GraphQL Implementation**:
1. **Schema Design** - Type definitions, queries, mutations, subscriptions, custom scalars
2. **Resolver Architecture** - Data fetching, authentication, authorization, error handling
3. **DataLoader Integration** - N+1 query prevention, batch loading, caching strategies
4. **Real-time Features** - WebSocket subscriptions, live data updates, connection management
5. **Security & Performance** - Query complexity analysis, depth limiting, rate limiting
6. **Development Tools** - GraphQL Playground, introspection, schema stitching
**Advanced Features**: File uploads, federated schemas, Apollo Federation, schema directives, and monitoring.
**Production Readiness**: Implement comprehensive error handling, logging, metrics, and deployment strategies.
**Output**: Complete GraphQL API with optimized resolvers, real-time capabilities, security controls, and developer documentation.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [migration-strategy] | --gradual | --complete | --strict | --incremental
description: Migrate JavaScript project to TypeScript with proper typing and tooling setup
---
# Migrate to TypeScript
Migrate JavaScript project to TypeScript with comprehensive type safety: **$ARGUMENTS**
## Current JavaScript State
- Project structure: @package.json (analyze JS/TS mix and dependencies)
- JavaScript files: !`find . -name "*.js" -not -path "./node_modules/*" | wc -l`
- Existing TypeScript: !`find . -name "*.ts" -not -path "./node_modules/*" | wc -l`
- Build system: @webpack.config.js or @vite.config.js or @rollup.config.js
## Task
Systematically migrate JavaScript codebase to TypeScript with proper typing and tooling:
**Migration Strategy**: Use $ARGUMENTS to specify gradual migration, complete conversion, strict mode, or incremental approach
**Migration Process**:
1. **Environment Setup** - TypeScript installation, tsconfig.json configuration, build tool integration
2. **Type Definitions** - Install @types packages, create custom type declarations, define interfaces
3. **File Migration** - Rename .js to .ts/.tsx, add type annotations, resolve compiler errors
4. **Code Transformation** - Convert classes, functions, and modules with proper typing
5. **Error Resolution** - Fix type mismatches, null/undefined handling, strict mode issues
6. **Testing & Validation** - Update test files, configure type checking, validate type coverage
**Advanced Features**: Generic types, mapped types, conditional types, module augmentation, and strict compiler settings.
**Developer Experience**: Configure IDE integration, debugging, linting rules, and team onboarding.
**Output**: Fully typed TypeScript codebase with strict type checking, comprehensive IntelliSense, and improved developer productivity.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [platform] | --github-actions | --gitlab-ci | --azure-pipelines | --jenkins
description: Setup comprehensive CI/CD pipeline with automated testing, deployment, and monitoring
---
# Setup CI/CD Pipeline
Setup comprehensive CI/CD pipeline with automated workflows and deployments: **$ARGUMENTS**
## Current Repository State
- Version control: !`git remote -v | head -1` (GitHub, GitLab, etc.)
- Existing CI: !`find . -name ".github" -o -name ".gitlab-ci.yml" -o -name "azure-pipelines.yml" | wc -l`
- Test framework: @package.json or testing files detection
- Deployment config: @Dockerfile or deployment manifests
## Task
Implement production-ready CI/CD pipeline with comprehensive automation and best practices:
**Platform Choice**: Use $ARGUMENTS to specify GitHub Actions, GitLab CI, Azure Pipelines, or Jenkins
**Pipeline Architecture**:
1. **Build Automation** - Code compilation, dependency installation, artifact creation
2. **Testing Strategy** - Unit tests, integration tests, e2e tests, code coverage reporting
3. **Quality Gates** - Linting, security scanning, vulnerability assessment, code quality metrics
4. **Deployment Automation** - Staging deployment, production deployment, rollback mechanisms
5. **Environment Management** - Infrastructure provisioning, configuration management, secrets handling
6. **Monitoring Integration** - Performance monitoring, error tracking, deployment notifications
**Advanced Features**: Parallel job execution, matrix builds, deployment strategies (blue-green, canary), and multi-environment support.
**Security & Compliance**: Secure credential management, compliance checks, audit trails, and approval workflows.
**Output**: Complete CI/CD pipeline with automated testing, secure deployments, monitoring integration, and comprehensive documentation.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [environment-type] | --local | --docker | --cloud | --full-stack
description: Setup comprehensive development environment with tools, configurations, and workflows
---
# Setup Development Environment
Setup comprehensive development environment with modern tooling: **$ARGUMENTS**
## Current Environment State
- Operating system: !`uname -s` and architecture detection
- Development tools: !`node --version 2>/dev/null || python --version 2>/dev/null || echo "No runtime detected"`
- Package managers: !`which npm yarn pnpm pip poetry cargo 2>/dev/null | wc -l` managers available
- IDE/Editor: Check for VS Code, IntelliJ, or other development environments
## Task
Configure complete development environment with modern tools and best practices:
**Environment Type**: Use $ARGUMENTS to specify local setup, Docker-based, cloud environment, or full-stack development
**Environment Setup**:
1. **Runtime Installation** - Programming languages, package managers, version managers (nvm, pyenv, rustup)
2. **Development Tools** - IDE configuration, extensions, debuggers, profilers, database clients
3. **Build System** - Compilers, bundlers, task runners, CI/CD tools, testing frameworks
4. **Code Quality** - Linting, formatting, pre-commit hooks, code analysis tools
5. **Environment Configuration** - Environment variables, secrets management, configuration files
6. **Team Synchronization** - Shared configurations, documentation, onboarding guides
**Advanced Features**: Hot reloading, debugging configuration, performance monitoring, container orchestration.
**Automation**: Automated setup scripts, configuration management, team environment synchronization.
**Output**: Complete development environment with documented setup process, team configurations, and troubleshooting guides.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [environment-type] | --development | --production | --microservices | --compose
description: Setup Docker containerization with multi-stage builds and development workflows
---
# Setup Docker Containers
Setup comprehensive Docker containerization for development and production: **$ARGUMENTS**
## Current Project State
- Application type: @package.json or @requirements.txt (detect Node.js, Python, etc.)
- Existing Docker: @Dockerfile or @docker-compose.yml (if exists)
- Dependencies: !`find . -name "package-lock.json" -o -name "poetry.lock" -o -name "Pipfile.lock" | wc -l`
- Services needed: Database, cache, message queue detection from configs
## Task
Implement production-ready Docker containerization with optimized builds and development workflows:
**Environment Type**: Use $ARGUMENTS to specify development, production, microservices, or Docker Compose setup
**Containerization Strategy**:
1. **Dockerfile Creation** - Multi-stage builds, layer optimization, security best practices
2. **Development Workflow** - Hot reloading, volume mounts, debugging capabilities
3. **Production Optimization** - Image size reduction, security scanning, health checks
4. **Multi-Service Setup** - Docker Compose, service discovery, networking configuration
5. **CI/CD Integration** - Build automation, registry management, deployment pipelines
6. **Monitoring & Logs** - Container observability, log aggregation, resource monitoring
**Security Features**: Non-root users, minimal base images, vulnerability scanning, secrets management.
**Performance Optimization**: Layer caching, build contexts, multi-platform builds, and resource constraints.
**Output**: Complete Docker setup with optimized containers, development workflows, production deployment, and comprehensive documentation.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [language] | --javascript | --typescript | --python | --multi-language
description: Configure comprehensive code formatting tools with consistent style enforcement
---
# Setup Code Formatting
Configure comprehensive code formatting with consistent style enforcement: **$ARGUMENTS**
## Current Project State
- Languages detected: !`find . -name "*.js" -o -name "*.ts" -o -name "*.py" -o -name "*.rs" | head -5`
- Existing formatters: @.prettierrc or @pyproject.toml or @rustfmt.toml
- Package manager: @package.json or @requirements.txt or @Cargo.toml
- IDE config: @.vscode/settings.json or @.editorconfig
## Task
Setup comprehensive code formatting system with automated enforcement and team consistency:
**Language Focus**: Use $ARGUMENTS to configure JavaScript/TypeScript, Python, Rust, or multi-language formatting
**Formatting Setup**:
1. **Tool Installation** - Prettier, Black, rustfmt, language-specific formatters and plugins
2. **Configuration** - Style rules, line length, indentation, quotes, trailing commas, language-specific options
3. **IDE Integration** - Editor extensions, format-on-save, keyboard shortcuts, workspace settings
4. **Automation** - Pre-commit hooks, CI/CD formatting checks, automated formatting scripts
5. **Team Sync** - Shared configurations, style guides, enforcement policies, onboarding documentation
6. **Validation** - Formatting verification, CI integration, team compliance monitoring
**Advanced Features**: Custom rules, framework-specific formatting, performance optimization, incremental formatting.
**Consistency**: Cross-platform compatibility, team standardization, legacy code migration strategies.
**Output**: Complete formatting system with automated enforcement, team configurations, and style compliance monitoring.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [language] | --javascript | --typescript | --python | --multi-language
description: Configure comprehensive code linting and quality analysis tools with automated enforcement
---
# Setup Code Linting
Configure comprehensive code linting and quality analysis: **$ARGUMENTS**
## Current Code Quality State
- Languages detected: !`find . -name "*.js" -o -name "*.ts" -o -name "*.py" -o -name "*.rs" | head -5`
- Existing linters: @.eslintrc.* or @pyproject.toml or @tslint.json
- Package manager: @package.json or @requirements.txt or @Cargo.toml
- Code quality tools: !`which eslint flake8 pylint mypy clippy 2>/dev/null | wc -l`
## Task
Setup comprehensive code linting system with quality analysis and automated enforcement:
**Language Focus**: Use $ARGUMENTS to configure JavaScript/TypeScript ESLint, Python linting, or multi-language quality analysis
**Linting Configuration**:
1. **Tool Installation** - ESLint, Flake8, Pylint, MyPy, Clippy, language-specific linters and plugins
2. **Rule Configuration** - Code style rules, error detection, best practices, security patterns, performance guidelines
3. **IDE Integration** - Real-time linting, error highlighting, quick fixes, workspace settings
4. **Quality Gates** - Pre-commit validation, CI/CD integration, pull request checks, quality metrics
5. **Custom Rules** - Project-specific patterns, architectural constraints, team conventions
6. **Performance** - Incremental linting, caching strategies, parallel execution, optimization
**Advanced Features**: Security linting, accessibility checks, performance analysis, dependency analysis, code complexity metrics.
**Team Standards**: Shared configurations, style guides, review guidelines, onboarding documentation.
**Output**: Complete linting system with automated quality gates, team standards enforcement, and comprehensive code analysis.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [monitoring-type] | --metrics | --logging | --tracing | --full-stack
description: Setup comprehensive monitoring and observability with metrics, logging, tracing, and alerting
---
# Setup Monitoring & Observability
Setup comprehensive monitoring and observability infrastructure: **$ARGUMENTS**
## Current Application State
- Application type: @package.json or @requirements.txt (detect framework and services)
- Existing monitoring: !`find . -name "*prometheus*" -o -name "*grafana*" -o -name "*jaeger*" | wc -l`
- Infrastructure: @docker-compose.yml or @kubernetes/ or cloud platform detection
- Logging setup: !`grep -r "winston\|logging\|console.log" src/ 2>/dev/null | wc -l`
## Task
Implement production-ready monitoring and observability with comprehensive insights:
**Monitoring Type**: Use $ARGUMENTS to focus on metrics, logging, distributed tracing, or complete observability stack
**Observability Stack**:
1. **Metrics Collection** - Application metrics, infrastructure monitoring, business KPIs, custom dashboards
2. **Logging Infrastructure** - Centralized logging, structured logs, log aggregation, search capabilities
3. **Distributed Tracing** - Request tracing, performance analysis, bottleneck identification, service dependencies
4. **Alerting System** - Smart alerts, escalation policies, notification channels, incident management
5. **Performance Monitoring** - APM integration, real-user monitoring, synthetic monitoring, SLA tracking
6. **Analytics & Reports** - Usage analytics, performance trends, capacity planning, business insights
**Platform Integration**: Prometheus, Grafana, ELK Stack, Jaeger, DataDog, New Relic, cloud-native solutions.
**Production Features**: High availability, data retention policies, security controls, cost optimization.
**Output**: Complete observability platform with real-time monitoring, intelligent alerting, and comprehensive analytics dashboards.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [monorepo-tool] | --nx | --lerna | --rush | --turborepo | --yarn-workspaces
description: Configure monorepo project structure with comprehensive workspace management and build orchestration
---
# Setup Monorepo
Configure comprehensive monorepo structure with advanced workspace management: **$ARGUMENTS**
## Current Project State
- Repository structure: !`find . -maxdepth 2 -type d | head -10`
- Package manager: @package.json or existing workspace configuration
- Existing monorepo: @nx.json or @lerna.json or @rush.json or @turbo.json
- Project count: !`find . -name "package.json" -not -path "./node_modules/*" | wc -l`
## Task
Implement production-ready monorepo with advanced workspace management and build orchestration:
**Monorepo Tool**: Use $ARGUMENTS to configure Nx, Lerna, Rush, Turborepo, or Yarn Workspaces
**Monorepo Architecture**:
1. **Workspace Structure** - Directory organization, package architecture, shared libraries, application separation
2. **Dependency Management** - Workspace dependencies, version management, package hoisting, conflict resolution
3. **Build Orchestration** - Task dependencies, parallel builds, incremental compilation, affected package detection
4. **Development Workflow** - Hot reloading, debugging, testing strategies, development server coordination
5. **CI/CD Integration** - Build pipelines, affected project detection, deployment orchestration, artifact management
6. **Tooling Configuration** - Shared configurations, code quality tools, testing frameworks, documentation
**Advanced Features**: Task caching, distributed execution, performance optimization, plugin ecosystem integration.
**Team Productivity**: Developer experience optimization, onboarding automation, maintenance procedures.
**Output**: Complete monorepo setup with optimized build system, comprehensive tooling, and team productivity enhancements.
@@ -0,0 +1,36 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [rate-limit-type] | --api | --authentication | --file-upload | --database
description: Implement comprehensive API rate limiting with advanced algorithms and user-specific policies
---
# Setup Rate Limiting
Implement comprehensive API rate limiting with advanced control mechanisms: **$ARGUMENTS**
## Current API State
- Framework detection: @package.json or @requirements.txt (Express, FastAPI, Spring Boot, etc.)
- Existing rate limiting: !`grep -r "rate.limit\|throttle\|rateLimit" src/ 2>/dev/null | wc -l`
- Redis availability: !`redis-cli ping 2>/dev/null || echo "Redis not available"`
- API endpoints: !`grep -r "route\|endpoint\|@app\\.route" src/ 2>/dev/null | wc -l`
## Task
Implement production-ready rate limiting system with sophisticated algorithms and user policies:
**Rate Limit Type**: Use $ARGUMENTS to focus on API rate limiting, authentication limiting, file upload controls, or database access limiting
**Rate Limiting Architecture**:
1. **Algorithm Implementation** - Token bucket, sliding window, fixed window, leaky bucket algorithms
2. **User Policies** - Tier-based limits, authenticated vs anonymous, user-specific quotas, IP-based controls
3. **Storage Backend** - Redis integration, distributed rate limiting, persistence strategies, failover mechanisms
4. **Endpoint Configuration** - Per-route limits, method-specific rules, dynamic configuration, A/B testing
5. **Monitoring & Analytics** - Usage tracking, abuse detection, performance metrics, alerting systems
6. **Bypass Mechanisms** - Whitelist management, internal request handling, emergency overrides
**Advanced Features**: Adaptive rate limiting, geo-based controls, API key management, quota systems, abuse prevention.
**Production Readiness**: High availability, performance optimization, security controls, comprehensive monitoring.
**Output**: Complete rate limiting system with intelligent policies, comprehensive monitoring, and advanced abuse prevention capabilities.
@@ -0,0 +1,34 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: [update-strategy] | --patch | --minor | --major | --security-only
description: Update and modernize project dependencies with comprehensive testing and compatibility checks
---
# Update Dependencies
Update and modernize project dependencies with safety checks: **$ARGUMENTS**
## Current Dependencies State
- Package manager: @package.json or @requirements.txt or @Cargo.toml (detect package manager)
- Outdated packages: !`npm outdated 2>/dev/null || pip list --outdated 2>/dev/null || echo "Manual check needed"`
- Security issues: !`npm audit --audit-level=moderate 2>/dev/null || pip check 2>/dev/null || echo "Run security audit"`
- Lock files: @package-lock.json or @poetry.lock or @Cargo.lock
## Task
Systematically update project dependencies with comprehensive testing and compatibility validation:
**Update Strategy**: Use $ARGUMENTS to specify patch updates, minor updates, major updates, or security-only updates
**Update Process**:
1. **Dependency Analysis** - Audit current versions, identify outdated packages, assess security vulnerabilities
2. **Impact Assessment** - Check changelogs, breaking changes, deprecation warnings, compatibility matrix
3. **Staged Updates** - Apply patch updates first, then minor, finally major versions with testing between stages
4. **Testing & Validation** - Run full test suite, build verification, integration testing, performance checks
5. **Rollback Strategy** - Document changes, create restore points, maintain rollback procedures
6. **Documentation Updates** - Update README, dependencies list, migration guides, team notifications
**Safety Features**: Automated testing between updates, dependency conflict resolution, security vulnerability prioritization.
**Output**: Updated dependency manifest with comprehensive testing results, security audit report, and upgrade documentation.
@@ -0,0 +1,66 @@
---
allowed-tools: Read, Write, Edit, Bash
argument-hint:
description: Set up Vercel Analytics and Speed Insights for React/Vite projects
---
# Vercel Analytics Setup
Automatically configure Vercel Analytics and Speed Insights for your React/Vite project.
**Usage:** `/vercel-analytics` (no arguments needed)
**What it does:**
- Installs @vercel/analytics and @vercel/speed-insights packages
- Adds components to your React app
- Configures SPA routing for Vercel deployment
- Fixes 404 errors for direct route access
**Process:**
1. **Install Vercel Packages**
```bash
npm install @vercel/analytics @vercel/speed-insights
```
2. **Detect Main App File**
- Search for main React entry point:
- `src/App.tsx` or `src/App.jsx`
- `src/main.tsx` or `src/main.jsx`
- Read file to determine current structure
3. **Add Analytics Components**
- Import Analytics from '@vercel/analytics/react'
- Import SpeedInsights from '@vercel/speed-insights/react'
- Add both components to the main App component
- Use `/react` imports (not `/next`)
4. **Create vercel.json Configuration**
- Create `vercel.json` in project root
- Add SPA rewrite rules:
```json
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
```
- This ensures all routes serve index.html (fixes 404s)
5. **Verify Setup**
- Confirm components are properly imported
- Check vercel.json exists and is valid
- Display success message with next steps
**Expected Outcome:**
- ✅ Analytics tracking active
- ✅ Speed Insights monitoring configured
- ✅ SPA routing works correctly on Vercel
- ✅ No 404 errors on direct route access
**Next Steps:**
1. Deploy to Vercel: `vercel deploy`
2. View analytics at: https://vercel.com/dashboard/analytics
3. Check Speed Insights: https://vercel.com/dashboard/speed-insights
**Note**: Works with React, Vite, Create React App, and other SPA frameworks.