Design Patterns Analyzer Skill

Design Patterns Analyzer Skill

**Purpose**: Detect, suggest, and evaluate Gang of Four (GoF) design patterns in TypeScript/JavaScript codebases with stack-aware adaptations.

Core Capabilities

• **Stack Detection**: Identify primary framework/library (React, Angular, NestJS, Vue, Express, RxJS, Redux, ORMs)
• **Pattern Detection**: Find existing implementations of 23 GoF patterns
• **Smart Suggestions**: Recommend patterns to fix code smells, using stack-native idioms when available
• **Quality Evaluation**: Assess pattern implementation quality against best practices

Operating Modes

Mode 1: Detection

**Trigger**: User requests pattern detection or analysis **Output**: JSON report of patterns found with confidence scores and stack context

**Workflow**:

1. Stack Detection (package.json, tsconfig.json, framework files)
2. Pattern Search (Glob for candidates → Grep for signatures → Read for validation)
3. Classification (native to stack vs custom implementations)
4. Confidence Scoring (0.0-1.0 based on detection rules)
5. JSON Report Generation

**Example invocation**:

/design-patterns detect src/
/design-patterns analyze --format=json

Mode 2: Suggestion

**Trigger**: User requests pattern suggestions or refactoring advice **Output**: Markdown report with prioritized suggestions and stack-adapted examples

**Workflow**:

1. Code Smell Detection (switch statements, long parameter lists, global state, etc.)
2. Pattern Matching (map smell → applicable patterns)
3. Stack Adaptation (prefer native framework patterns over custom implementations)
4. Priority Ranking (impact × feasibility)
5. Markdown Report with Code Examples

**Example invocation**:

/design-patterns suggest src/payment/
/design-patterns refactor --focus=creational

Mode 3: Evaluation

**Trigger**: User requests pattern quality assessment **Output**: JSON report with scores per evaluation criterion

**Workflow**:

1. Pattern Identification (which pattern is implemented)
2. Criteria Assessment (correctness, testability, SOLID compliance, documentation)
3. Issue Detection (common mistakes, anti-patterns)
4. Scoring (0-10 per criterion)
5. JSON Report with Recommendations

**Example invocation**:

/design-patterns evaluate src/services/singleton.ts
/design-patterns quality --pattern=observer

Methodology

Phase 1: Stack Detection

**Sources** (in priority order):

• `package.json` → Check dependencies and devDependencies
• Framework-specific files → `angular.json`, `next.config.*`, `nest-cli.json`, `vite.config.*`
• `tsconfig.json` → Check compilerOptions, paths, lib
• File extensions → `*.jsx`, `*.tsx`, `*.vue` presence

**Detection Rules** (from `signatures/stack-patterns.yaml`):

• React: `react` in deps + `*.jsx/*.tsx` files
• Angular: `@angular/core` + `angular.json`
• NestJS: `@nestjs/core` + `nest-cli.json`
• Vue: `vue` v3+ + `*.vue` files
• Express: `express` in deps + `app.use` patterns
• RxJS: `rxjs` in deps + Observable usage
• Redux/Zustand: `redux`/`zustand` in deps + store patterns
• Prisma/TypeORM: `prisma`/`typeorm` in deps + schema files

**Output**:

{
  "stack_detected": {
    "primary": "react",
    "version": "18.2.0",
    "secondary": ["typescript", "zustand", "prisma"],
    "detection_sources": ["package.json", "tsconfig.json", "37 *.tsx files"],
    "confidence": 0.95
  }
}

Phase 2: Pattern Detection

**Search Strategy**:

• **Glob Phase**: Find candidate files by naming convention
• `*Singleton*.ts`, `*Factory*.ts`, `*Strategy*.ts`, `

<!-- truncated -->